Most used CSS tricks

Earlier before I have written an article about current best CSS hacks which you can see here And now here’s the list of today’s most used CSS tricks – tips. I have added image examples for most of them because of critics on CSS hacks article. If you think I have missed any please let me know

1. Rounded corners without images

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

Rounded corners without images

2. Style your order list

 
<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>
 
ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
 
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

Style your order list

3. Tableless forms

 
<form>
<label for="name">Name</label>
<input id="name" name="name"><br>
<label for="address">Address</label>
<input id="address" name="address"><br>
<label for="city">City</label>
<input id="city" name="city"><br>
</form>
 
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
 
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
 
br {
clear: left;
}

CSS Tableless forms

4. Double blockquote

 
blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}

Double blockquote

5. Gradient text effect

 
<h1><span></span>CSS Gradient Text</h1>
 
h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
 
<!--[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>
<![endif]-->

Gradient text effect

6. Vertical centering with line-height

 
div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}
 
<p>Content here</p>

Vertical centering with line-height

7. Rounded corners with images

 
<div class="roundcont">
<div class="roundtop">
<img src="tl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
 
CONTENT
 
<div class="roundbottom">
<img src="bl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
</div>
 
.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}
 
.roundcont p {
margin: 0 10px;
}
 
.roundtop {
background: url(tr.gif) no-repeat top right;
}
 
.roundbottom {
background: url(br.gif) no-repeat top right;
}
 
img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

Rounded corners with images

8. Multiple class name

 
<img src="image.gif" class="class1 class2" alt="" />
 
.class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}

9. Center horizontally

 
<div id="container"></div>
 
#container {
margin:0px auto;
}

Center horizontally

10. CSS Drop Caps

 
<p class="introduction"> This paragraph has the class "introduction". If your browser supports the pseudo-class "first-letter", the first letter will be a drop-cap. </p>
 
p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}

CSS Drop Caps

11. Prevent line breaks in links, oversized content to brake

 
a{
white-space:nowrap;
}
 
#main{
overflow:hidden;
}

12. Show firefox scrollbar, remove textarea scrollbar in IE

 
html{
overflow:-moz-scrollbars-vertical;
}
 
textarea{
overflow:auto;
}

Leave a comment on Stylized Web Have some feedback? Leave a comment

172 Comments So Far

Pingback: CSS Tricks
By mark posted on March 16, 2008 at 5:42 am

Awesome! Thanks for the examples this time. It really helped visually the code and see the application at the same time
By Jenny posted on March 16, 2008 at 6:12 am

I still can’t get the hang of that rounded corners without images. I tried it and failed miserably. But the rest are pretty interesting. Like the OL one. I’ll have to try that with my new theme I’m working on.
Pingback: links for 2008-03-16
Pingback: links for 2008-03-15 « linksnstuff
By Dejan posted on March 16, 2008 at 10:50 am

@ Jenny
You can see it live here for example
http://www.sixshootermedia.com/
By cypher posted on March 16, 2008 at 2:15 pm

Already seen elsewhere :
http://cssglobe.com/post/1392/8-premium-one-line-css-tips

Please provide original content…
Pingback: CSS tricks
By Miami Web Design posted on March 16, 2008 at 10:32 pm

Awesome! Thanks for the collection. I’d swear, when I first learned about multiple classes, I almost fainted. LOL.
Pingback: Weekly Link Post 33 « Rhonda Tipton’s WebLog
Pingback: StratumTech » Most Used CSS Tricks
By Rein Henrichs posted on March 17, 2008 at 1:54 am

If you are going to “borrow” others’ CSS tricks, at least do them the courtesy of attributing where possible. Saying, “Oh, I never claimed that they were mine,” just doesn’t cut it, I’m afraid. Also, readers be warned that a number of these tricks use horribly non-semantic markup (b tags for rounded corners??) where there are more acceptable alternatives.
By John Smith posted on March 17, 2008 at 2:30 am

