Paradox Designs

With modern CSS properties like gradient, border-radius, and box-shadow, you don’t need images to make a compelling and beautiful website. While you may argue that none of these properties are supported in IE, some actually are (more on this in a bit), and, as for a beautiful web said, Keep calm and carry on (with HTML5)

Why not to use images

There are many reasons not to use images when designing your site. First and foremost, there is the matter of speed. Each image the user has to fetch from the server is an added load, and slows down your site. While there exist methods to reduce this speed loss, such as sprites, gzipping, CDNs, the file still has to be downloaded, and that takes time.

The rendering engine can do it for you

The rendering engine in a modern browser, such as Webkit((Chrome, Safari, iPhone, Android, and most other mobile devices)) and Gecko((Firefox)), is an incredibly powerful graphics engine. Modern versions have the ability to generate some images, such as gradients, and other effects, on the fly. Since they are generated by the rendering engine, they do not have to be downloaded, and thus, the site loads faster (in most cases).

While some websites, like DeviantArt, have relied on server-side scripts to make their images¹, this is cumbersome, and still doesn’t solve the problem of image downloads. You also suffer the chance that your script may break when you update your server.

Its easier to update

Lets say you have a site with tons of gradients. If you want to update each of these gradients to be a bit darker, you have to open each image in Photoshop, or Illustrator, or your editor of choice, change some settings, save it, upload it again, and then do a cache reset (assuming you enabled caching). That is an awful lot of work, to just change some images. If you find you don’t like the change, you have to do all that again.

With CSS gradients, however, all you have to do is edit your CSS. You can update the gradients like you can any other CSS property, and, pending a cache reset, have them instantly appear.

Its Scalable and vector

Using pre-rendered images suffers one more critical flaw. If you want to change the size of your site elements, you need specific sized images. Again, this increases load time, and creates more things for you to update. With CSS, you can use the same class on elements of any size. Lets say you make the class grey-gradient. You can apply this class to elements of any size, and the gradients will scale properly.

There do exist image technologies that can do this (like SVG), but they have even less support than CSS visual properties.

How to use them

These properties, while they may appear confusing initially, are actually quite simple, and quite powerful. Play around with them, there is no shame in learning.

Gradients

Gradients are perhaps the newest player on the field, and the most exciting. Gradients appear EVERYWHERE on the web, countless sites use them, and they really add pop. Even if your gradient is a vary faint change, it can make an element pop far more than a flat color, in the same manner as a small amount of noise can.

Each browser has their own style of interpreting and rendering browsers, and as such, the playing field is more confusing than that of border-radius. I will only go into linear gradients, as radial gradients are far more confusing, beyond the scope of this article.

Webkit

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#000000));

Firefox

background: -moz-linear-gradient(top, #000000, #ffffff);

Internet explorer

This, surprisingly, works all the way back to 6, and possibly even earlier. While it doesn’t render quite as well as the others, it is still a gradient. However, you must specify a complete hex code, no #fff here

filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ffffff', startColorstr='#000000', gradientType='0');

Both Firefox and webkit let you specify color stops, directions, and many other things about each gradient. Both browsers have features that are unique to each, and there is no clear standard on gradients yet.

You should put all 3 of these properties in your CSS, stacked on top of each other. You should also specify one background that has a solid color, for degradation on browsers that do not support gradients, such as Opera.

This is only scratching the surface on what gradients can do.

Box Shadows

Box shadows, often called drop shadows, have gotten a bad rap as of late. Overruse and abuse by Photoshop newbies has caused many designers to cast them aside, much like poor tables.

But drop shadows can be your friend. This site makes extensive use of them, yet, they don’t look like your traditional drop shadows. Here, they are used to give the illusion of being set in to the page. Notice how the code boxes, the search box, and the buttons, all appear to be carved into the site? Thats through the use of a few drop shadows.

Here is the box shadow code:

-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,.2);  /*Webkit*/
-moz-box-shadow: 0px 1px 1px rgba(255,255,255,.2); /*Firefox */

Notice that the height of the shadow is one, it has no blur, and is white with a low opacity. Instead of being the old clichéd shadow, this turns the idea of a shadow on its head. This code is what is used to make the emboss effect on the buttons on this site. The effect for the code boxes and search boxes is similar, just tweaked a bit.

You can use multiple shadows, but that is beyond the scope of this article.

Conclusion

CSS3 provides many powerful tools for making stylish websites, and if you use these tools right, you will never have to use photoshop or illustrator to make a simple gradient or box again. I hope that this article stirred your interest in making image-free designs.

1. DeviantArt uses a serverside script to render the shadows that appear around the site [↩]