Free up your time and revolutionize your design with simple web development.

Forget About Photoshop: Five CSS Hacks to Help You Stop Using Images

Posted: July 17th, 2009 | Author: Kurt | Filed under: Web Design | 35 Comments »

Image about why CSS Hacks are so helpful for web designers

When you are laying out a new design for a web site, the last thing you generally want to do is create a ton of images for the layout. You might make a rounded corner or shadowed text in Photoshop, but that is wasted time if the client doesn’t like it or the website doesn’t turn out as expected. Therefore, here’s a list of some of the different CSS hacks you can use to get around using images.

Not all of these CSS tips and tricks will work in every browser. As always, it’s important to test them throughly across browsers and operating systems before you incorporate them into your design. Many of these effects rely on CSS2 selectors (such as the :before tricks below) or Webkit, and you can get a whole slew of new ideas by looking at these effects. If you couple this with a Javascript animation library like Scriptaculous, you can create some nice graphics without a single image. Remember, though, these languages and frameworks have a tendency to change really quickly, so it may be helpful to subscribe to the free Cherrysave feed to keep up with the latest details.

Five CSS Hacks to Avoid Images

1. Create CSS Drop Shadows and Disabled Text

Here’s an easy one to start with. You can avoid using Photoshop to add shadows to text by using the text-shadow declaration. If you want to make text look like it is disabled, you can add a gray title to white text.

