-
CSS Image Replacement
System fonts can look ugly, and appear rigid. Using CSS you can replace text with a beautifully formed anti aliased image, yet still have all the accessibility and SEO benefits of text headings.
Inline:
<h1>Hello World</h1>
CSS:
h1 {
display:block;
width:100px;
height:0;
padding:30px 0 0 0;
background-image:url(”heading.gif”);
overflow:hidden;
}
The first image is a system font in the browser, see the edges of the “S” are rigid. The second is the same font as an image, the third is a non system font with a shadow, because you can use any font and apply effects to them when using Image Replacement.
-
Rounded Corners Without Using Images
To create CSS objects that have rounded edges without using images you can use the following technique:
Inline:
<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>
<!–content goes here –>
<b class=”rbottom”>
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>CSS:
.rtop, .rbottom {
display:block
}
.rtop *, .rbottom * {
display: block; height: 1px; overflow: hidden
}
.r1 {
margin: 0 5px
}
.r2 {
margin: 0 3px
}
.r3 {margin: 0 2px
}
.r4 {margin: 0 1px; height: 2px
} -
RSS Feed Icon Without Using an Image
With the increasing importance of RSS, finding crafty ways to display an icon is a useful skill. This method displays a tidy RSS icon without using an image.
Inline:
<a href=”http://pingable.org/feed/” class=”feed”>FEED</a>
CSS:
.feed { border:1px solid;
border-color:#FC9 #630 #330 #F96;
padding:0 3px;
font:bold 10px verdana,sans-serif;
color:#FFF;
background:#F60;
text-decoration:none;
margin:4px;
} -
Size Fonts Without Using Pixel Units
It is important to size text using a method that is not absolute, so it can be enlarged for better visibility in a browser.
CSS:
body {
font-size: 80%
}p {
font-size: 1.1em;
line-height: 1.2em;
} -
Using Images For Bullets
An easy method to create list with images as your bullet points:
Inline:
<div id=”navcontainer”>
<ul id=”navlist”>
<li id=”active”><a href=”#” id=”current”>Item one</a></li>
<li><a href=”#”>Item two</a></li>
<li><a href=”#”>Item three</a></li>
<li><a href=”#”>Item four</a></li>
<li><a href=”#”>Item five</a></li>
</ul>
</div>CSS:
#navlist {
list-style-image: url(images/arrow.gif);
15 Responses to “5 Simple CSS Tricks”
- Pingable.org - 5 Simple CSS Tricks
- roScripts - Webmaster resources and websites
- Best of Pingable 2007 : New Internet Media from Pingable.org
- Links for 04-07-2008 | Velcro City Tourist Board
Leave a Reply
This is a great post for a new web site owner. Web design is something that I want to work on in the near future. A few simple tips like these really help to sift through all the jargon.
great list - I will be using these on some upcoming websites.
Great that you guys found these useful! Thanks for stopping by.
I’m still a beginner when it comes to programming and stuff like that..^^..thanks for posting these tips..it’s a great help.
How about some images to go with the explanations? I simply don’t get your first tip at all.
Cheers!
@ Craig, I have added an image to clear up the first example. For the other examples you will have to follow the links.
great tips thanks! will be using them
It seems that when ever someone writes a negitive review for this article on StumbleUpon I get a whole flood of new traffic to the blog from it! Weird, I guess I am grateful for the flamers. Pushing 16,000 page views, almost all from SU.
Trying to learn all the tricks I can….and this sure helps! THANKS!
Those tips are cool but the one thing that just can’t figure out with css is how to center the div tags. Now i know i could just put around them, and it works perfectly with Firefox, but for some insane reason, it doesn’t work with IE. It’s been driving me crazy and i tried searching on Google countless times but i couldn’t find any help. My site would look more “professional” if could could figure out how to center it.
A few weeks ago after i read this post i started checking out some other css websites. And by far, the best css website is css-tricks dot com. This site have tons of tutorials and anyone who is interested in learning css should definitely check this website out.