CSS demo with Firefox 3.5

See the demonstration on this page by using at least Firefox 3.5. It shows a blue box with html buttons. It uses this following CSS features: text shadow, box shadow and downloadable fonts. Here is a screenshot:

screenshot

Shadows and round corners

First, we set some style properties on the toolbar:

border-radius
-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.
box-shadow
-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 5 pixels.

Second, the buttons. We still use a border-radius property. 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 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 on 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).

Thanks to Christopher Blizzard who has corrected my english :-). This article has been published on hacks.mozilla.org.