This is very useful!
If you need a drop down menu bar for your blog or website.
http://widgetsforfree.blogspot.com/2008/03/drop-down-menu-bar.html
By Scott posted on March 17, 2008 at 2:45 am

WOW to give credit to the original authors, there’s an original idea so who should give credit to W3C? Actually how about Håkon Wium Lie (inventor of CSS). I know better yet why don’t all of you sanctamonius pin-headed critics find something better to do with your time than to point out the obvious(well maybe not to you) point that these tips weren’t created by him he’s sharing tips that he’s descovered and used. but thats ok you’ve probably ripped stuff for your sites without giving due credit anyway. and don’t give me that what who me cause we’ve all done it in the name of faster load times or that clean look where looking for(that link back button that they want me to put on my site doesn’t go with the rest of the theme, they’ll never know anyways) . so check yourself before you point fingers.

all that aside good tips! Even found something i didn’t know thanks to you for sharing( cause if no one shares we never learn)
By Yare posted on March 17, 2008 at 10:15 am

Nice list…
I also want to comment first two comments. The whole idea of Web 2.0 is sharing and combining pieces of informations collected from everywhere. Being original is so 20th century
Good job Dejan!
By Dejan posted on March 17, 2008 at 1:47 pm

@ Scott & Yare
Thanks guys for clearing this up, i appreciate it.
I really hate to argue about these kind of things, comments are closed.
Pingback: The essential list of CSS tips, tricks & hacks | Jayhan Loves Design & Japan
Pingback: Stewart Schatz » Blog Archive » Some CSS Tricks From Dejan Cancarevic
Pingback: links for 2008-03-17 | Tom Arnold
Pingback: Wöchentliche Rundablage: ASP.NET MVC, Silverlight 2, LINQ… | Code-Inside Blog
Pingback: Urbano’s Blog » Blog Archive » Most used CSS tricks
Pingback: diigo2ZerockBlog 03/18/2008 « ZerockBlog
Pingback: Most used CSS tricks « Private: MY Note
Pingback: Finds of The Week - March 16, 2008 » Chinh Do
Pingback: links for 2008-03-18 at James A. Arconati
Pingback: links for 2008-03-18 — SOJo: Student of Online Journalism by Megan Taylor
Pingback: Fatih Hayrioğlu’nun not defteri » 18 Mart 2008 web’den seçme haberler
Pingback: Efeitos interessantes usando CSS - Infoministração
Pingback: links for 2008-03-19
Pingback: Tagging the Web Daily 03/19/2008 « PAB Skunkworks Weblog
Pingback: links for 2008-03-19 « Elearning
Pingback: Tips y trucos de CSS (muy útiles) — michaelmuller.net | Diseño y Desarrollo Web
Pingback: rascunho » Blog Archive » links for 2008-03-20
Pingback: Surf Raporu, 21 Mart 2008 | Taylan Aktepe
Pingback: Templaterie Blog
Pingback: Big Fat Rat » links for 2008-03-25
Pingback: CCS & Ajax Links for March 24th | False Positives
Pingback: Best Of March 2008 | Best of the Month | Smashing Magazine
Pingback: Best Of March 2008 | Blog
Pingback: most used css tricks — award tour
Pingback: PHP MYSQL HP-UX CSS AJAX : iNetVista
Pingback: en çok kullanılan basit css teknikleri - Mp3 indir dinle
Pingback: Tasarım Notları » Blog Archive » En Çok Aranan CSS Uygulamaları
Pingback: en çok kullanılan basit css teknikleri | Bizim Neyimiz Eksik?
Pingback: Web-дизайн ссылки и links… « Блог Серёжи Борзова
Pingback: Coolness roundup #6: Grid-based & CSS flisterz:blog
Pingback: Best Of March 2008 - juliomarroquin.com
Pingback: Free CSS Tutorials Online
Pingback: Great Resources Elsewhere: March 21 to March 28 - CSSnewbie
Pingback: links for 2008-04-06 | Disruptive Technocrat