Border Images: Having border images will allow developers and designers to take there site to the next level. You can be as creative as you want and be able to apply it as a border without extra elements. Quite simple code really:
1 2 3 |
#my_id { border-image: url(border.png) 30 30 30 30 round round; } |
Box Shadow: Before CSS3, we had to either use a shadow image or JavaScript to apply a shadow or create the shadow directly in the image. Neither of those are fun to do in any way. With CSS3 Box Shadow we can apply shadows to almost every element of our website. Consider an example:
1 2 3 4 5 6 7 8 |
#my_id { background: #FFF; border: 1px solid #000; /* For Mozilla: */ -moz-box-shadow: 5px #999; /* For WebKit: */ -webkit-box-shadow: 5px #999; } |
Multi-Column Layout: Another CSS3 feature that developers 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:
1 2 3 4 5 6 7 8 9 10 11 |
#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. Consider an short example:
1 2 3 4 |
@font-face { font-family: "my-font"; src: url(my-font.tff) format("truetype"); } |
These features of CSS3 make it much more powerful and efficient as compared to previous versions of CSS. Some more unique features of CSS3 would be discussed in future articles.