Nice Pure CSS3 Like Apple Navigation

Apple’s website has long served as inspiration to web designers who recognize the superiority of simplicity in user experience. One of its most iconic features is the tabbed navigation – a long, narrow, slightly-rounded set of immaculately devised and executed buttons that serve as the launchpad for Apple.com.

While the advances in this latest adaptation of the CSS standard are widely applied and encouraged, some browsers offer more support for them than others (Internet Explorer least among them). Despite their discrepencies in adapting to it, however, most have offered custom syntax solutions for some of the more highly favored and regarded properties. Here are a few examples of the newly implemented properties that I utilized for this project…

Border-Radius

To simplify the structure of HTML and eliminate the need for images, CSS3 introduces the border-radius property.

SUPPORT NOTE : The latest versions of Firefox, Chrome and Safari support border-radius, while Internet Explorer (8 and older) does not.

Gradients

Before CSS3, creating a gradual blend between colors was only possible through images set to repeat over the background of an element, but a series of solutions for all major browsers enables simple yet clean and clear gradients.

Closing Thoughts

Despite the cross-browser compatibility and rendering discrepancies, and the remaining limitations of CSS formatting relative to its image-oriented counterparts, the lines that divide image-intensive and script-intensive solutions in web design are blurring with the inclusion of more robust options in each new version of the CSS standard. Many of the restrictions of CSS2 that directed designers to image editing programs are forgotten in the face of the flexible and far-reaching enhancements achieved in CSS3. Given the significant progress made so far, one can only imagine the freedom and capability that the next stage of the standard will deliver.