使用CSS3将你的网站设计推向未来

There are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design. These features include CSS styling rules that are being released with the upcoming CSS3 specification. Realistically, you won’t be able to use these on your everyday client projects for another few years, but for design blogs and websites aimed at the Web design community, these features can help you push the boundaries of modern Web design today, adding that extra spice to your design and helping the industry move forward.

Here are five techniques snatched from the future that you can put into practice in your website designs today.

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:

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-imageborder-bottom-imageborder-bottom-left-imageborder-left-imageborder-top-left-imageborder-top-imageborder-top-right-imageborder-right-image

Supported in Firefox 3.1, Safari and Chrome.

As used by: Blog.SpoonGraphics.

See also:

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:

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:

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:

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).

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