Using CSS to create Vista-like Aero effects
written by Craig, 22 June 2007
Vista-like Aero effects are all the rage. Who wants dull block colours, when you can overlay a semi-transparent misty glass effect?!
When it comes to replicating Aero on a web page, designers often resort to alpha-transparent PNGs (which are not directly supported by IE6.0 and below), non-standard CSS (which will not work in all browsers), or JavaScript transparency effects (which fail if JavaScript is not enabled). Even with these solutions, it is not possible to achieve the glass diffusion effect.
The following tutorial shows how you can create a CSS-based Aero effect (view example) that works in most graphical browsers: IE5.0+, Firefox 1.0+, Opera, and Safari.
- Create your ‘normal’ background image, e.g. cssaero_back.jpg:
- Apply a little blurring, lighten the image, or use filters to create the ‘over-effect’ you require. Save this as a different file, e.g. cssaero_over.jpg
- For our page, we will create a menu that is positioned on the right of our background. The basic XHTML:
<div id="back"> <ol> <li><a href="#">first link</a></li> <li><a href="#">second link</a></li> <li><a href="#">third link</a></li> </ol> </div> - We now use CSS to apply the normal background to the #back DIV element, i.e.
#back { width: 400px; height: 300px; background: url("cssaero_back.jpg") 0 0 no-repeat; overflow: hidden; } - The Aero background is now applied to the OL element. Since we are floating the list to the right, the graphic is also positioned 100% to the right.
ol { float: right; width: 8em; height: 100%; list-style-type: none; background: url("cssaero_over.jpg") 100% 0 no-repeat; } - Finally, we can add some minor effects to the LI and A elements, i.e.
li { border-top: 1px solid #4d90aa; } a { display: block; width: 100%; text-align: center; text-decoration: none; padding: 0.2em 0; color: #fff; border-bottom: 1px solid #325e6d; }
Our code is now complete – view the example CSS Aero menu. The effect will still work if you resize your browser text or change the menu width.
The same technique can be used for other elements, such as titles. You can also absolutely position the element using percentage values and alter the over-effect graphic background position accordingly.