CSS3 is here and we all want to dive-in and start using it, but no browser supports it all, yet.
So, what can you start using, right now?
Here are five great CSS3 features you can start using in your websites – RIGHT NOW!
1. Border Radii
I love curved borders. On one of my old sites (that I can’t wait to update!), I had to use crazy markup and weird images to get rounded edges.
Not any more!
The greater the number, the greater the curve.
Code
[cc lang=”css”].myElement {
/* A few vendor-prefixed versions of the property… */
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
/* …and the ‘real’ property last. */
border-radius: 20px;
}[/cc]
Compatibility
You’ll be fine on all modern browsers, including IE9+. If it isn’t compatible, you’ll simply have square corners.
2. New Color Models
CSS3 gives you rgba(), hsl() and hsla(). The HSL is hue, saturation and lightness. What I really like, is the added A on the HSL and RGB. The A stands for alpha.
This will adjust the opacity of the color!
The higher the alpha value (between 0-1), the more opaque the color will be.
Code
[cc lang=”css”].myElement {
/* A bright orange color, with some very slight transparency added. */
background: rgba(255, 128, 0, 0.7);
}[/cc]
Code
The hsla() color model also takes four values. The first value is the hue, and is just an integer. The next two values are for the saturation and lightness, and these should be percentages. Finally, the alpha value functions the same as with the rgba() function, and should be a number between 0 and 1, inclusive.
[cc lang=”css”].myElement {
/* A solid blue color, with the transparency cut in half. */
color: hsla(240, 100%, 50%, 0.5) }
}[/cc]
Compatibility
Again, this should be supported by all of your modern browsers, including IE9+. For older browsers, use this for a fallback, since rgb() is CSS2.1 compatible.
Code
[cc lang=”css”].myElement {
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.9);
}[/cc]
3. Box Shadows
Before CSS3, you needed images to create shadows under elements.
The box-shadow property takes four values. The first two values are the X and Y offsets, and they determine the angle of the light. The third value is the blur radius. The higher the value, the fuzzier the shadow will appear. These first three properties can be absolute or relative values. The last value is a color. Of course, you could use a hexadecimal color, but the box-shadow property is much more interesting when combined with the new color models in CSS 3. Using the rgba() color model allows the opacity of the shadow to be adjusted, making it appear as though the shadow is naturally blending with the background. Similar to the border-radius property, this property also requires the usage of vendor prefixes.
Code
[cc lang=”css”].myElement {
/* A few vendor-prefixed versions of the property… */
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
/* …and the ‘real’ property last. */
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}[/cc]
Compatibility
You’ll be covered in all modern browsers, including IE9+.
4. Fonts
Download the font file, use @font-face to specify a name and the file path to its location.
Code
[cc lang=”css”]@font-face {
/* Pick a name for your font. */
font-family: orbitron;
/* Then, include the file path to the font file. */
src: url(‘orbitron-light.otf’);
}
.myElement {
/* Finally, apply the new font to an element, with some fallbacks. */
font-family: orbitron, verdana, sans-serif;
}[/cc]
Compatibility
You should be fine on all modern browsers and most older ones. There are a few lingering file format issues, however, there are some great font services you can use, too.
5. Opacity
You can now adjust the transparency of an element by simply using the opacity property.
The value is between 0 and 1.
Code
[cc lang=”css”].myElement {
/* This will make the element 70% opaque, or 30% transparent. */
opacity: 0.7
}[/cc]
Compatibility
Don’t rely on this heavily, as it won’t work on older browsers. It’s a nice effect to add, though!
Hats-off to Nick Pettit for this great list and nice chops!
[via Think Vitamin]
James Cooper says
hmmmm, css3 😉 http://css3pie.com/ is a little script that can let poor IE users see the css3 goodness. Pretty easy to use and rather nifty.
Eric Dye says
Nice!
Greg Simmons says
I just love the repeated use of the phrase:
“all modern browsers, including IE9+”
hahahaha…
Eric Dye says
Totally. 🙂