Credits

• Push Your Web Design Into The Future With CSS3 by Chris Spooner, published in Smashing Magazine
• CSS3.info
• Free Fonts available for @font-face embedding

List of the New Features

Dropshadow divs with CSS3.

this effect:

the CSS3 code:
box-shadow: 3px 3px 15px #666;

in the format of:
box-shadow: [displacement X] [displacement Y] [blur width] [color];

to force this to work on Safari & Firefox3+ include these lines:
-webkit-box-shadow: 3px 3px 15px #666; -moz-box-shadow: 3px 3px 15px #666;

Dropshadow text with CSS3.

this effect:

the CSS3 code:
text-shadow: 2px 2px 1px #999;

in the format of:
text-shadow: [dX] [dY] [blur] [color];

This only works on Safari and browsers which support CSS3 properties.

Rounded corner borders with CSS3¹²³.

this effect:

the CSS3 code:
border: 5px solid #000000; border-radius: 20px;

in the format of:
border-radius: [radius size];

to force this to work on Safari & Firefox3+ include these lines:
-moz-border-radius: 20px; -webkit-border-radius: 20px;

also, it is possible to specify a different border-radius for each corner like this:

the CSS3 code:
border-top-left-radius: 50px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 50px;

to force this to work on Safari & Firefox3+ include these lines:
-moz-border-radius-topleft: 50px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 50px; -webkit-border-top-left-radius: 50px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 50px;

Custom border image with CSS3¹²³.

this effect:

the CSS3 code:
border: 10px solid #000000; border-image: url(border-image.gif) 10 round round;
nb. you must specify the border (with a width that would accomodate your repeating border image size) otherwise border-image would not work.

in the format of:
border-image: url([image]) [border width] [behaviorX] [behaviorY];
where [behaviorX] and [behaviorY] can be stretch, round, or repeat.

to force this to work on Safari & Firefox3+ include these lines:
-webkit-border-image: url(border-image.gif) 10 round round; -moz-border-image: url(border-image.gif) 10 round round;

also, it is possible to vary the behavior of your border-image (by using one image only) for each corner like this:

the CSS3 code:
border: 10px solid #000000; -webkit-border-image: url(assets/border-image.gif) 10 stretch stretch;

to force this to work on Safari & Firefox3+ include these lines:
-moz-border-image: url(assets/border-image.gif) 10 stretch stretch; border-image: url(assets/border-image.gif) 10 stretch stretch;

Color & transparency by RGBA with CSS3.

this effect:

the CSS3 code:
background: rgba(155, 0, 0, 0.8); color: rgba(255, 155, 255, 0.8);

in the format of:
_PROPERTY_ : rgba([red value], [green value], [blue value], [opacity])

This property works on Safari and Firefox 3.0+.

Opacity by opacity value with CSS3.

this effect:

the CSS3 code:
opacity: 0.75;

in the format of:
opacity: [decimal degree of opacity];

This property works on Safari and Firefox 3.0+.

Custom fonts by embedding with CSS3.

this effect:

the CSS3 code:
@font-face { font-family: "Fertigo"; src: url(assets/Fertigo.otf) format("opentype"); } @font-face { font-family: "DiavloBOOK"; src: url(assets/Diavlo_BOOK_II_37.otf) format("opentype"); } @font-face { font-family: "DiavloBLACK"; src: url(assets/Diavlo_BLACK_II_37.otf) format("opentype"); } @font-face { font-family: "DiavloLIGHT"; src: url(assets/Diavlo_LIGHT_II_37.otf) format("opentype"); } p { font-family: "Fertigo", Arial, Sans-Serif; } b { font-family: "DiavloBLACK", Arial, Sans-Serif; } i { font-family: "DiavloLIGHT", Arial, Sans-Serif; }

in the format of:
font-face { font-family: "[assign a name to the font]"; src: url([font file location]) format("opentype"); }

This only works on Safari and browsers which support CSS3 properties¹.
Please only use free fonts² for application of this property to avoid legal issues.

¹ Firefox 3.1+ apparently renders CSS3 properties as well.

² Here is a useful page on the free fonts available for @font-face embedding.

View Demo

• For Safari and Firefox 3.1+ users:
  Click here to view the demo HTML page.

• For other users:
  Click here to view the screenshot of the above demo html page (in Safari browser).