Although CSS3 is still officially in the works, the recent releases of Safari and Firefox have given us a few new CSS tools to experiment with. Designers may specifically be interested in the following features that accomplish with a few lines of code, things that we would normally do with graphics.
Custom Typefaces
Being able to use whatever font we feel like using in a web layout is a pretty much a designer’s dream come true. In the past the only way to do that and make sure that users see it was to create graphics for the pieces of text that you wanted rendered in a particular font. As more browsers include the @font-face property, that should hopefully change. Luckily the inclusion of the @font-face property in Firefox 3.5 now opens up font embedding to a much larger audience.
Using it is pretty simple. First you define the name of the font family and point it to the location of the font file. At this time .ttf and .otf are supported:
@font-face {
font-family: PrettyFont;
src: url(fonts/PrettyFont.ttf);
}
Then you just use the above font-family name in your document as you normally would:
p {
font-family: PrettyFont, Arial, sans-serif;
}
Live example – will only be visible on browsers that support @font-face
Reference image – This is what the above should look like
As always, plan on a fallback incase your users are on an older browser. In this case if the user is using an older browser they will see paragraph text in Arial.
Drop Shadows
I’m pretty sure a book can be written on the history of the drop shadow. Back in the day, designers used to create drop shadows on objects and type by adding a separate layer behind an object and adding some blur. Later versions of PhotoShop made this easier with some built in tools, but all this meant to your site designs was more graphic files and longer download times. The box-shadow and text-shadow properties now allow you to do this all with a line of code to either a box or a piece of text.
div {
box-shadow: 2px 2px 3px #CCC;
}
h1 {
text-shadow: 2px 2px 3px #CCC;
}
What this does is place a 2px to the right, 2px down, add 3px of blur and color it a light gray (#CCC). The best part is that your text stays selectable and can be increased or decreased in size using your browsers built in text sizing function.
Live example – will only be visible on browsers that support box and text shadows
Reference image – This is what the above should look like
Rounded Corners
Another feature that is sure to be useful (web apps come to mind) is the border-radius property. What this does is round the corners on boxes – a feature that previously required a lot of markup and graphics to create. Now you can do it easily with:
div {
border-radius: 8px;
}
This will round the corners of a box with 8px radius.
Live example – will only be visible on browsers that support border radius
Reference image – This is what the above should look like
The nice thing about using these new features is the savings on extra graphics and code and simplifying your stylesheets and preserving the underlying text. All of these features degrade nicely on older browsers too. That being said, remember that CSS3 is still not fully supported on all browsers so be sure to test thoroughly. But Remember… with great power comes great responsibility! There may be a temptation to go over the top so please… use these sparingly 
Comments