header

Viewport units are things like 10vw (10% of the viewport width) or 2vh (2% of the viewport height). Useful sometimes, as they are always relative to the viewport. No cascading or influence by parent elements.

There is also vmin, which is the lesser of vw and vh, and vmax, which is the greater. These values can be used for anything that takes a length value, just like px or em or % or whatever.

Let's take a look at a tiny design pattern that makes use of vmin.

(more…)

Headers are an important factor in web design, they can either make or break a design. Since web 2.0, we have seen many design trends and one of the most groundbreaking is the big header. However, headers have remained boxy throughout.

Blueflavor, a mobile design website, has bucked this trend with something I have yet to see elsewhere and does not require great CSS skills to create.

As you can see they have the menu and start of the content pushed into the header. Now how do they do that?

You can either slice the image into seperate pieces and try and fit them with (floating) divs. However, This leads to possible problems with browser differences with IE 6, 7 and Firefox.

The best way is to keep the image whole. Blue Flavor uses two columns with the first column sitting under the longer part of the header. The content div sits under the shorter part of the header. Normally the content div would sit on the same level as the first column. To move it up into the gap of the image, use a negative margin which will shift it up. Blue Flavor uses margin-top: -20px.

Negative margins are not usually used but this is a simple way to change the look and feel of a header.