Forget About Photoshop: 5 More Ways to Stop Using Images in Your Designs
Posted: February 5th, 2010 | Author: Kurt | Filed under: Web Design | 29 Comments »
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.
[...] Forget About Photoshop: 5 More Ways to Stop Using Images in Your Designs – Cherrysave – [...]
Curious why you use an image in your document then, or is that just some really fancy css?
I love the gradient and shadow! Thanks for writing this!
Why use images to show the expected result of using CSS instead of images?
I find it ironic you propose less images to keep to ’simple’ web design but then go into using proprietary things. Frowny
hey, it all sounded nice to me. but after creating a little testcase (xhtml 1.0 trans, inline css) i couldn’t recommend this alternatives.
i tried the sideways, alternate tablerow and the gradient effects.
none of them worked on ie6 nor ie8.
sideways and tablerow worked in ff 3.5.6, gradient not.
opera 9: no gradient, no sideway, just tablerows.
chrome: no sideway, gradient and tablerow worked
safari same as chrome.
so, for me this is no alternative, cause the “major” browser dosen’t support all the effects.
Oh, give the kid a break! We all have lead-ins that could have been better to good articles. The lad’s presented some viable techniques here. Let’s give him a hand!
[...] Shared Forget About Photoshop: 5 More Ways to Stop Using Images in Your Designs. [...]
It will work in upcoming Opera 10.50, so no worries there.
realistically this is not practical,
they render totally different in different browser, some dont even work in IE8,
as much as everyone likes to slam IE, but if it dont work there, then best bet is to stick to images
this article lost all meaning, when I read the title, and then the first thing i see when i get to a page is an image….
pfft. thanks for treating us all like complete morons. we appreciate it.
dont you figure the demographic he is writing to is the one that uses IE7, IE8, maybe even Opera 9… FF3.0?
In order to communicate at all he is accurate in using images to express himself. He’s just trying to start a trend, and we can give him just that much respect. Maybe a little more if we all realized that Steve Jobs just called the innovation like this the “future”.
Most people that comment are really rude all the time. Don’t let it set you back Kurt.
Good weekend.
[...] via Forget About Photoshop: 5 More Ways to Stop Using Images in Your Designs – Cherrysave. [...]
Thank you. I find these techniques quite interesting. I didn’t know about the gradient thing. Maybe you could have mentioned rounded corners as well, although I’m not sure it works on IE.
Well, the title is “[...] Stop Using Images in Your Design” not “Stop Using Images”.
is it supported in IE?
Of course these don’t work in IE, why do people are even surprised or bothered by that any more? It’s obvious and well-known.
But in many (I daresay most) cases they can be used anyway. Sites don’t have to look the same in all browsers, eevn customers are starting to understand that.
To all the negative comments,
It is complacency with the lack (to varying degrees) of standards compliance that developers exude that empower Browser Vendors to not strictly follow them (Again, this is to varying degrees. My fingers pointed at Redmond.). Google’s move to drop IE6 support was ballsy and a good sign to vendors: their products are made to serve up websites, websites are not made to acquiesce to the desires of the vendor.
Anywho, thanks Kurt. These are great alternatives to images that will speed up page loads on some of the more…elaborate designs. It’s important to remember that a good part of the slow down on image heavy websites is not the size of the image itself but the fact that every image is a separate http request.
I disagree completely! I think images can be used in various ways to make a webpage look nice and smart without delaying the download time.
As mentioned previously by on of the commentator, the CSS codes you presented here is complex and will make the web developer’s job more complex than it already is.
On the other hand, I have seen some very useful articles in here and will keep coming back!
I like the tip about the zebra colours for tables. But I do wonder if a gradient image of 1k isn’t faster to load the a css gradient?
It’s a very catchy — but not exactly accurate title — to a very nice post that assembles a bunch of cool CSS effects in the newer and more compliant browsers. The zebra-stripe rows were new to me, thanks! That triangle: mysterious, and interesting.
To everyone complaining about the use of images in this post and the use of “proprietary” or “complex” CSS:
The CSS properties in the article are part of the new CSS version (CSS3), currently being worked to be released as a standard by the World Wide Web Consortium.
The properties are not a standard yet, hence the need to specify a “proprietary” prefix. Also, Internet Explorer does not support them yet (surprise surprise), but will have to sometime in the future.
The use of images in the post is totally understandable, as visitors might be using a browser that does not support CSS3. Not being able to see what CSS3 can do would defeat the purpose of the article, right?
Also, in defense of the use of CSS, instead of images, this is not just about speed. Being able to write one line of code to create rounded corners is far easier than opening Photoshop/Fireworks, creating the borders, exporting the image, and them embedding it in the CSS. The same for maintenance.
This is a great post. Nothing that hasn’t been posted before, but brave in proposing the end of images for layout. Well done.
Smart use of images, such as a 1px wide gradient or using CSS sprites, is a much better solution than using proprietary methods. End users expect websites to look and function the same in most modern browsers.
Anyhoe, this gives us just a nice start to work with. If a code is not supported in all browsers, you can experiment further with the code yourselves to make is cross browser. Just try and try a little more instead of just copying the code and complain it does not work…
he uses images so IE users can see its effect.
Great post, thanks! I liked the zebra-stripe table thing especially, and plan on using it at the next possible opportunity.
[...] Forget About Photoshop: 5 More Ways to Stop Using Images in Your Designs – Cherrysave – 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. [...]
[...] Forget About Photoshop: 5 More Ways to Stop Using Images in Your Designs - Cherrysave [...]