Forget About Photoshop: Five CSS Hacks to Help You Stop Using Images
Posted: July 17th, 2009 | Author: Kurt | Filed under: Web Design | 35 Comments »
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;
}
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.
[...] Forget About Photoshop: 5 CSS Hacks to Help You Stop Using Images – Cherrysavecherrysave.com [...]
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
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.
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.
…
This was a very informative post. I like to use Opera and it doesn’t yet support rounded corners via CSS yet.
Good tips
CSS 3 rocks
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.
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.
“This CSS trick only works for Firefox and Safari”
It works in Chrome too.
Very useful tricks. Thanks.
P.S. Death to IE6!
@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.
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.
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.
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.
It works with Galeon too.
Awesome hacks you got here. It’s just a matter of time before IE6 disappears! hahaha. Thanks for this one. Love your layout!
@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
CSS3 HTML5 JS2 i can’t wait
Hot cougars? Sensual milfs?
“Cougar Central”? “San Carlos” ? or “San Francisco”?
*** Agelover. c o m *** is the real place that is packed with them.
[...] 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 [...]
Nice.
[...] Forget About Photoshop: Five CSS Hacks to Help You Stop Using Images [...]
[...] 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) [...]
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.
[...] 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+ [...]
[...] Forget About Photoshop: Five CSS Hacks to Help You Stop Using Images [...]
[...] Forget About Photoshop: Five CSS Hacks to Help You Stop Using Images [...]
[...] 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. [...]
[...] 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 [...]
the rounded corners on css coding will only function in Firefox and Safari browsers only.
[...] OK, this will NEVER be totally valid but here goes. 5 CSS “Hacks” to Help You Stop Using Images. [...]
[...] 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 [...]
[...] 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 [...]
very useful info. thankx!
Can’t wait til IE6 disappears! BTW, I couldn’t see the pullquotes or drop caps in Chrome 4.0.