CSS3 is a new version of CSS (Cascading Style Sheets) allowing web designers to do much more. Previously a lot of these features would require heavy images to work, but thanks to CSS3 it only takes one or two lines of code.

@font-face

Font-face is a really important part of CSS3. It allows you to use any font (typography), regardless of what the visitor has on their computer. Of course, you might have to check licensing – if its a paid font, they’ll probably disallow it since you essentially give the font away. The usage is simple – just place this at the top of your .css document:
@font-face {
font-family: DeliciousRoman;
src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
font-weight:400;
}
Then, you can use it as you would any other font – for instance, if I wanted to apply it to the header div:
#header{
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

Border-radius

If you want to give your div’s rounded corners, CSS3 has that covered with the border-radius feature. It allows you to give rounded corners to almost any div you want. Currently, due to various implementations across web browsers, you have to use several lines of code. These have the same syntax, just a different attribute title. For instance, if I want to give the header div a 5px radius curved border, on all sides, I should use:
#header{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

If you want to give different corners different radiuses, then the syntax is really simple. The code gives the header:
● Top Left Radius – 5px
● Top Right Radius – 10px
● Bottom Left Radius – 15px
● Bottom Right Radius – 20px
#header{
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 15px;
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 15px;
}

Box Shadows

Shadows can add a lot to the design of a website and much like border radius, previously would require images to create the effect. Now you can use some CSS3 syntax and it’ll work. For instance, if I want to give the header div a shadow 5px off to the right and 5px to the bottom of the div in complete black, I’d use:
#header{
box-shadow: 5px 5px #000;
-webkit-box-shadow: 5px 5px #000;
-moz-box-shadow: 5px 5px #000;
}
Note that there are several browser specific presets – these shouldn’t matter in the latest browsers (for instance, Chrome can work with just box-shadow, it doesn’t require -webkit) but for people running older browsers, it acts as a fail-safe. I’d recommend still keeping it in. If you want to give a blur effect, add another px value after the first two (vertical and horizontal).

Multiple Backgrounds

If you want to have multiple backgrounds, CSS3 has native support for this. Previously you might have had to use multiple container divs etc. Now all you need is these few simple lines of code:
body{
background:
url(‘topbg.png’) top no-repeat,
url(‘middlebg.png’) center no-repeat,
url(‘bottombg.png’) bottom no-repeat;
}

This could also be used in div’s, allowing you to have a pre-paragraph background, a center background and a post-paragraph background. Same syntax, just a different selector.

Opacity

CSS3 has native support for opacity, which could be very useful. Previously, I’d use something like a semi-transparent PNG as the background to a div. Now it’s very simple to do it with CSS. And this time there isn’t any browser presets, just one really simple line of code. For instance, if I want to give the header div 40% transparency.
#header{
opacity: 40%;
}
This can be used on the background of divs, images and text.

D-ziner

Enjoy blogging, love everything about Designs, and a WordPress Evangelist.

More Posts

One Response to CSS 3: An overview of the features

  1. Yep! CSS3 is a powerful tool with a huge list of features!
    This is a trend nowadays and we should use all its benefits!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

By submitting this form, you accept the Mollom privacy policy.