HTML5 support is picking up in browsers, Safari and Chrome are definitely ahead of the pack with good support for CSS3 features like gradients, border-radius, transitions. Firefox4 is not bad either, just waiting for it to graduate from beta to production. I haven’t played too much with IE9, one of the problems I have with IE9 is that it overwrites my existing IE8 installation. I decided to update this website (original site written in custom PHP) to use CSS3 features and see how they work out in different browsers. I’m trying not to put any CSS hacks so this website will not render in its entirety on older browsers.

Some of CSS3 features explored:

• CSS3 border radius
• CSS3 gradients
• CSS3 transitions
• Scalable Vector Graphics (SVG)

CSS3 border-radius features that is supported decently well across all browsers, note all browsers implies Safari 5+, Chrome 8+, Firefox 4+, IE 9+, don’t bother trying to get HTML5 features working in IE6 era browsers. The property is easy to use and should help get rid of images for rounded corners. Earlier versions of Firefox support border radius through -moz specific property. CSS3 Info Website has done a good job of explaining border-radius property in detail. One of the better examples of rounded corners using border-radius is showcased at Web Designer Wall . Here’s a quick overview of border-radius property:

border-radius: 9px;
border-radius: 6px 12px 6px 12px;
border-top-left-radius: 6px;
border-top-right-radius: 12px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 12px;

-moz-border-radius: 9px;
-moz-border-radius: 9px;
-moz-border-radius: 6px 12px 6px 12px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 12px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 12px;

In original version of bhira.net website I’ve used border-radius property for rounded corners for header and page div. Dropdown menu items are rendered as unordered list with border-radius. You’ll need to set border-radius for first-child and last-child elements within the list to ensure hover color change honors rounded corners.

CSS3 Gradient support in browsers has been long time coming. Webkit and Mozilla engines have working implementations for sometime now, IE used to have a hack using filters to achieve background gradient. Starting with IE9, Microsoft has removed the filter hack and gradients don’t work as of now, but looks like they’ll add standards compatible support soon. For now folks browsing this site using IE won’t see the cloudy blue fade effect which uses CSS gradient with stops. In theory you can use the radial gradient, but so far I haven’t found a good use case for it, somehow the glowing sun is not suitable for most of web content. When setting background gradient make sure you set the height property for the element, in my case I’m setting background gradient for the entire page so I set body height to 100%.

/* gradient using from and to colors */
background:-webkit-gradient(
  linear,
  left top,
  left bottom,
  from(#f0f7fb),
  to(#dcecf6)
);
background:-moz-linear-gradient(
  top,
  #f0f7fb,
  #dcecf6
);

/* gradient using color stops */
background:-webkit-gradient(
  linear,
  left top,
  left bottom,
  color-stop(0%, #ffffff),
  color-stop(50%, #dcecf6),
  color-stop(100%, #ffffff)
);
background:-moz-linear-gradient(
  top,
  #ffffff 0%,
  #dcecf6 50%,
  #ffffff 100%
);

CSS3 Transitions make for a lively web, you don’t need fancy JS libraries with all the AJAX functions to transform images and HTML elements. You can achieve all that using CSS, isn’t that neat? There is quite a lot you can do with transitions property, I’ve used it to ease-in the dropdown menu, but you can certainly use it for rotating elements and fading effects. Sadly, you’ll have to use -webkit and -moz prefixes to apply these transitions, implying the support is not standard yet and IE (even IE9) won’t perform any transitions. Art of Web explains these transitions in more depth and get hifi describes navigation based on transitions. On a side note if you want to see a good selection of dropdown menus check out specky boy. The transitions used for dropdown menu are:

#nav li {-webkit-transition:all 0.2s; -moz-transition:all 0.2s; }
#nav li a {-webkit-transition:all 0.8s; -moz-transition:all 0.8s;}
#nav li ul {-webkit-transition:all 1.0s; -moz-transition:all 1.0s;}
#nav li ul li {-webkit-transition:height 0.5s; -moz-transition:height 0.5s;}

Now that SVG support is mainstream (it even works on iPhone and iPads) I’m using the code from Stock4Q app to illustrate the power of SVG. The example below can also be accessed via stokes feature in Stock4Q app. It uses SVG animations and gradients, the code is verbose so I’m not inlining it, you can access it using browser’s ‘view source’ option. NOTE: I’ve disabled the SVG rendering on mobile devices as viewport is set to 320px and this example uses a minimum width of 600px which causes the rendering of mobile page go awry. For mobile devices please access the “Stokes” page @ Stock4Q.