Visual effects with CSS styles

I often say that I am not a graphic designer. When I build a theme, I always encounter technical constraints such as « how to do a gradient », or « how to obtain a 3D aspect ». When designing the current theme, I found some workarounds for this lack of « graphic » by using only CSS.

The following tips get a render a little less flat, and avoid also loading files more or less heavy.

For this theme, I used two techniques:

  • Rounded corners: unfortunately not visible in Internet Explorer,
  • Adding dark and light lines between different color areas.

In CSS, rounded corners were available only to Firefox’s users (and browsers using the same rendering engine).

Rounded corners
Rounded corners

Standard CSS 3 would change things:

div # header-menu {
-Moz-border-radius: 5px;
-Webkit-border-radius: 5px;
}

To summarize: the first line is used by the rendering engine of Firefox, and the second by browsers already « CSS 3 ready ». Other effects are or will be available, such as shadow for example.

The other technique used is well known by designers. We accentuate the contrast at the edges of color areas.

We can take an example with this site: the header is composed of three blocks of different colors.

Adding borders
Adding borders

On the left, I took colors near than those used by the theme Titan. In the middle, I changed the colors to something more neutral. On the right, I added two lines, a darker one on the edge of the upper block, and a lighter just below the first.

Details of adding borders
Details of adding borders

The optical effect is not huge, but it is enough to change the look of the header.

Conclusion

It is fully possible to get some visual effects, with only the use of CSS. These techniques also allow to decrease the weight of pages.

The new/future CSS 3 standard should generalize this way of work, and reduce the number of images used today in themes.

Some links