May 20, 2012

CSS gradients and background images

Color gradients are frequently used on web pages so let's go through the basics.

The two CSS features we will use here are regular background images and CSS gradients. Background images are pretty reliable but some surfers might turn off images to save on bandwidth (due to cost or slow connection) and CSS gradients are only supported by newer web browsers so we need a fallback solution in both cases, background-color.

We will use a two-color, vertical gradient. With background images, the fallback background-color should match the top or the bottom of the gradient image so that if the image doesn't cover its element we will get a smooth transition. Pick the top or bottom color (and adjust background-position accordingly) so that you get the best contrast between text and background-color.

Continue reading →

May 12, 2012

How to organize CSS declarations

As you develop your website you might find that some of your CSS selectors will contain so a lot of declarations. So when you need to adjust your padding it can take multiple seconds to spot your padding declaration inside a selector with 20-30 declarations. Sure, you can search, but that takes more operations and keystrokes (position marker at selector, type search command (ctrl-f), type first few letters of declaration, press enter) and shouldn't really be necessary.

Continue reading →

May 7, 2012

Multiple columns with CSS

A setup I like for multiple column layout is to float each column to the left and use margin-right to create space between the columns. And then set margin right on the last two to zero and float the last one to the right. This technique leaves an area of absolutely nothing (not even margin or padding) between the two last columns so it takes more than a minor calculation error to make your layout fall apart. The same code can also be used for multi column grids, f.ex. displaying 12 products in a 4*3 grid.

The CSS code needed for this is conceptually as follows.

Continue reading →