Shorts

  1. Monday, 11th April, '11

    The Mantia Effect

    I got linked to this great repository of wallpapers, but what caught my attention was the “Mantia” logo at the top. Click around on a few swatches and see how it changes. Or if you’re lazy, here’s a more obvious version.

    Here’s the image he uses for the navigation bar:

    There’s some creative transparency at play here. And then using absolute positioning, overlays it on top of the featured wallpaper, while the markup keeps its logical hierarchy. Clean markup, clean CSS.

    Very clever.

    References

    Mantia
    Mantia’s Blog—Some interesting things scattered around.

    1

    1. I’ve always thought of coming up with a way of having text that is a sort of mask over the background image; all in the grand scheme of context specific design. Of course, this should be a part of CSS, but I don’t think we will get it any time soon.

      On the other hand, this is a clean way of getting that done for logotypes. Don’t be surprised if you see this used in any of my future projects. ↩

    2. ← / →
 
  
  Archive   Colophon