#012: CSSing the Header / Logo

(Updated on )

So far the actual web site doesn’t look much at all like our Photoshop design. In this screencast we dig into doing just that, starting at the top with our header and logo area. It feels good to have a bit of a “real” start on building the site visually.

We use Frank DeLoupe as a color picker, which is nicely integrated with Photoshop (it makes the color you pick the active color in Photoshop, as well as copied to your clipboard).

At one point we change the Sass/Compass config to compile the CSS as :expanded instead of :compressed to see the actual CSS being generated for debugging reasons.

We have to use our brains a bit regarding how things will be placed and react to the fluid nature of a browser window. For instance, the log should always touch the upper left corner.

We do an awful lot of nudging around values to get things just right, as well as adding little details here and there to make things look better, like adding slight shadows to the paper stack effect.