If you’ve looked at any of the stuff to be included in
CSS3, you were no doubt bouncing off the walls in excitement until you remembered how long it tends to take
some browsers to support that kind of stuff.
But some good news:
Quite a bit of this CSS3 awesomeness can be used right now to spice up your designs. Some (most) of it will not render in all browsers equally (generally those of the IE variety), but
websites don’t need to look the same in every browser–nor should they. Just because IE6 users can’t see some fancy effect doesn’t mean everybody shouldn’t. Similar to how those watching TV on a standard television will not be able to see HD, users on older browsers need not get the same experience as those on newer browsers
as long as they see nothing wrong with the site.
But enough ranting and onto the good part. CSS3 properties you can use now and how to use them:
1. Text-shadow
The
text-shadow property is probably one of the most commonly used aspects of CSS3, likely because of it’s extremely easy setup (it’s almost too easy…).
For a text-shadow, the property is used as follows:
text-shadow: 2px 2px 5px #000;
The first and second values represent the shadow offset, the third the blur radius, and the last value the color of the shadow.
For tips on effectively using shadows in your designs, check out one of my previous articles,
The Shadow World: CSS3 Text-Shadow and Reality.
Browser support for text-shadow: Safari 3.1+, FireFox 3.5, Chrome 2.0+, Opera 9.6+
2. Box-shadow
The
box-shadow property is used in a way very similar to
text-shadow, but it adds shadows to the elements as a whole rather than to the text inside them:
box-shadow: 5px 5px 10px 10px #000;
The first two values are the offset of the shadow, the third the blur radius, and the fourth value the spread radius. The last value is, of course, the shadow color.
Browser support for box-shadow: Safari 3.1+, FireFox 3.5, Chrome 1.0+
3. Box-sizing
The
box-sizing property is one of the most under-appreciated yet widely-supported properties in the CSS3 spec.
The
box-sizing property is quite simple, and it accepts three possible values:
content-box,
border-box, or
inherit. This declares how an element’s size is to be rendered:
box-sizing: content-box | border-box | inherit;
In properly-behaving browsers, all elements are displayed as
content-box by default — padding and borders are rendered
outside the specified width and height, so an element with a width of 20px with a 1px border and 5px of padding will actually be rendered as 32px wide (20 + 1 + 1 + 5 + 5).
However, by declaring the
box-sizing property to
border-box, the padding and borders are rendered
inside the element. So, our example from earlier would be 20px wide total, with 10px of that element taken up by borders and another 2px taken by padding. This can be extremely useful when using percentage-based widths in your layouts.
Browser support for box-sizing: IE8+, Safari 3.1+, FireFox 2.0+, Chrome 1.0+, Opera 9.6+
4. Columns
The
columns property is also fairly easy to setup and makes for great magazine-style layouts. Both Mozilla and Webkit browsers require prefixes before the property, so setting an element to render its content in multiple columns works as follows:
-moz-column-count: 2; /* For FireFox */
-webkit-column-count: 2; /* For Safari/Chrome */
column-count: 2; /* For when the standard gets fully supported */
-moz-column-width: 250px; /* For FireFox */
-webkit-column-width: 250px; /* For Safari/Chrome */
column-width: 250px; /* For when the standard gets fully supported */
This tells the element that you want the content displayed in 2 columns, each 250px wide. Either of these values can also be set to
auto, which allows it to be determined based on what best fits with the other value.
But what if you want custom gutter sizes and dividers? No problem, as we have
column-gap and
column-rule coming to the rescue:
column-gap: 25px;
column-rule: 1px solid #000;
-moz-column-gap: 25px;
-moz-column-rule: 1px solid #000;
-webkit-column-gap: 25px;
-webkit-column-rule: 1px solid #000;
This will place a 25px gap between our columns with a 1px solid black line running down the middle of the gap. There’s even more you can do with CSS3 columns, and I’d recommend that those interested
checking out this article for more goodness.
Browser support for columns: Safari 3.1+, FireFox 3.5, Chrome 1.0+
5. Border-radius (rounded corners)
Because everybody likes rounded corners, the CSS3 spec contains the popular
border-radius. Mozilla and Webkit browsers require their standard prefixes, so to add rounded corners with a 10px radius to an element, use the following:
-moz-border-radius: 10px; /* For FireFox */
-moz-border-radius: 10px; /* For Safari/Chrome */
border-radius: 10px; /* For when the standard gets fully supported */
For slightly more advanced usage (using on only select corners), check out
this excellent article.
Browser support for border-radius: Safari 3.1+, FireFox 2.0 (non-antialiased), FireFox 3.0+, Chrome 1.0+ (non-antialiased)
6. Border-image
The
border-image property is not used nearly as much as
border-radius (probably because the syntax is somewhat hard to understand). However, it can be used for some awesome effects and
John Resig provides a fairly good explanation of how it can be used through the following example:
-webkit-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch;
-moz-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch;
Basically, the property declares an image to be used before telling the browser how to clip and stretch different sections of it. Check out
his full article for more examples and details.
Browser support for border-image: Safari 3.1+, FireFox 3.5, Chrome 1.0+
7. @font-face (web font embedding)
While not technically a property, the CSS3
@font-face declaration has been receiving quite the attention as of late.
Håkon Wium Lie, the original proposer of CSS, wrote
a must-read article for A List Apart all about
@font-face. Essentially, this allows developers to embed fonts in their pages that can be called by the simple
font-family property.
To embed a font, simply add an
@font-face declaration as follows:
@font-face {
font-family: "My Awesome Font";
src: url(MyAwesomeFont.otf) format("opentype");
}
This tells the browser that whenever the font “My Awesome Font” is used, pull it from “MyAwesomeFont.otf.” Simple and brilliant, really. So then to use our font, we just declare like we would any other font:
h1 { font-family: "My Awesome Font", sans-serif; }
There are a couple things to note, however. Firstly, and most importantly,
make sure the font you are using has a license that allows font embedding.
There’s a fairly decent list of legal fonts over here, and
Typekit will be another solution that looks promising.
The other thing to note: Fallbacks.
Cufón and
typeface.js are both good options for when
@font-face isn’t supported. Kilian Valkhof has a great article on
combining Cufón and @font-face.
Browser support for @font-face: Safari 3.2+, FireFox 3.5, Chrome 2.0+, IE4+ (
sort of)
8. RGBA color
While actually a value and not a property,
rgba() is also worth mentioning (and using!). While generally colors have been declared using hex values (e.g.,
#000000 for black) or RGB values (
rgb(0,0,0) for black), CSS3 has now added a new option:
RGBA.
This works identically to RGB color with the addition of a fourth parameter declaring opacity. So, if you want to create a black background with 50% opacity, simply do the following:
background: rgba(0, 0, 0, 0.5)
While this (of course) will not work in IE, there’s a great (though slightly complicated) article on creating
bulletproof, cross-browser RGBA backgrounds using some filters and PNGs.
Browser support for rgba() (without filters): Safari 3.1+, FireFox 2.0+, Chrome 1.0+
9. Transitions
Ever wished you could do transition effects with CSS? Well, now you can using the CSS3
transition property. Webkit browsers (mainly Safari and Chrome) currently support it and do so with the
-webkit- prefix:
#element {
opacity: .7;
-webkit-transition: opacity 1s linear;
}
#element:hover {
opacity: 1;
}
The
transition property is actually shorthand for
transition-property,
transition-duration, and
transition-timing-function. Our example code above thus tells the browser that when
#element’s opacity changes, do a 1-second linear transition.
These transitions can be applied to any property (and even multiple ones at the same time!), such as padding and background, for instance:
#element {
background: #000;
padding: 5px;
-webkit-transition: background 1s linear;
-webkit-transition: padding 1s linear;
}
#element:hover {
background: #FFF;
padding: 20px;
}
For more advanced usage, check out
the Webkit blog.
Go and use the future!
CSS3 brings some awesome stuff to the table, and now is the time to start using it. As the web development community gets more and more excited about CSS3, Mozilla and Webkit browsers are quickly adding more and more support for new properties, declarations, and selectors. So take advantage of it!
![go_gle[1]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vuu-GkbXKEjVyUWW5ICfGHqBtJ_6EhFFTfI8ZDeOJ249Gud0IyBHbl0x3lJfcNguW6IoeNKP75L-Bw5kf9_5soO8g2asL9UGYc0XRqrc9dLjIIFK8acv9Mpz6Hads=s0-d "go_gle[1]")
![goog_e[1]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sTyasf5PF0GbtAzuPGwMvF3XNUdXF72MuPQuhkY-hZUGwL9yz2o4ESbNBf12Zoo4h0KDrBesXQsSumcMRS8xd-lwuyyiRqkcnFbTJ9hhM5D-YiQXvMnRV0XMG3c3Fb=s0-d "goog_e[1]")
