Many exciting new functions and features are being thought up for CSS3. We will try and showcase some of them on this page. So, have a look at these 5 Awesome CSS3 Features and let us know your thoughts in comment.

Here is the useful css3 tips. I hope that, you will find a quite useful inspiration for your next design project. Thanks!

[ad#co-1]

1. Rounded Corner

You don’t have to have image for each corner. It can now render itself!

Example :

Code

[code lang="css"]
.Box {
background-color: #6b6b6b;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 1px solid #000;
padding: 10px;
width:500px;
color:#fff;
}
[/code]

2. Text Shadow

Learn how to add shadows to text. The only web browser which supports the CSS3 text-shadow property is Safari.

Example:

Code:

[code lang="css"]
h1 {
text-shadow:#9c9c9c 2px 2px 2px;
color:#993333;
}
[/code]

3. Border Image

Another exciting new border feature of CSS3 is the property border-image. Learn how to properly use Image

4. Using Any Custom Font

CSS 3 can read a font file if you specify the path, and then it can render the text that you apply the CSS class or id

5. Multiple Backgrounds

Finally you can apply more than one background the one element.

A good place to check out some awesome css3 features is a website named CSS3.info.

if you would like to receive more inspiration from us, please consider subscribing to our feed by RSS or by email.