CSS 3 Preview

November 12, 2007

CSS 3 has been in development for a long time and in 2008 new releases of web browsers are set to implement CSS 3 standards. Just as you would expect not all browsers will support all the standards and no doubt IE will interpret them different!
To give you a sneak peek there are actually a couple of things that have already been implemented in some browsers that I can show you. The following are the new elements that I think are really good.

Border-radius:
It’s the one we have been waiting for, it’s the rounded edges! Because i don’t want to alienate any users i have taken screen shots of the work so that all users can see it.

Css3 Rounded Corners

This new feature is long overdue in my eyes but now it’s here its good because it now eliminates the need to use images to create rounded corners on divs and it now makes it easier to re-create tabbed navigation that has rounded corners. This can be done because you can select which corners you want to be rounded and how rounded you want them. Below is an example of only two rounded corners.

css3 rounded top

Box-shadow:
Box shadow is another cool feature that will reduce the need for creating images to make a website look better. Box-Shadow is what it says, it places a shadow on the edge of a div were you want it, You also have good control over what type of shadow you have and how sharp or soft it is.

CSS3 Top Shadow

CSS3 Bottom Shadow

As well as making the web look nice the biggest advantage to having these features are that they eliminate the need to have images all over to give things good effects. In return this reduces the size of your page which means the page can load faster. In the age of broadband you may not see a massive difference in page load time but if you don’t have the luxury of broadband then you can tell the difference. This opens up your site to a wider audience and makes it more accessible.

Gary
SEO Programmer

  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • Wists
  • Furl
  • Spurl
  • Technorati
  • YahooMyWeb
  • Ma.gnolia
  • Reddit
  • Simpy
  • StumbleUpon
Listen to this podcast Listen to this podcast

2 Comments

  1. Thanks, interesting article. I can’t wait until browsers start supporting more of the CSS 3 standards, but how many of them will we be able to use to allow for the millions of people who are still running IE6!? It would be nice if all web browsers had an expiry date on them and stopped working after x years, forcing people to upgrade… But alas I think we’ll be stuck with backwards compatibility issues for quite a while yet!

    Commentbytom November 14, 2007 @ 12:07 am

  2. I agree with you that it is frustrating that people need to be on the latest browsers to view the latest CSS but the joy of the Border-Radius feature will be that if the browser doesn’t support the feature then it will render with right angle corners like what we are used to and it wont effect layout or positioning in any way. Which means you can design with the rounded corners and not worry about it not working in an older browser.

    CommentbyGaryDouglas November 19, 2007 @ 10:00 am

RSS feed for comments on this post
TrackBack URI

Leave a comment

You must be logged in to post a comment.