CSS3 features you can start using now
Written September 1, 2009. 14 comments.
Although CSS3 isn’t mainstream enough that we can adopt it wholly without regard, we can however start using it knowing that it will degrade gracefully enough with minimal impact on our designs.
Aside from beginning your familiarisation process with CSS3, another advantage is that as more browsers start to support it, users with supported browsers (Firefox and Webkit based browsers at time of this blog post) will start noticing the nicer ‘changes’ you’ve made to your web site.
If you want to take advantage of some of the cool stuff made possible by CSS3, by all means start doing it now. Here’s a few you can start using immediately.
Rounded corners
These look particularly nice on form fields, but of course you can also use them on other HTML elements. If the browser doesn’t support CSS3 the user will simply see standard squared corners. The chances are you have been using square corners on your divs and form fields anyway so there’s no love lost, but now they will look much nicer in supported browsers.
-moz-border-radius: 5px; /* The radius for Mozilla */
-webkit-border-radius: 5px; /* The radius for Webkit */ Multiple columns
Once the domain of printed media, multi column content areas can look right at home on a web page as well, and CS3 will let you do it without the need to place each column floating in a div. What happens in an unsupported browser? Thankfully nothing to drastic. The text will just appear as a standard paragraph. But you will just need to bear that in mind when you design the page. FYI, as far as I know this only works in Firefox.
-moz-column-count: 3; /* Number of columns */
-moz-column-gap: 1em; /* Space between each column */
-moz-column-rule: 1px solid black; /* Colour of the border between the columns */ Box shadows
Bye-bye transparent PNG’s: It’s been nice knowing you. Actually transparent PNG’s will always have a use in modern web design, but the CSS3 Box shadow property means they won’t be needed to create a drop shadow under a modal box. As with everything else mentioned in this article, graceful degradation occurs and in this case, and the user simply won’t see the drop shadow.
Note that the box shadow requires at least 3 values to work but no more than 4.
width: 250px;
padding: 10px;
-webkit-box-shadow: 7px 7px 10px #ccc; /* The coordinates of the shadow, blur radius, and the colour (Webkit) */
-moz-box-shadow: 7px 7px 10px #ccc; /* The coordinates of the shadow, blur radius, and the colour (Mozilla) */ Update: box-shadow has been removed from the CSS3 spec.
Text shadow
Once the domain of Photoshop noobs during the last millennium, thanks to CSS3 drop shadows on text are back to haunt every self respecting designer. Seriously though, this one will get abused like you won’t believe and once the Management sees it, they will want it on everything. Let’s keep it our little secret.
font-size:2em; /* Font size */
text-shadow: 2px 2px 3px #999; /* Coordinates, blur radius, colour */ Fonts
While it’s still not a typographers dream, CSS3 does provide far greater control over type. The ability to use any font on your site will also open up a huge can of legal worms, so to avoid any legal hassles it might be best to only use fonts that are free. And with fonts you’ve purchased, you might want to check if the licence extends to you using it on the web in this manner.
Using a font is as easy as:
@font-face {
font-family: "Days"; /* The name of the font sans the extension (to be referenced further down in your style sheet when required) */
src: url("Days.otf") format("opentype"); /* The path to the font, absolute or in this case, relative to the document */
}
h1 {
font-size:1.6em; /* The font size */
font-family: "Days", Helvetica, Sans-Serif; /* Remember that reference to the font I made earlier? This is it. */
} Mixing it all up
Now you can try and be a bit more creative. The example below shows some of the CSS3 elements demonstrated earlier in one single containing div.
That wasn’t so hard now was it? Consider this your first very basic introduction to CSS3. Of course there’s a lot more to it than I’ve shown here, but these will get you started before you move onto something a bit more complex. By the way, here’s a sample I prepared earlier:
css3_demo.zip (2k)
Start of pageWho is That Web Guy?
Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.
Love your work.
Thanks for the tips ;)
I am so excited :) :) I personally think the font option is the best yet.
Way to go (Y)
I uploaded your example with my truetype font and it just loaded sans serif instead of Harabara.ttf :D :D
:(