With all the modern browsers starting to support CSS3 (including Mozilla Firefox 4, Apple Safari 4, Internet Explorer 9), it's time to take a real look at CSS3 and see what it can do, and what it's capable of doing. CSS3 has a lot of new properties to use, including gradients, border images, transitions, animations, border radius, @font-face, shadows, and more.
Animations
We are going to take a look at the CSS3 animation property. This property is only available to webkit browsers at the time of writing, therefore will only work for Google Chrome and Apple Safari. For CSS animations, there are two parts to it, the first part is setting up the animation, the second part is the key frames. To set up an animation, you can use the following:#box1 {
-webkit-animation: 'move' 5s linear;
-webkit-animation-iteration-count: infinite;
}
Webkit-animation defines the animation name, the duration of the animation, and the timing function. You could use more options, here is a full shorthand property.
-webkit-animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-direction>Now we need to add the key frames to the CSS.
@-webkit-keyframes move {
0% { margin-left: 0; }
25% { margin-left: 25px; }
50% { margin-left: 100px; }
75% { margin-left: 75px; }
100% { margin-left: 0; }
}
As you can see, this set of key frames is called move.
@-webkit-keyframes <animation-name>We then use percentage to tell the browser what we want done at what point. So between 0-25%, it needs to go 25px to the right, 25%-50% it needs to move 75px to the right, and then back.
This is a demo. This text will move if you are using Safari or Chrome.
You can also do this with other properties, including background, transform, and more. Here's another example.
#box2 {
font-size: 10px;
-webkit-animation: 'grow' 3s linear;
-webkit-animation-iteration-count: 2;
}
@-webkit-keyframes grow {
0% { padding: 6px; font-size: 10px; }
25% { padding: 8px; font-size: 13px; }
50% { padding: 10px; font-size: 15px; }
75% { padding: 8px; font-size: 13px; }
100% { padding: 6px; font-size: 10px; }
}
Gradients
There's no more need to make images for gradients since one of CSS3s new properties is gradients. This property is only supported on Mozilla and webkit browsers at the time of writing. The CSS3 gradients are very flexible, they allow you to start and stop a gradient at any space in your elements. You are also able to add as many gradients as you wish. But first off, here's a simple example.background: -moz-linear-gradient(top, #00abeb, #fff); background: -webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff));This creates a linear gradient, from top to bottom, blue to white. As you can see, the webkit property has some more options, it uses center top and center bottom, this means that you could change the direction of the gradient by using left top and right bottom for a diagonal gradient.
background: -moz-linear-gradient(left, #00abeb, #fff); background: -webkit-gradient(linear, left center, right center, from(#00abeb), to(#fff));
As said above, you are also able to add as many gradients as you wish, here is an example of using 3 gradients, it uses percentages to find the position for a new gradient.
background: -moz-linear-gradient(top, #00abeb, #fff 50%, #00abeb); background: -webkit-gradient(linear, center top, center bottom, from(#00abeb), color-stop(50%, #fff), to(#00abeb));
Just remember that not all browsers support CSS3 gradients, so it's always useful to have a back-up image of your gradient.
Border Radius
CSS3 has added more properties to style your borders, and one of these is border-radius. This allows you to make rounded corners on any element. This property is available on Firefox, Chrome, Safari and Opera, though Internet Explorer 8 does not support it. The easiest way to do border-radius is to use shorthand code. If you are using any browser apart from IE, you can see that we use CSS3 rounded corners on this blog for the code, main content and the "share this" on the left.border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;You can also style each corner individually, using shorthand code.
border-radius: 0 5px 0 5px; -moz-border-radius: 0 5px 0 5px; -webkit-border-radius: 0 5px 0 5px;or
border-top-right-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;
Box and Text Shadow
You can now apply shadows to both boxes and text. They both have different property names, but since they are very similar, I will show them both in the same section. We will start with the text shadow first. text-shadow is supported by all modern browsers except Internet Explorer.text-shadow: 1px 1px 0px #000;This would create a black shadow, with no blur effect 1px below and 1px to the right the text. Here are the options for text-shadow so you get the idea.
text-shadow: <below> <right> <blur> <color>;This text has a shadow.
It's possible to make the shadow go either way on the text by using -1px, this would make it above the text or to the left. You can also 0px like the example below, this would cause a blurred shadow around the text.
This text has a shadow.
This text has a shadow.
text-shadow: 0px 0px 5px #000;The box shadow is similar, except you're also able to do inset shadows. Note that box-shadow is only supported by Firefox, Opera and Webkit browsers, the box-shadow property only works in Opera, so you must use browser specific properties for mozilla and webkit.
box-shadow: 3px 3px 5px #000; -moz-box-shadow: 3px 3px 5px #000; -webkit-box-shadow: 3px 3px 5px #000;If you are after an inset shadow (inner shadow) the following code could create this.
box-shadow: inset 0px 0px 5px #000; -moz-box-shadow: inset 0px 0px 5px #000; -webkit-box-shadow: inset 0px 0px 5px #000;
This box has a shadow
This box has an inner shadow
This is just a small taste of CSS3, and there are still a lot more properties to cover. Expect a new article covering more CSS3 properties coming soon.
Add a Comment