5 Awesome CSS3 Features

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 :
rounded-corner

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:
text-shadow

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

border-mage

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

custom-font

5. Multiple Backgrounds

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

multiple-background

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.

2 thoughts on “5 Awesome CSS3 Features

  1. Thanks for the tips… But text-shadow is not a css2 property, as far as I know its a css level 3 property. Along with safari, text-shadow property is supported by Firefox3.5 and even IE9 I guess.

    -Deepu

Leave a Reply

Your email address will not be published.