Achieving Opacity in the Navigation Bar

I was drawn to the A.V. Club’s navigation bar for my blog post on CSS tips and tricks. What first attracted my attention was the opacity fill that overtook each tab when the user hovered over it. It turns out that this feature was achieve through java script instead of CSS. Still, I found the styling of the tabs, including the slight bottom borders of opacity as well as the spacing between each tab aesthetically pleasing.

Looking at the xhtml code first, I found a few things that I hadn’t encountered before. The first was the <nbsp> tag, a non-breaking space that lets the browser know it needs to leave a space between elements (hence the white line between “film” tab and “music” tab). Also <span>tag was used in xhtml, which I guess is just a way of linking the style.

When diving into the CSS code, I found that the tabs were positioned elements orientated by the float command. They are stripped of text decoration with the text centered in each tab, achieving a simplistic tone. The bottom border (which is where the opacity from the Java script appears to flow from) is 5 px with a solid, lighter colored assigned to it.

To see A.V. Club’s code and read the rest of this post, make a visit to Mizzou Multimedia Design.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: