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

Image about why CSS Hacks are so helpful for web designers

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;
}

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.

Cherrysave