Cool CSS3 Features !!!!

Border Radius

The ability to have rounded corners without images and JavaScript is one of the most sought after features of CSS3.

#my_id {
 height: 100px;
 width: 100px;
 border:  1px solid #FFF;
 /* For Mozilla: */
 -moz-border-radius: 15px;
 /* For WebKit: */
 -webkit-border-radius: 15px;
}

Border Images

 Adding Images to the border:

#my_id {
 /* url, top image, right image, bottom image, left image */
 border-image:  url(border.png) 30 30 30 30 round round;
}

Multi-Column Layout

 Another CSS3 feature that developers, including myself are very eager to start using is the Multi-Column Layout. It offers a new way to arrange text in more of a “news paper” type way. You have the choice to pick the amount of columns, the column width, column gap width, and column separator. A feature like this was not possible before CSS3. Here is how you do it:

#my_id {
 text-size: 12px;
 /* For Mozilla: */
 -moz-column-gap: 1em;
 -moz-column-rule: 1px solid #000;
 -moz-column-count: 3;
 /* For WebKit: */
 -webkit-column-gap: 1em;
 -webkitcolumn-rule: 1px solid #000;
 -webkit-column-count: 3;
}

 

Multiple Backgrounds

  In the past, having layered backgrounds required you to create more than one element. But now, with CSS3 you can have multiple backgrounds on a single element. This will eliminate a huge annoyance that we have had to deal with in the past. Here’s how it works:

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

Opacity

 #my_id

 { 

  background: #F00; opacity: 0.5; 

 }