For the past decade of web design, we've painstakingly crafted images to serve as illustrated background and form to our content. With the advent of CSS3 in all modern browsers, this is rapidly becoming unnecessary. Follow me as we enter the Zero-Image Zone and see how layout can be achieved without any images at all for greater consistency, load speed and ease of testing and editing.
Box-Shadow
This CSS property is one of the modern web designer's most prolific tools, if you really like giving depth to your elements. Used sparingly, it can deliver great effects. However, a word of caution. The more you apply box-shadow in your layout, the harder a time mobile devices will have rendering it. This is because the browser actually draws a canvas dynamically behind the element, giving it the illusion of a shadow. This is normally fine on powerful desktop and laptop computers, but can be quite taxing on low-power mobile chipsets. Keep this in mind when you design your site.
The syntax is as follows:
box-shadow: (inset) (x-offset) (y-offset) (blur radius) (color);
For example:
box-shadow: 1px 1px 25px rgba(0,0,0,0.45);
Additionally, using blur radii higher than 100px can lead to serious lag and optimization issues. As browsers adopt GPU acceleration, this is becoming less of an issue, but for now, try to keep it at 100px or less, particularly if multiple elements on the page are using box-shadow.
To invoke this property at the moment, you'll have to include prefixes for Webkit and Mozilla, as adoption of the latest builds which support proper W3C Backgrounds and Borders syntax are not 100% yet. However, Opera and IE9 do support the proper syntax, so it's important to include it.
The full support rubric is as follows:
- Chrome 10+ box-shadow
- Chrome <= 10 -webkit-box-shadow
- Firefox 3.5 -moz-box-shadow
- Firefox 4 box-shadow
- Safari 3 - 5 -webkit-box-shadow
- Opera 10.5 box-shadow
- IE9 box-shadow
- IE5.5 - IE8 filter: progid:DXImageTransform.Microsoft.DropShadow();
For further details, see the W3C spec at: http://www.w3.org/TR/css3-background/#the-box-shadow.
Border-Radius
This CSS property is another core property, allowing for the rounded corners common in many modern designs that would normally require transparent .png trickery. Unlike box-shadow, this can be applied as often as required without worry of slowdown.
The syntax is as follows:
border-radius: [ <length> | <%> ];
For example:
border-radius: 10px;
However, there are also specific properties for the top left, top right, bottom left and bottom right corners of an element. These change depending on prefix and they are as follows:
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
- -moz-border-radius-topleft
- -moz-border-radius-topright
- -moz-border-radius-bottomleft
- -moz-border-radius-bottomright
- -webkit-border-top-left-radius
- -webkit-border-top-right-radius
- -webkit-border-bottom-left-radius
- -webkit-border-bottom-right-radius
For example:
border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
This can be especially useful for tabs and navigation menus.
The current support rubrik is as follows:
- Chrome 4+ border-radius
- Firefox 4 border-radius
- IE9 border-radius
- Opera 10.5 border-radius
- Chrome <= 4 -webkit-border-radius
- Firefox 3.5 -moz-border-radius
- Safari 3 - 5 -webkit-border-radius
- IE7 - IE8 N/A
For further details, see the W3C spec at: http://dev.w3.org/csswg/css3-background/#corners.
Gradients
Not quite a property by itself, gradients are an input for background-color and the background shorthand. This replaces pretty much 70% of what we need images for by itself, at least in my experience. Gradients add depth, subtlety and a more polished feel than solid colours can deliver.
They are also the most complex CSS property, with different approaches within each browser, with multiple ways of generating gradients, including linear and radial.
For starters, the basic syntax for a simple linear(top to bottom) gradient across the browsers:
- W3C Editor's Draft for CSS Image Values and Replaced Content Module Level 3
linear-gradient: (top, #ccc, #000);
- Older versions of Webkit (Safari 4+, Chrome 1+)
-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
- Newer versions of Webkit (Safari 5.1+, Chrome 10+)
-webkit-linear-gradient(#ccc, #000);
- Firefox 3.6+
-moz-linear-gradient(top, #ccc, #000);
- Opera 11.10+
-o-linear-gradient(#ccc, #000);
- IE7-IE9
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
Here's an example:
-webkit-linear-gradient(#ccc, #000);
Those were the simplest gradients. From there, you can apply colour stops by adding percentages to the colours, change up the direction of the gradient by giving it an angle in degrees (240deg), create a repeating gradient by appending repeating in front of linear-gradient or even make a radial gradient by changing linear-gradient to radial-gradient.
Radial-gradient has even more syntax, with the size and shape properties. Shape can be either circle or ellipse. Size can be farthest side, where the gradient starts on the side furthest from the centre. It can also be closest-side, closest-corner and farthest-corner.
For further details, see the W3C spec at http://dev.w3.org/csswg/css3-images/#gradients.
So there you have it. Three excellent properties that reduce dependence on image creation substantially. I hope this was enlightening, and showed how we can use emerging web standards to make our jobs more efficient and more productive.