There are many new features in Cascading Style Sheets that allow you to express your creativity and save a lot of time when you develop a new web design.
Actually you can use CSS3 styling rules to take many advantages and to make your web ready for the future.
I suggest you to use CSS3 properties only for personal projects and blogs, not for a commercial design.
I suggest you to wait another few years to use it for your clients for many technical reasons, in fact, modern browsers not support fully CSS3 and often you must use targeted browser rules to use CSS3.
I hope that you use CSS3 in your personal project to help industry move forward.
In this article, we have collected four techniques that you can adapt in your design.
The first feature explained in this piece of article, is Border Radius.
Actually, when you develop a menu block with rounded corners, you must use many div elements loading background images for round corners.
In fact, when you add an HTML Block in your layout, you can set only properties about border style and you can’t modify style of corners, that, without wrapping some div with images, are squared by default.
Border Radius is one of the most useful feature in CSS3, so you can styling corners using code below.
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
If you want, you can set Border Radius to target individual corners, adding to your moz syntax: topleft, topright, bottomleft, bottomright. For webkit is lighty different.
-moz-border-radius-topleft: 40px;
-moz-border-radius-topright: 40px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-top-rightright-radius: 40px;
-webkit-border-top-left-radius: 40px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-rightright-radius: 20px;
This function is only supported in Firefox, Safari and Google Chrome. I hope that the final release of Internet Explorer 8 supports natively CSS3.
Another important feature of CSS3 is surely border-image.
With this new rule, you can set an image as a border for your Html block element.
You can use in your CSS with the code below.
border: 10px solid #333333;
-webkit-border-image: url(border.ong) 10 repeat;
-moz-border-image: url(border.ong) 10 repeat;
border-image: url(border.ong) 10 repeat;
The “border: 10px;” property specifies the overall width of the border and every border-image rule place an image with 10px of width.
You can also specify an image for every border: left, right, top, bottom.
border-bottom-rightright-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-rightright-image
border-right-image
This feature is only supported in Firefox 3.1, Safari and Google Chrome.
Often in your design you have used some PNG with Alpha transparency to obtains some good effects.
With the introduction of CSS3 you can save time adding rgba and opacity rules to add alpha transparency to an image or an Html object.
You can set rgba in background and color properties.
background: rgba(200,30, 30, 0.7);
color: rgba(200, 60, 60, 0.7);
you can set RGBA follow this scheme of values “rgba(Red, Green, Blue, Alpha)”.
Alternatively, you can set an alpha value simply using opacity rule.
color: #333;
opacity: 0.7;
This CSS3 feature is supported in: Firefox, Safari, Chrome, Opera (only opacity) and IE7 (opacity, with fixes).
In my opinion this is the most useful implementation of CSS3, in fact, you can use a non default fonts in your CSS linking font file.
Actually, to make your design look similar in every system, you must use defaults fonts: Arial, Helvetica, Verdana, Georgia, Comic Sans …
With the @font-face rule introduced with CSS3, you can call an external font file and use the font in your document.
@font-face {
font-family: 'Anivers';
src: url('Anivers.otf') format('opentype');
This feature is supported in: Firefox 3.1, Safari, Opera 10 and IE7 (with a lots of fixes).
