Blog Navigation
You are here: Blog Home / Bottom Header Shadows

Bottom Header Shadows

Posted By Fabio

Sometimes details mark the difference between boring and exciting, in web design. With just a little piece of graphics and few lines of css code applied to the most prominent element of a web page, the header, we can add that special touch which makes our website a pleasant experience for the eyes and yet it keeps it essential, light-weight and simple. The header is the most used part of a website and also the first one to grab a visitor attention and that's why i always start developing a website with the header design in mind, first. Here i am going to show you how to add a beautiful, dynamic 3d shadow effect to your headers and i am also going to give you five different shadow pattern images. This type of effect works very well on full-screen headers, while it is not recommended on windowed layouts, since it only takes care of adding a shadow effect to the bottom of the header. Let's start from the images. Here you can see how the 5 different shadows that we have packed for you look on our website's header:

Shadow #1

Shadow #2

Shadow #3

Shadow #4

Shadow #5

After having uploaded your own shadow image/s (or those that we have prepared for you) on your server, you need to tell the browser that you want to apply one to your header. In order to do this, you simply must add a div element right under the header container like this (the div that needs to be added is in red):

<div class="This Is Your Header Container"></div>
<div class="shadow v4"></div>

As you see, we have added two classes to our shadow div: the shadow class and the v4 class. The shadow class takes care of the div positioning, dimensions and background properties, while the v4 class indicates which shadow we want to use: in this case we are using the Shadow #4 image (see above); if you wanted to use a different shadow effect, you would simply replace v4 with v1 or whatever else you want to use. Now let's take a look at the css needed for our classes and let's start with the shadow class:

.shadow {
position: absolute;
background-repeat: no-repeat;
width: 100%;
height: 35px;
z-index: 999;
margin-top: -1px;
left: 0;
}

We want our shadow div container absolutely positioned, so that it follows the header behavior at any screen size; the margin-top: -1px; bleeds the top of the shadow into the bottom of the header; the z-index: 999; is there to ensure that the shadow stays on top of anything else underneath it; all the other dimension parameters should be self-explanatory. Finally, we add the CSS for the type of shadow that we want to use:

.shadow.v4 {
background-image: url('PathToImage/head-shadow-4.png');
background-position: left top;
}

The background image (our shadow) needs to be positioned on the left horizontally and on top vertically so that it is going to look like a natural extension of the header bottom. Create or use as many shadows as you want on your pages: just create a v# class and its related css code for each shadow and add to each shadow div the one you want to use.

And that's it! Now you and your users can enjoy your website's brand new header with 3d shadow effect. Download the five preset shadow images here (right click and save).

That Extra Tip
To serve different shadows dynamically at random, any time that your page is loaded, add the following piece of javascript to the bottom of your page, right before the end of your </body> tag, making sure that the shadow div only has the shadow class on it:
<script type="text/javascript">
$(document).ready(function () {
shadowTot = 5;
rndNumber = Math.round(Math.random() * (shadowTot - 1)) + 1;
$('.shadow').addClass('v' + rndNumber);
});
</script>

All Articles