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

       	  -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;

           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

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

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

view plaincopy to clipboardprint?

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

        @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!