Trainer thoughts on web design techs and tools

In CSS3 we can create smooth transitions. Transitions take effect when the property they are applied to changes value.

For a transition to be successful you will need 4 things: an initial value, an end value, the transition itself, and something to trigger it.

Let’s look at some code:

CSS code:

#firstbox {
	width: 580px;
	padding: 9px 15px;
	background-color: #000000;
	color: white;
	margin-bottom: 20px;
	margin-top: 20px;
}
 
#firstbox:hover {
	background-color: #A7B526;
}
 
#secondbox {
	width: 580px;
	padding: 9px 15px;
	background-color: #ED8029;
	color: white;
	-webkit-transition: background-color 5s;
	-moz-transition: background-color 5s;
	-o-transition: background-color 5s;
	-ms-transition: background-color 5s;
	transition: background-color 5s;
}
 
#secondbox:hover {
	background-color: #ffffff;
}

HTML code:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="mycss.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div id="firstbox">This is my first box</div>
	<div id="secondbox">This is my second box</div>
</body>
</html>

If you coded both pages correctly, then your .html page should look like this:

The #firstbox code is just an id and its name is “firstbox”. It is old and rather boring. If you run the html page, you will notice that you get a basic old hover transition. The firstbox will jump from black to green when you hover over it, then change back to black when you move your mouse away from it.

The #secondbox code is where the fun begins. Run the html page and watch as the secondbox fades, or transitions, from orange to white. Pretty cool, huh?

Now, I have to address the crazy code in #secondbox. Browsers are nuts and they are making every developer’s life a living nightmare. What you see in #secondbox is what is called a “vendor prefix”. Check out a blog on vendor prefixes for more information.

To learn more about web design, consider our CSS3 Training.

No TweetBacks yet. (Be the first to Tweet this post)

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© Webucator, Inc. All rights reserved. | Toll Free: 877-932-8228 | UK: 0808-101-3484 | From outside the USA: 315-849-2724 | Fax: 315-849-2723