Push Your Web Design Into The Future With CSS3

Probably the most common CSS3 feature currently being used is border-radius. Standard HTML block elements are square-shaped with 90-degree corners. The CSS3 styling rule allows rounded corners to be set.

-moz-border-radius: 20px;
          -webkit-border-radius: 20px;
          border-radius: 20px;

Border-radius can also be used to target individual corners, although the syntax for -moz- and -webkit- is slightly different:

-moz-border-radius-topleft: 20px;
          -moz-border-radius-topright: 20px;
          -moz-border-radius-bottomleft: 10px;
          -moz-border-radius-bottomright: 10px;
          -webkit-border-top-right-radius: 20px;
          -webkit-border-top-left-radius: 20px;
          -webkit-border-bottom-left-radius: 10px;
          -webkit-border-bottom-right-radius: 10px;

Supported in Firefox, Safari and Chrome.

As used by: Twitter.

See also:

• W3C Working Draft
• Border-radius on CSS3.info
• The Art of Web

2. Border Image

Border-image, as the name suggests, allows an image file to be used as the border of an object. The image is first created in relation to each side of an object, where each side of the image corresponds to a side of the HTML object. This is then implemented with the following syntax:

border: 5px solid #cccccc;
          -webkit-border-image: url(/images/border-image.png) 5 repeat;
          -moz-border-image: url(/images/border-image.png) 5 repeat;
          border-image: url(/images/border-image.png) 5 repeat;

The {border: 5px} attribute specifies the overall width of the border, and then each border-image rule targets the image file and tells the browser how much of the image to use to fill up that 5px border area.

Border images can also be specified on a per-side basis, allowing for separate images to be used on each of the four sides as well as the four corners:

border-bottom-right-image
    border-bottom-image
    border-bottom-left-image
    border-left-image
    border-top-left-image
    border-top-image
    border-top-right-image
    border-right-image

Supported in Firefox 3.1, Safari and Chrome.

As used by: Blog.SpoonGraphics.

See also:

• W3C Working Draft
• Border-image on CSS3.info
• Border-image in Firefox

3. Box Shadow and Text Shadow

Drop shadows: don’t you just love them?! They can so easily make or break a design. Now, with CSS3, you don’t even need Photoshop! The usage we’ve seen so far has really added to the design, a good example being this year’s 24 Ways website.

-webkit-box-shadow: 10px 10px 25px #ccc;
          -moz-box-shadow: 10px 10px 25px #ccc;
          box-shadow: 10px 10px 25px #ccc;

The first two attributes determine the offset of the shadow in relation to the element, in this case, 10 pixels on the x and y axis. The third attribute sets the level of blurriness of the shadow. And finally, the shadow color is set.

Also, the text-shadow attribute is available for use on textual content:

text-shadow: 2px 2px 5px #ccc;

Supported in Firefox 3.1, Safari, Chrome (box-shadow only) and Opera (text-shadow only).

As used by: 24 Ways.

See also:

• W3C Working Draft
• Box-shadow on CSS3.info
• W3C Working Draft
• Text-shadow on CSS3.info

4. Easy Transparency with RGBA and Opacity

The use of PNG files in Web design has made transparency a key design feature. Now, an alpha value or opacity rule can be specified directly in the CSS.

rgba(200, 54, 54, 0.5);
        /* example: */
        background: rgba(200, 54, 54, 0.5);
        /* or */
        color: rgba(200, 54, 54, 0.5);

The first three numbers refer to the red, green and blue color channels, and the final value refers to the alpha channel that produces the transparency effect.

Alternatively, with the opacity rule, the color can be specified as usual, with the opacity value set as a separate rule:

color: #000;
          opacity: 0.5;

Supported in Firefox, Safari, Chrome, Opera (opacity) and IE7 (opacity, with fixes).

As used by: 24 Ways (RGBA).

See also:

• W3C Working Draft
• RGBA on CSS3.info
• Pure CSS Opacity

5. Custom Web Fonts with @Font-Face

There has always been a set of safe fonts that can be used on the Web, as you know: Arial, Helvetica, Verdana, Georgia, Comic Sans (ahem…), etc. Now the @font-face CSS3 rule allows fonts to be called from an online directory and used to display text in a whole new light. This does bring up issues of copyright, so there are only a handful of specific fonts that can be used for @font-face embedding.

The styling is put into practice like so:

@font-face {
        font-family:'Anivers';
        src: url('/images/Anivers.otf') format('opentype');
        }

The rest of the font family, containing secondary options, is then called as usual:

h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;

Supported in Firefox 3.1, Safari, Opera 10 and IE7 (with lots of fixes: if you are brave enough, you can make font-face work in IE (thanks for heads up, Jon Tan))

As used by: TapTapTap.

See also:

• Fonts available for font-face embedding
• Font-face in IE, making Web fonts work
• Web fonts, the next big thing - A List Apart

Although CSS3 is still under development, the rules listed here are supported by some browsers right now. Safari in particular has extensive support for these new features. Unfortunately, despite being a top-quality browser, Safari has a relatively low number of users, so it is probably not worthwhile adding extra features solely for this group of users. But with Apple’s Mac computers making their way into everyday life, Safari’s usage is likely to continually increase.

Firefox, on the other hand, now has a considerably large user base. What’s more, the soon-to-be-released Firefox 3.1 has added support for a range of CSS3 features. Assuming that most users of Firefox will update their browsers, there will soon be a large group of users with support for these new styling rules.

Google Chrome was released this year. Based on the WebKit engine, this browser has much of the same support as Safari. While Safari makes up a good proportion of Mac users, Chrome has burst onto the scene, making up a decent proportion of Windows users.

Percentage-wise, the W3’s browser statistics indicate that, as of November 2008, 44.2% of W3School’s users across the Web were browsing with Firefox, 3.1% with Chrome and 2.7% with Safari. That means almost 50% of all Internet users should be able to view these features. Within the Web design community in particular, which is much more conscious of browser choice, the range of users with CSS3 support is much higher, at 73.6% (according to the stats at Blog.SpoonGraphics).

6. The downside

Your website may now have a range of fancy new design features, but there are a few negatives to take into consideration:

• Internet Explorer: 46% of Internet users won’t see these features, so don’t use them as a crucial part of the design of your website. Make sure that secondary options are in place, such as a standard border in place of border-image and a normal font in place of @font-face. Please notice that Internet Explorer supports @font-face with EOT (more details) since v4 (thanks for heads up, Jon Tan).
• Invalid style sheets: These CSS3 features have not been released as a final specification. They are currently implemented with tags that target different browsers. This can invalidate your style sheet.
• Extra CSS markup: Following the last point, having to add a different tag for each browser to specify the same rule, as well as include the standard rule for the final CSS specification, adds a lot of extra code to your CSS markup.
• Potentially horrific usage: Just as is done with traditional Photoshop filters, the use of these new styling features could result in some eye-wrenching designs. Drop shadows in particular ring warning bells for us; we’re not looking forward to seeing the Marketing Department’s choices with that one!