When CNN recently redesigned their website, they created a strongly-branded and beautiful header section that includes a navigation bar with beveled buttons. Although CNN’s navigation bar utilizes CSS sprites for highlighted and active buttons, the primary design of the buttons (the beveled effect) is done with pure CSS.
I think this is a common-known technique among experienced developers, but many beginning web designers will probably resort to images to create this effect, which is not necessary. So, in this brief tutorial I’ll show you how to create a navigation bar with beveled edges using pure CSS, identical to that on CNN.