Coding Subtle Navigation Bar With CSS3

Throwing in some of the fancy new CSS 3 selectors could transform the plain old unordered list into a real web menu . Jump the jump for the code ( psst. It does look awesome )

Starting with the Html markup :

     <nav>
     <ul>
     <li><a href="#">HOME</a></li>
     <li><a href="#">BLOG</a></li>
     <li><a href="#">PRODUCTS</a></li>
     <li><a href="#">CONTACT</a></li>
     <li><a href="#">UPCOMING</a></li>
     </ul>
     </nav>

Now heading on to the CSS.

    nav{
       padding:20px;
       margin-top:20px;
       font-family:'HelveticaNeue';
       float:right;
    }
    nav ul{
    }
    nav li{
       display:inline-block;
    }
    nav a{
       float:left;
       color:#fff;
       text-decoration: none;
       text-shadow: 0px 1px 0px #908c8c;
       padding:5px 10px;
       transition: all 0.2s ease-in-out;
    }
    nav a:hover , nav a:focus{
       color:#fff;
       opacity: 0.75 ;
       text-shadow:0 1px 0 #ff3737,0 2px 0 #fc2dd4,0 3px 0 #9b37ff,0 4px 0 #37c9ff,0 5px 0 #1ab78f,0 5px 0 #1eeb47,0 6px 0       #9ce812, 0 6px 1px #6d6d6d ; 
    }

Notice the text-shadow property , this is where all the magic happens . What we are implementing here are solid multiple layers of text using the text-shadow property to give it a three dimensional effect .
I have written the text-shadow property all together , for making it short and sweet , but it can also be written in this way .
The text-shadow mainly three parts  , the x-y-z coordinates , and then the color of the shadow.

      text-shadow:0 1px 0 #ff3737 ;
      text-shadow:0 2px 0 #fc2dd4 ;
      text-shadow:0 3px 0 #9b37ff ;
      text-shadow:0 4px 0 #37c9ff ;
      text-shadow:0 5px 0 #1ab78f ;
      text-shadow:0 5px 0 #1eeb47 ;
      text-shadow:0 6px 0 #9ce812 ;
      text-shadow:0 6px 1px #6d6d6d ;

The final result would sum up to this , although it would be much better if you'd use HelveticaNeue instead of Arial Rounded .

Multiplying the text-shadow property

Demo

Source Files

Love it ? Grab the code below . We loved the shiny new Atom editor by Github , so here's a rebound built with pure CSS , with over twenty text-shadow elements , it came to look like this.

Stariting with the html  it's pretty basic, an <h1> tag inside a <div> id .

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="atom-main.css"/>
</head>
    <body>
        <div id="Main">
            <h1>Atom</h1>    
        </div>
        </body>
</html>

Big . Big . Big , Now it looks cool

See the multiple shadows . A couple of text-shaodows could gives a subtle look to he typgraphy . It would look much better if there were a grunge type of background .

Using the text-shadow property:
The formal syntax for the text-shadow is

text-shadow: [x-offset][y-offset][z-offset] color;

The x-offset is your x coordinate , y-offset for y-coordinate and the z-offset is for blur ( This is the moment when you say WTF?htmlcss ) .
Now let's begin coding the stylesheet . We are going to add opacity to the text so as to mix the text a bit with the background . For this, we'll use the opacity property .

 opacity: [value] ;

The value ranges forom 0 to 1 , where 0 is for more transparency and to 1 is for more opaque .

We are setting it to 0.6 .
Next comes a huge list of text-shadow properties .

 text-shadow:

        /* 3D text shadow */

        0.5px 0.5px 0.5px #747474,
         1px 1px 0.5px #747474,
         1.5px 1.5px 0.5px #747474,
         2px 2px 0.5px #747474,
         2.5px 2.5px 0.5px #747474,
         3px 3px 0.5px #747474,
         3.5px 3.5px 0.5px #747474,
         4px 4px 0.5px #747474,
         4.5px 4.5px 0.5px #747474,
         5px 5px 0.5px #747474,
         5.5px 5.5px 0.5px #747474,

        /* Light shadow */

        -0.5px -0.5px 0.5px #aaa,
         -1px -1px 0.5px #aaa,
         -1.5px -1.5px 0.5px #aaa,
         -2px -2px 0.5px #aaa,
         -2.5px -2.5px 0.5px #aaa,
         -3px -3px 0.5px #aaa,

        /* highlights*/

        3px 6px 0.2px #8c9140,
        3.5px 6.5px 0.2px #868d39,
        2px 8px 0.5px #acb442,
        2px 8.5px 0px #acb442,
        5px -3px 0.3px #8f9636

        ;

}

That's just it . Now mess around with it .

CSS

html{
    background-color:#9ba236;
}
body{
}
#Main{
    margin:0 auto;
}
h1{
    opacity:0.6;
    font-size: 90px;
    font-family:Montserrat;
    color:white;
    text-shadow:
         0.5px 0.5px 0.5px #747474,
         1px 1px 0.5px #747474,
         1.5px 1.5px 0.5px #747474,
         2px 2px 0.5px #747474,
         2.5px 2.5px 0.5px #747474,
         3px 3px 0.5px #747474,
         3.5px 3.5px 0.5px #747474,
         4px 4px 0.5px #747474,
         4.5px 4.5px 0.5px #747474,
         5px 5px 0.5px #747474,
         5.5px 5.5px 0.5px #747474,
        -0.5px -0.5px 0.5px #aaa,
         -1px -1px 0.5px #aaa,
         -1.5px -1.5px 0.5px #aaa,
         -2px -2px 0.5px #aaa,
         -2.5px -2.5px 0.5px #aaa,
         -3px -3px 0.5px #aaa,
        3px 6px 0.2px #8c9140,
        3.5px 6.5px 0.2px #868d39,
        2px 8px 0.5px #acb442,
        2px 8.5px 0px #acb442,
        5px -3px 0.3px #8f9636
        ;
}