Blurry Navigation · pure CSS

Version 0.15 - how does it work?

With just a few lines of CSS code you can reproduce this very nice, scalable effect. It's completely flexible and can be styled as you like:

/* blurry state for inactive navigation links + transition style */

nav ul li a,
nav ul li a:visited {
	color: rgba(51,51,51,.05);
	text-shadow: 0 0 8px rgba(0,0,0,.7), 0 0 2px rgba(51,51,51,.2);
	transition: color linear .36s, text-shadow linear .36s
	... }


/* approximation of rgba value for inactive nav / older browsers */

.no-textshadow nav ul li a,
.no-textshadow nav ul li a:visited {
	color: #a3a296 }


/* text-shadow fades to very transparent, font color to nearly opaque
 no extreme values used to improve smoothness of effect */
 
nav ul li a:hover,
nav ul li a:active,
nav ul li a:focus,
nav ul li a.activeLink {
	color: rgba(51,51,51,.95);
	text-shadow: 0 0 8px rgba(0,0,0,.05) }


/* approximation of rgba value for active & hovered nav / older browsers */

.no-textshadow nav ul li a:hover,
.no-textshadow nav ul li a:active,
.no-textshadow nav ul li a:focus,
.no-textshadow nav ul li a.activeLink  {
	color: #333 }

Let's explain

First we'll float the list items by declaring float: left. Additionally, we set a right margin of 30 pixels so they are not getting too intimate (omitted from code snippet). Now the fancy part: all anchor elements in li-tags have a nearly invisible dark gray color with rgba(51,51,51,.05). We'll set a text-shadow with a blur between 5 and 10 pixels and optionally add another one on top with 2px blur radius to make the effect look as realistic as possible. This creates our inactive state. In order to activate CSS3 animations we give all properties of the link element a transition which runs for, let's say 360ms. I have chosen a linear transition curve here but you can try ease-out, ease-in or some other variant which will alter the look a bit.

The next part is setting a darker link color and toning down the text-shadow for the hover, active, focus state and a specific class we call 'activeLink' which is set to the link pointing to the current page. We are not using PHP, Javascript or other methods of styling links to the current page — that would be too much to explain in this context.

This is it. One thing to note: don't forget to add the vendor-specific (-webkit-,-moz-,-o-) properties of 'transition'. They are omitted here for legibility. You can see the whole code in the CSS file. This works in all modern browsers with rgba & text-shadow capabilities. You can achieve the same effect with hsla color values, too. For browsers lacking text-shadow support like IE we use Modernizr's text-shadow detection to provide an alternate non-fancy version. Modernizr adds a class named 'no-textshadow' to the html tag. We make use of that in our code. Some might argue that blur effects can be achieved with IE filters. We are not going to bother with them and stay standards compliant. Hardboiled, you know? ;)

07-13-11 Update:
- Transitioning from an rgba font color value to another one below 100% opaqueness is way nicer than going from rgba color to hex values.
- Further specified which properties should be transitioned to reduce cpu intensiveness.

I hope you like this. You can always shoot me an email via . Happy testing and rock on!

labs_tcc

© 2011 Trinkaus Creative Consultants · Lovely image of the Alps by Dominic Kamp @ InterfaceLIFT

Tweet