Cascading style sheets (CSS) have long been hailed as the Web’s bridge to the promised land of separation of content and presentation. But while we Web developers have happily kicked our table-based layouts (mostly) to the curb in favor of much more manageable elements marked up with CSS styles, things are still far from perfect. Much of this has to do with intractable browser compatibility issues, but that aside, a lot could be solved by upgrading CSS to address the things we’ve learned over the years.
In steps CSS3 …
The newest family member to the style sheet family is CSS3. With the possibility of new and exciting things when it comes to designing and how you design, things look hopeful on the horizon. Word on the street is that with CSS3, you can create more diverse styles sheets for large variety of occasions and much much more. All of this information can be found at css3.info more in depth and detail.
If you don’t want to wade through all the details, here’s a summary for Web developers and Web users broken down into website parts:
Borders
border-color: in Firefox there is now an option for a fading gray border, a very common effect that is now achieved in somewhat kludgy ways. border-image: this feature can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image. border-radius: a new feature in CSS3, which allows you to create round corners on box-items (very sexy stuff … if you’re using Firefox or Safari, a page that helps you roll your own “themes” on the site of our favorite Javascript library, jQuery). box-shadow: another new feature in CSS3, gives you the option of setting up a shadow on a box-item and varying the options … once again, a very common activity that is currently done in unsettlingly dirty ways. Backgrounds
background-origin/background-clip: this property is going to be used to calculate background-position of a background in a certain box. A feature in this property is used to determine whether the backgrounds extends into the border or not. background-size: You can specify this size in pixels, width and height, or in percentages of a background. multiple backgrounds: this snazzy new feature allows the implementation of multiple backgrounds on one element. Read More…