/* Make Text with a Drop Shadow */
.text-shadow { text-shadow: #AAA 7px 7px 4px; }

/* Create Disabled Text */
.disabled-text { background-color: #EAEAEA; text-shadow: #FFFFFF 1px; color:#BBBBBB; }

Text with a gray shadow

Disabled Text

2. Amazing Pull Quotes with CSS

.pullquote {
width:550px;
line-height:1.5;
font-size:1.2em;
text-align:justify;
}

.pullquote:before {
content:"\201C" attr(title) "\201D";
font-family: "Times New Roman", Times, serif;
font-size:2.2em;
text-align:center;
background:#333;
color:#fff;
display:block;
float:left;
width:7em;
margin: 0.25em 1em 0.5em 0;
padding:1em;
}

<p class='pullquote' title="This is a really important quote."></p>

3. Tabs Without Images

Actually, you don’t need an image manipulation program to create a tabbed navigation bar. Here’s a simple one you can restyle and expand to meet your design ideas. For more, check out some of the tabs on this site.

.tab { padding: 0; margin: 0; display: inline; border-bottom: 1px solid #ccc; }
.tab li { padding: 5px 5px 0px 5px; margin-right: 15px; text-align: center; width: 50px; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; display: inline; border-bottom: 1px solid #fff; }

<ul class="tab">
<li>Link 1</li>
<li>Link 2</li>
</ul>

4. Completely Text-based Rounded Corners

This CSS trick only works for Firefox and Safari, but it’s an incredibly easy way to make rounded corners with almost zero work. And who knows, it could convince visitors and clients to escape the clutches of Internet Explorer.

#box {
     background: #eee;
     border: 1px solid #ccc;
     padding: 15px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
}
Pretty neat, huh?

5. CSS Drop Cap

p.dropcap:first-letter {
font-size : 3em;
font-weight : bold;
float : left;
width : 1em;
color : red;
}

Here is a really nice dropcap.

So, how do you use CSS to avoid the need for images? What are some of the CSS hacks you use on your site? Let me know in the comments.


35 Comments on “Forget About Photoshop: Five CSS Hacks to Help You Stop Using Images”

  1. 1 Forget About Photoshop: 5 CSS Hacks to Help You Stop Using Images - Cherrysave « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit said at 2:43 pm on July 19th, 2009:

    [...] Forget About Photoshop: 5 CSS Hacks to Help You Stop Using Images – Cherrysavecherrysave.com [...]

  2. 2 Ron F. said at 3:03 pm on July 19th, 2009:

    In regards to the “rounded corners” trick given – the sad fact is: if it doesn’t work in Internet Explorer, then it doesn’t work at all.

    I am sorry to have to bring that up.

    -Ron

  3. 3 podgorniy said at 5:49 pm on July 19th, 2009:

    With ourdays browser statistics, you may use 1(drop shadows),2(ie7 and lower doesn’t understand “:before”), 4(rounded corners) in cases of graceful degradation. Anyway it’s future, you won’t loose.
    Nice article, thanks. You also may add box-shadow.

  4. 4 CSS Brigit | Forget About Photoshop: Five CSS Hacks to Help You Stop Using Images said at 7:01 pm on July 19th, 2009:

    Forget About Photoshop: Five CSS Hacks to Help You Stop Using Images…

    When you are laying out a new design for a web site, the last thing you generally want to do is create a ton of images for the layout. Therefore, here's a list of some of the different CSS hacks you can use to get around using images.

  5. 5 Nokadota said at 8:52 pm on July 19th, 2009:

    This was a very informative post. I like to use Opera and it doesn’t yet support rounded corners via CSS yet.

  6. 6 Sérgio Soares said at 9:45 pm on July 19th, 2009:

    Good tips
    CSS 3 rocks :)

  7. 7 Sunny Singh said at 10:26 pm on July 19th, 2009:

    In reply to Ron F, why not use something that just doesn’t work in IE? You can have nice features for those who have a better browser and support it, and let it downgrade nicely to worser browsers like IE. It’s really the way to push things forward, and many people are using border-radius and text-shadow a lot now.

    I use most of these techniques except :before or :first-child stuff. With sprites you can achive a lot without sacrificing for load times. So for something like a layout, a nice design should be achieved with images but optimized with sprites.

  8. 8 ricardo kaka said at 12:15 am on July 20th, 2009:

    Its not a zero sum game.
    You can use a combination of CSS and GIMPed pictures.

    Why would you limit yourself other than lack of knowledge or artistic talent?
    i can teach someone CSS in one hour.
    Teaching them Photoshop takes a lot more and having an eye for colour, details, lines takes a lot more time. Lots of people know how to use Photoshop…. not many do it well.

    Only thing worse than a site done by a beginner in Photoshop is the ugly, drab and plain sites that we see nowadays.

    A restaurant, a band, a lawyers firm and a sports blog all have different needs yet people seem to think its One way or The Highway.

    Its not.

    Use all tools at your disposal and use the right ones for the right job.

    And please enough with the rounded corners. Its done its time. Any longer and its gonna be the Blink tag of the 21st century.

  9. 9 Jakub Adamus said at 2:05 am on July 20th, 2009:

    “This CSS trick only works for Firefox and Safari”
    It works in Chrome too. :)

  10. 10 Revital said at 3:41 am on July 20th, 2009:

    Very useful tricks. Thanks.

    P.S. Death to IE6! :P

  11. 11 Mark S said at 3:48 am on July 20th, 2009:

    @Ron F.

    “You are using a non-standards compliant browser. Some of the more modern features of this website may not display properly.”

    You may be interested to know that the rest of the world is leaving those stuck on Microsoft behind. Microsoft is now playing catch up, having deliberately languished for years and years.

  12. 12 Tomer Cohen said at 4:25 am on July 20th, 2009:

    You have some typos in your article. For example, the drop-shadow for .disabled-text will never work as it miss two parameters required for the text-shadow effect.

    It should be –
    text-shadow: #FFF 1px 1px 1px;

    The last example won’t word as well, as I afraid you don’t have the corresponded css code on the page.

  13. 13 Thom said at 7:40 am on July 20th, 2009:

    I just checked your article under Firefox 3.5 (both windows and linux) and Chrome on windows. Neither dropcaps nor pullquote worked. Also note that I had to disable no-script for your site.

  14. 14 Shawn said at 7:49 am on July 20th, 2009:

    If you use Firefox, all your graphics can be in SVG. More than that, you can use Javascript to change the graphics on the fly.

  15. 15 anonymous said at 8:45 am on July 20th, 2009:

    It works with Galeon too.

  16. 16 Raymond Selda said at 9:47 am on July 20th, 2009:

    Awesome hacks you got here. It’s just a matter of time before IE6 disappears! hahaha. Thanks for this one. Love your layout!

  17. 17 tonny said at 12:23 pm on July 20th, 2009:

    @ricardo kaka:
    really?! You CAN TEACH css in ONE HOUR!
    WoW..
    Please, don’t take anything in your POV. CSS’s not that simple, more so for beginner ;)

  18. 18 Ezrad Lionel said at 3:05 pm on July 20th, 2009:

    CSS3 HTML5 JS2 i can’t wait

  19. 19 maggielindia said at 2:09 am on July 21st, 2009:

    Hot cougars? Sensual milfs?
    “Cougar Central”? “San Carlos” ? or “San Francisco”?
    *** Agelover. c o m *** is the real place that is packed with them.

  20. 20 29 fresh links, I like them a lot =) « Adrian Zyzik’s Weblog said at 6:06 am on July 21st, 2009:

    [...] Top 20 Digital Artists in Europe – Psdtuts+ The Power of HTML 5 and CSS 3 Perishable Press Forget About Photoshop: 5 CSS Hacks to Help You Stop Using Images – 27062201.jpg (JPEG Image, 1476×1101 pixels) In the Woods – 25 Essential Web Services for [...]

  21. 21 Jasmin Halkić said at 6:40 am on July 21st, 2009:

    Nice.

  22. 22 6 Webkit Tricks to Easily Create Stunning iPhone Web Designs - Cherrysave said at 12:42 pm on July 21st, 2009:

    [...] Forget About Photoshop: Five CSS Hacks to Help You Stop Using Images [...]

  23. 23 links for 2009-07-21 « My place said at 1:04 am on July 22nd, 2009:

    [...] Forget About Photoshop: 5 CSS Hacks to Help You Stop Using Images – Cherrysave Five CSS Hacks to Avoid Images (tags: html web design css hacks images) [...]

  24. 24 JNevill said at 9:53 am on July 22nd, 2009:

    Great advice to the developer community. For non e-commerce/customer-service sites I agree with the comments that suggest one should leave non-compliant browsers (i.e. ie) behind. Unfortunately, for those of us developing for e-commerce, this simply isn’t an option. If a potential customer finds the site but is riding the old gray mare that is ie6, we have to be prepared to serve something other than scraps.

  25. 25 Unique CSS Tips and Techniques « Goodtravel Design’s Blog said at 12:27 am on July 24th, 2009:

    [...] CSS Tips and Tricks Five CSS Hacks to Help You Stop Using Images 20 CSS Short Hands You’ll Love 20+ Resources and Tutorials for Creative Forms using CSS 20+ [...]

  26. 26 Destillat KW30-2009 | duetsch.info - GNU/Linux, Open Source, Softwareentwicklung, Selbstmanagement, Vim ... said at 4:00 am on July 24th, 2009:

    [...] Forget About Photoshop: Five CSS Hacks to Help You Stop Using Images [...]

  27. 27 Monthly CSS Round-up @ Designussion said at 7:27 am on August 1st, 2009:

    [...] Forget About Photoshop: Five CSS Hacks to Help You Stop Using Images [...]

  28. 28 I Can Design Websites Faster Than You Can: Rapid Stylesheets with Blueprint CSS - Cherrysave said at 12:59 am on September 7th, 2009:

    [...] I Design Websites Faster Than You: Rapid Stylesheets with Blueprint CSS Sometimes, creating the original layout for a new web design can be the most tedious and time-consuming part of the process. Defining columns and rows and tables, while necessary, lacks the creative fun that things like logo design and color selection have, and it’s not too surprising to see developers try to skip around the process by reusing old templates. Yet, templates sometimes lack the flexibility required, and then developers are forced to waste time reinventing the wheel, especially when you are trying to design without dependency on images. [...]

  29. 29 Ghostly Compatibility: Cross Browser Transparancy with CSS - Cherrysave said at 6:26 pm on September 7th, 2009:

    [...] CSS3 allows for a full range of effects (I’ve written some tips for CSS3 web and iPhone development), including transparency, the new selectors aren’t always compatible [...]

  30. 30 kankaro said at 7:11 am on September 12th, 2009:

    the rounded corners on css coding will only function in Firefox and Safari browsers only.

  31. 31 Brainsick Patterns — No Code Relation » Blog Archive » Stop using images? said at 10:59 am on September 28th, 2009:

    [...] OK, this will NEVER be totally valid but here goes. 5 CSS “Hacks” to Help You Stop Using Images. [...]

  32. 32 Ghostly Compatibility: Cross Browser Transparancy with CSS « Versus lab’s said at 6:29 pm on December 10th, 2009:

    [...] CSS3 allows for a full range of effects (I’ve written some tips for CSS3 web and iPhone development), including transparency, the new selectors aren’t always compatible with [...]

  33. 33 Forget About Photoshop: 5 More Ways to Stop Using Images in Your Designs - Cherrysave said at 12:41 am on February 8th, 2010:

    [...] 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 [...]

  34. 34 Isa said at 8:15 am on February 8th, 2010:

    very useful info. thankx!

  35. 35 Kawika said at 2:32 am on February 9th, 2010:

    Can’t wait til IE6 disappears! BTW, I couldn’t see the pullquotes or drop caps in Chrome 4.0.


Leave a Reply