For what are three headers useful?

We are asked this question more often. One reason is that you always connect an image to a header. You have to get rid of the fact that an area must always have a content. Sometimes it is even better to use empty and completely transparent headers. The new design "Polydeuces" has been specially designed to show you what three headers can be used for and it looks really good.

The design is structured as follows

We use structure 3 or 4 for this design, if you don't need a sidebar, use 4 otherwise 3. This structure enables so-called stripes, i.e. areas that lie below the normal areas and are displayed to the left and right across the entire browser.

 

Since we wanted the navigation to float freely above the background and have a distance to the top, we switched on header area 1 and made it completely transparent (no image, no background color, no line, no effect). With the height of the header we determine the distance that the navigation upwards has.

 

It is important that the strip next to the header is also made completely transparent, i.e. invisible.

 

Then we placed the navigation under the header area 1. We have also made the navigation area transparent by adding a slightly transparent color, lines and a shadow to the strip under the navigation. You can specify a distance to the bottom of the navigation area. Unfortunately, this results in the line at the bottom and the shadow also being moved downwards.

  

Therefore we simply switched on the second header area and made it also transparent. We have also adjusted the height of the strip next to the header area 2 according to our wishes. A thin line under header 2 rounds the whole thing off.

 

We have highlighted the content with white and made it slightly transparent. We have also added a shadow that gives the impression that the content area is "stamped in". The striped area next to the content is also highlighted in white but made more transparent. The problem now is that the content is directly adjacent to header area 2. We can set the distance downwards at header area 2 and the content will "slide" deeper. However, this distance is completely transparent and cannot be designed. But we wanted to give the impression that the outside area has an upward effect in addition to the content. Therefore we switched on the third header area and made the header itself transparent and adjusted the strip outside exactly like the strip next to the content. Perfect. What you can't see in the screenshot. In the footer area we have also used several footers to achieve such an effect downwards.

 

In the picture above the three headers are marked. I hope this little explanation will help you to realize interesting effects yourself. Have fun with that.