The Enhanced CSS3

 

Since the technology changes rapidly and surprise people with their new elements, Compatibility and specialization. The Cascading Style Sheets (CSS) hits up the market with their improved and modernized version the CSS3 which is leading to greater flexibility and makes it much easier to recreate previously complex effects.

 

The CSS3 Modification:

Box Shadow:

The CSS3 gives you feature to apply shadows in the websites without using JavaScript  and create the shadow directly in the image.

Example:

 #my_id {

background: #FFF;

border: 1px solid #000;

/* For Mozilla: */

-moz-box-shadow: 5px #999;

/* For WebKit: */

-webkit-box-shadow: 5px #999;

}

 

Opacity:

We usually see many ways to use Opacity with IE hacks and other several methods. However, the property of CSS3 allows users to utilize with easier technique.

Example:

#my_id {

background: #F00;

opacity:  0.5;

}

 

Color Module:

One more thing I would like to add that CSS3 is supporting more colors and wide range of color definition. These are the supported color by CSS3; HSLA,RGBA, HSL, and CMYK.

For more explanation please visit;

http://lea.verou.me/2009/03/css3-colors-today-mediacampathens-session/

 

 Multi-Column Layout:

This is very interesting feature of CSS3. It is offering to use Multi-Column Layout. The new way of arranging text in the proper way i.e “News paper” type way.

Example:

#my_id {

text-size: 12px;
/* For Mozilla: */

-moz-column-gap: 1em;
-moz-column-rule: 1px solid #000;

-moz-column-count: 3; }

Multiple Backgrounds:

With CSS3 it is now possible to have multiple backgrounds without creating another element. It is fortune for those who have been using multiple backgrounds.

Example:

#my_id {
        background:
             url(topbg.jpg) top left no-repeat,
              url(middlebg.jpg)center left no-repeat,
              url(bottombg.jpg) bottom left no-repeat;
}

 

These feature and modernization are pretty fantastic for implementation and user would love to play with them. I hope the above examples will help you to recognize CSS3 and its attributes.

Here are the websites modified through CSS3:

http://kyan.com/

http://2011.beercamp.com/

http://ibuypink.com/

http://benthebodyguard.com/

http://www.culturalsolutions.co.uk/

http://mailchimp.com/

http://analog.coop/

 

Not reviewed so far!

  • Share your thoughts about the post by filling out the form below.

Leave a Comment