By
This post is from Laurent Jouanneau, who was kind enough to build a very simple but elegant demonstration of how to use web fonts and some of the new CSS features in Firefox 3.5.
Shadows and round corners
First, we set some style properties on the toolbar:
-moz-border-radius:10px 0px 10px 0px;
This indicates that top left and bottom right border corner should be round with a radius of 10 pixels.
-moz-box-shadow: #9BD1DE 5px 5px 6px;
This indicates that a shadow should be drawn under the div, with an offset of 5 pixels to the right and the bottom, and with a blur radius of 6 pixels.
Second, the buttons. We still use a border-radius property. But we use also a box-shadow property which changes depending of the state of the button. In the normal state, there is a shadow outside the button. When the mouse hovers over it (the hover state), the shadow is changed to be inside the button using the inset CSS property. We do the same thing when we click on the button (the active state), but we also make the shadow is bigger and darker.
#superbox button {
-moz-border-radius: 5px;
-moz-box-shadow: #000 0px 0px 8px;
}
#superbox button:hover {
-moz-box-shadow: inset #989896 0 0 3px;
text-shadow: red 0px 0px 8px;
}
#superbox button:active {
-moz-box-shadow: inset #1C1C1C 0 0 5px;
}
You can also see that we add a red shadow under the text of the button when the mouse hovers over it using the text-shadow property.
Web fonts
Each button is rendered with its own font, declared using @font-face. Example:
@font-face {
font-family: Brock Script;
src: url("BrockScript.ttf");
font-style: normal;
font-weight: normal;
}
With the font-family property, we indicate a name for our font. The src indicates the url of the downloadable font.
Once we’ve defined the @font-face property we can use it in the CSS for one of the buttons:
.first {
font-family: Brock Script;
}
When you declare the font with @font-face, and then use the font in CSS, the browser will automatically download and render using that font. The browser won’t download fonts you don’t use, so it’s safe to include descriptions of fonts from a common CSS file that might not be used in the page that you’re currently displaying.
In the demonstration there’s also a small amount of script connected to each of the buttons that changes the class of the blue box to use the downloaded font for that button showing that you can update fonts on the fly as well.
With these relatively simple techniques we can have beautiful buttons without having to use a bitmap image.
Note: these fonts can be downloaded from fontsquirrel.com : Brock-Script (created by Dieter Steffmann), Sniglet (created by The League of Moveable Type, under the licence CC-by-sa) and Quick End Jerk (created by Vic Fieger).
About Christopher Blizzard
Making the web better, one release at a time.
22 comments