Forget About Photoshop: 5 More Ways to Stop Using Images in Your Designs

Images increase download time for end-users and workload for web designers, slowing down the time it takes to fully develop a concept for clients. Furthermore, images can add unneeded clutter and increase search-engine blindness, detracting from the principle of simple web design.

You don’t need images to create a deep and beautiful web design. Instead, you can use CSS, typography, and optical effects to do many of the same things and instead only use images when they are clearly needed. If you like these tips, you should check out the bonus tips for five more ways to stop using images in web design.

Before we get started, there is one potential downside to these techniques that needs to be mentioned. Because of the (awful) state of standards-compliant browsers, not all of these ideas will work (or look the same) in all browsers. Therefore, there may be times when you might opt to use an image instead when you want an element to be sure to render the same across all browsers. One way to test browser standards is via the Acid3 test. And, you can see how your design will look in a variety of different browsers with BrowserShots.

Sideways Text

I recently spoke of being creative with text to create typographic contrast. You can rotate text by 90 degrees in order to create a more dramatic appearance, all without resorting to an image. This trick relies on proprietary CSS attributes, so it probably will not be well supported outside of Webkit-, Mozilla-, and Microsoft based browsers.

To do it, add the following code snippet to your stylesheet:

.sideways {
     -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Then, add the style to the element in the usual method:

<h1 class="sideways">CSSrules</h1>

The output should look something like this:

Of course, you can rotate text in a variety of different directions and angles by changing the value of the attribute.

Create a Triangle

Believe it or not (and I wouldn’t, if I were you… ), you can create some basic shapes with CSS. Now, you won’t have to use images to include basic symbols within your templates. You can create a triangle by inserting this HTML in the spots where you want the triangle to go:

<div class="upper">
     <div class="inner"></div>
</div>

Now, use the following CSS classes to complete the effect:

.upper {
     position:absolute;
     left:150px; top:100px;
}

.upper div {
     border-left-color: transparent;
     border-style: solid;
}

.inner{
     border-width: 0 0 300px / 200px;
     border-bottom-color: #955;
}

You will get the following:

Automatically Zebra-Stripe a Table

Okay, so I know that this doesn’t quite qualify as a way to replace using images, but it’s such a nifty, simple trick that I couldn’t help but mention it. Using a single selector, you can automatically alternate the appearance of rows in a table. No more having to use PHP or Rails to dynamically insert an “odd” or “even” class to every other table row…

To do this, just start with a basic table. The key thing is to make sure that you wrap the main content of the table in the
tbody
tag. This will make it so that zebra-striping is not applied to the header rows. Here’s the table:

<table border="0">
	<tbody>
		<tr><td>One</td><td>and</td></tr>
		<tr><td>Two</td><td>and</td></tr>
		<tr><td>Three</td><td>and</td></tr>
		<tr><td>Four</td><td>end.</td></tr>
	</tbody>
</table>

And the magical, magical CSS snippet:

tbody tr:nth-child(odd) {
   background-color: #ccc;
}

And that will churn out (something) like this:

Drop Shadows or Glows

You can also avoid using images by using CSS to add a drop shadow or a glow to elements. The following code snippet will apply the shadow to a box element, which is useful for making something stand out on a page. Obviously, you’ll have to play with the effect a little bit to make sure that it doesn’t look too tacky.

.module {
  background-color: #cccccc;
  /* offset left, top, thickness, color with alpha */
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  /* IE */
  filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray');
  /* slightly different syntax for IE8 */
  -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')";
}

Of course, most of these commands are redundant in order to ensure that the browser renders it correctly. Oh, the joy of standards compliance… Here’s what the final effect looks like:

Gradients

Here’s a simple trick for gradients:

.gradient {
	background-image: -moz-linear-gradient(top, #aaaaaa, #dddddd);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#ddd));
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#aaaaaa,endColorstr=#dddddd);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#aaaaaa,endColorstr=#dddddd)";
}

And it looks like this:

Keep in touch with these updates by subscribing to the RSS feed or following me on Twitter.

Cherrysave