StylizedWeb is a web design trends and tutorials blog, maintained by Ross Johnson who also runs a web design company and design blog.

Categories Archive

Popular Posts
Advertisement
Basecamp The Web Design Sketchbook
Najbolje ponuda IT poslova u Srbiji na itposlovi.info Advertise on Stylized Web

Most used CSS tricks

add to Save to Delicious Save to Stumble Save to Digg
The Web Design Sketchbook

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>
 
This is line one
</li>
<li>
 
Here is line two
</li>
<li>
 
And last line
</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;
}
 
Content here
 

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



Talk of the town
  • المحترفين المصريين: god site
  • Aşk Şiirleri: Thank you for your hand health
  • flavius: hi, Dejan, don’t know if anyone said anything about it in previous comments. you have a bug in your...
  • brain: nice buddy,, thx for this great post!!
  • JAMES: I WANT A WEBSITE FOR MY BUSINESS. I’VE BEEN INVESTIGATING THE MEANS AND METHODS SO THAT I CAN OBTAIN AT...
Amigos

Sorry, comments for this entry are closed at this time.

163 Responses so far

By Dejan
on March 17, 2008

@ Scott & Yare
Thanks guys for clearing this up, i appreciate it.
I really hate to argue about these kind of things, comments are closed.

By Yare
on March 17, 2008

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 Scott
on March 17, 2008

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 John Smith
on March 17, 2008

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 Rein Henrichs
on March 17, 2008

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 Miami Web Design
on March 16, 2008

Awesome! Thanks for the collection. I’d swear, when I first learned about multiple classes, I almost fainted. LOL.

By cypher
on March 16, 2008

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

Please provide original content…

By Dejan
on March 16, 2008

@ Jenny
You can see it live here for example
http://www.sixshootermedia.com/

By Jenny
on March 16, 2008

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.

By mark
on March 16, 2008

Awesome! Thanks for the examples this time. It really helped visually the code and see the application at the same time :)

By Dejan
on March 14, 2008

@ ferg
Thanks for another solutions, i also often use text-align:center;
#9 spelling is corrected ;)

By ferg
on March 14, 2008

Thanks for the great resource!

With regards to #9: The id value in the source is spelled, “contatiner”, while you mean “container”. Secondly, although the [margin:0 auto] trick is a great one, it breaks in IE 5 Win. There are a few ways around this — the most common is to use “text-align:center” and then reset the property afterwards. When working with fixed-width layouts, I much prefer positioning like so:


#container {
position: relative;
width: 500px; /* example width */
left: 50%;
margin-left: -250px; /* 50% of width */
}

By ASM
on March 14, 2008

Thanks for an excellent collection. The nature of the web is that ideas quickly become disassociated from their authors. Each of us uses them. Condensing them into a useable format such as this does a great service. Thanks to those who likely sweated hours bringing them from idea to reality.

By shao69
on March 14, 2008

Thanks for your work and for your comment ;-)

By M.Mahgoub
on March 14, 2008

what the heck! we can use multiple classes?!!
thanks for the list, its cool.

By Donna
on March 14, 2008

Great summation of CSS tricks.

And the issue with taking credit? I don’t think really applied at this point because as the title says “Most used…”.

By Manny
on March 14, 2008

Ok for the two idiots who posted first. He never said they were his. But thank you to whoever did post because these are super helpful!

By midomssh
on March 13, 2008

really cool list!

By witze blog
on March 13, 2008

really cool list!

By Dejan
on March 13, 2008

@ anonymous
First of all i don’t reply on comments without real name and email but i will make an exception this time.

IF you have read this text more carefully you would see that is says “today’s most used CSS tricks – tips” not for example “my tips” SO i don’t credit myself for any of these tips

AND no one can credit himself for example for vertical align or white-space that’s just part of CSS and this is just one of many ways of using it

@ all
Thank you for the good words ;)

By anonymous
on March 13, 2008

None of these CSS tricks is original. I think you should give credits to the original author.

By Chris
on March 13, 2008

Great post! I love posts like this where we have everything in one place.

By Welcome to Paradise
on March 13, 2008

I have saved and bookmarked this page for my reference. Thanks, these are quite helpful for me.

By Ken
on March 13, 2008

The CSS codes here are wonderful, especially the one on “glossy text”. Cool, digged, delicious’ed, and stumbled upon. :) Thanks.

By hasan
on March 13, 2008

very nice and useful
thank you

By Ali Erdoğan
on March 13, 2008

Really nice work. Thank you.

By Elijah
on March 13, 2008

Excellent tips, thanks!

By Eran Levy
on March 13, 2008

Good job. Keep on sending those useful tips/tutorials.

By jesudas
on March 13, 2008

nice

By john
on March 13, 2008

Weren’t most of these recently featured in another article elsewhere?
You may want to check your spelling on a few…

By Fish
on March 13, 2008

Very cool tricks! Save for further use~~~

By me
on March 13, 2008

Some citations would be nice too.

By Techdudes
on March 13, 2008

Amazing… very nice…
Specially i liked the round corner and Quote ones…

blogging it…

post more such things…

thanks.

By Jermayn Parker
on March 13, 2008

Seen them before BUT I forgot about styling the ordered list numbers, so thanks heaps for refreshing my memory!! As that would look so much better for a new website im creating.

By Deron Sizemore
on March 12, 2008

Very nice! Dugg and Stumbled! :)

By brent
on March 12, 2008

I’ve never seen the png gradient over CSS text before, that’s a good idea, pretty cool

brent
mimoymima.com

By Chris
on March 12, 2008

These are some nice CSS tips. Thanks for posting.

By Sarah
on March 12, 2008

I know most of them, but anyway this is very useful resource, thanks!

  1. Jan 23, 2010: Mest brugte CSS tricks | CHEW.dk
  2. Jan 18, 2010: A Comprehensive CSS Development Guide For Beginners & Experts « deCode10 – trends, technologies & more …
  3. Dec 29, 2009: Some useful CSS tricks » Click on post
  4. Dec 20, 2009: Dream of space » 84个CSS教程,老外的。
  5. Dec 16, 2009: 9 Top CSS Essential Skills That Every Web designer Should Learn | DevWebPro
  6. Nov 16, 2009: Web Design and Development usefull links | Victorelu
  7. Oct 30, 2009: Chilesabe » 84 tips CSS y Recursos
  8. Oct 30, 2009: Chilesabe » 84 tips CSS y Recursos
  9. Oct 30, 2009: 9 Top CSS Essential Skills : Nauman Akhtar
  10. Aug 11, 2009: 84 Amazingly Useful CSS Tips & Resources « Knowledge Articles
  11. Aug 6, 2009: DICAS MAIS ÚTEIS DE CSS
  12. Aug 6, 2009: ~mehmet diye biri » Arşiv » Faideli Malumat
  13. Jun 13, 2009: Tastee (del.icio.us) links! (June 12th)
  14. May 30, 2009: Css Styles Links « bnotezz
  15. May 12, 2009: 84 recursos y consejos sobre CSS « GoVisual
  16. May 5, 2009: 200+ anv
  17. May 4, 2009: Digest 04/09: CSS, HTML e Layout | Boas práticas de Desenvolvimento com Padrões Web
  18. May 2, 2009: 50+CSS实用技巧和资源汇总 | 博译论 | 分享网络热门与新知 关注网络应用与营销
  19. Apr 22, 2009: 84 Amazingly Useful CSS Tips & Resources | Grace Smith | cssOrigins.com
  20. Apr 19, 2009: 84 Useful CSS Tips & Resources | Monty Tuts - Your Ultimate Web Design Resource
  21. Apr 17, 2009: 84个CSS教程,老外的。 - Booto’Blog
  22. Apr 17, 2009: 84 Amazingly Useful CSS Tips & Resources | Hi, I'm Grace Smith
  23. Apr 8, 2009: 350+ CSS Tools and 160+ RSS Feeds for Web Developers and Web Designers « WebDevTeam’s Blog
  24. Mar 31, 2009: 我想网 » Blog Archive » 最有用的CSS技巧
  25. Mar 28, 2009: » Blog Archive » Los trucos CSS mas utilizados
  26. Mar 21, 2009: her web tasarımcının öğrenmesi gereken 9 önemli css yeteneği |
  27. Mar 14, 2009: Neonblood
  28. Feb 9, 2009: Most Used CSS Tricks | From the desk (and BlackBerry) of Keith Parnell
  29. Jan 2, 2009: Blog - FRHost Hospedagem de Site » Blog Archive » 9 Dicas de CSS que todo Designer deve Saber
  30. Dec 24, 2008: en çok kullanılan basit css teknikleri « zrmbilisim katkıları ile 2009 seo yarışması
  31. Dec 11, 2008: Bookmarks for Dezember 10th through Dezember 11th | maximi maxima maxi max ist da
  32. Dec 4, 2008: Most used CSS tricks | StylizedWeb.com | Personal
  33. Nov 19, 2008: ART178: Intro. to Web Design » Blog Archive » CSS Positioning
  34. Nov 11, 2008: Emo Nedir? Nasıl Emo Olunur? EmoTurka | En Cok Aranan Css Uygulamaları
  35. Oct 11, 2008: En Cok Aranan Css Uygulamaları | C.AKIN Web Page
  36. Oct 7, 2008: CSS Tricks - digital-workshop
  37. Sep 9, 2008: RSSA聚合 » 25 Awesome tutorials for web designers
  38. Sep 8, 2008: 25 Awesome tutorials for web designers | 打篮球的手
  39. Aug 26, 2008: 9 Top CSS Essential Skills That Every Web designer Should Learn « Kurt’s Rasmussen Class Weblog
  40. Aug 22, 2008: links for 2008-08-21 | Funny Web Pages
  41. Aug 21, 2008: 9 Top CSS Essential Skills That Every Web designer Should Learn - aComment.net
  42. Aug 16, 2008: 25 Awesome tutorials for web designers | Boxed CSS
  43. Aug 16, 2008: 25 Awesome tutorials for web designers | Boxed CSS
  44. Aug 13, 2008: Web geliştiriciler için 25 harika paket
  45. Aug 12, 2008: From free for free » Blog Archive » 25 Awesome tutorials for web designers
  46. Aug 12, 2008: 25 Awesome tutorials for web designers « Guiwells’s Blog
  47. Aug 12, 2008: 25 Awesome tutorials for web designers « Narendra Dhami
  48. Jul 31, 2008: Thursday Links Roundup #5 - Putting Blogs First
  49. Jul 21, 2008: 12 часто используемых CSS приемов | Listeria.ru
  50. Jul 17, 2008: DICAS MAIS ÚTEIS DE CSS « GR!LO PRESS
  51. Jul 7, 2008: Интересное в сети.. « Блог Серёжи Борзова
  52. Jun 12, 2008: CSS Tricks und Tutorials | Photoclinique
  53. May 22, 2008: Los 12 trucos de CSS más usados… y necesarios
  54. May 11, 2008: cwpfolio.com » Blog Archive » Ten Links For The Week
  55. May 3, 2008: CSS Tricks Anyone?
  56. Apr 24, 2008: Trucos CSS mas utilizados
  57. Apr 23, 2008: links for 2008-04-23 « Yet another blog
  58. Apr 14, 2008: HD Blog » Most used CSS tricks
  59. Apr 9, 2008: CSS Kniffe auf Apfelknacker
  60. Apr 9, 2008: Most used CSS tricks | StylizedWeb.com : Tenglar, án ábyrgðar
  61. Apr 8, 2008: links for 2008-04-08 | Eugeni’s blog
  62. Apr 8, 2008: Os doze mais utilizados truques de CSS | Tecnologia da Informação - Desenvolvimento e Educação
  63. Apr 7, 2008: IT民工的坐井观天 » 最常用的CSS小把戏(Most used CSS tricks)
  64. Apr 6, 2008: links for 2008-04-06 | Disruptive Technocrat
  65. Apr 4, 2008: Great Resources Elsewhere: March 21 to March 28 - CSSnewbie
  66. Apr 3, 2008: Free CSS Tutorials Online
  67. Apr 2, 2008: Best Of March 2008 - juliomarroquin.com
  68. Mar 31, 2008: Coolness roundup #6: Grid-based & CSS flisterz:blog
  69. Mar 28, 2008: Web-дизайн ссылки и links… « Блог Серёжи Борзова
  70. Mar 28, 2008: en çok kullanılan basit css teknikleri | Bizim Neyimiz Eksik?
  71. Mar 28, 2008: Tasarım Notları » Blog Archive » En Çok Aranan CSS Uygulamaları
  72. Mar 28, 2008: en çok kullanılan basit css teknikleri - Mp3 indir dinle
  73. Mar 28, 2008: PHP MYSQL HP-UX CSS AJAX : iNetVista
  74. Mar 27, 2008: most used css tricks — award tour
  75. Mar 27, 2008: Best Of March 2008 | Blog
  76. Mar 27, 2008: Best Of March 2008 | Best of the Month | Smashing Magazine
  77. Mar 26, 2008: CCS & Ajax Links for March 24th | False Positives
  78. Mar 25, 2008: Big Fat Rat » links for 2008-03-25
  79. Mar 22, 2008: Templaterie Blog
  80. Mar 20, 2008: Surf Raporu, 21 Mart 2008 | Taylan Aktepe
  81. Mar 20, 2008: rascunho » Blog Archive » links for 2008-03-20
  82. Mar 19, 2008: Tips y trucos de CSS (muy útiles) — michaelmuller.net | Diseño y Desarrollo Web
  83. Mar 19, 2008: links for 2008-03-19 « Elearning
  84. Mar 19, 2008: Tagging the Web Daily 03/19/2008 « PAB Skunkworks Weblog
  85. Mar 19, 2008: links for 2008-03-19
  86. Mar 18, 2008: Efeitos interessantes usando CSS - Infoministração
  87. Mar 18, 2008: Fatih Hayrioğlu’nun not defteri » 18 Mart 2008 web’den seçme haberler
  88. Mar 18, 2008: links for 2008-03-18 — SOJo: Student of Online Journalism by Megan Taylor
  89. Mar 18, 2008: links for 2008-03-18 at James A. Arconati
  90. Mar 18, 2008: Finds of The Week - March 16, 2008 » Chinh Do
  91. Mar 18, 2008: Most used CSS tricks « Private: MY Note
  92. Mar 18, 2008: diigo2ZerockBlog 03/18/2008 « ZerockBlog
  93. Mar 17, 2008: Urbano’s Blog » Blog Archive » Most used CSS tricks
  94. Mar 17, 2008: Wöchentliche Rundablage: ASP.NET MVC, Silverlight 2, LINQ… | Code-Inside Blog
  95. Mar 17, 2008: links for 2008-03-17 | Tom Arnold
  96. Mar 17, 2008: Stewart Schatz » Blog Archive » Some CSS Tricks From Dejan Cancarevic
  97. Mar 17, 2008: The essential list of CSS tips, tricks & hacks | Jayhan Loves Design & Japan
  98. Mar 17, 2008: StratumTech » Most Used CSS Tricks
  99. Mar 17, 2008: Weekly Link Post 33 « Rhonda Tipton’s WebLog
  100. Mar 16, 2008: CSS tricks
  101. Mar 16, 2008: links for 2008-03-15 « linksnstuff
  102. Mar 16, 2008: links for 2008-03-16
  103. Mar 16, 2008: CSS Tricks
  104. Mar 15, 2008: CSS? - timebomb.
  105. Mar 15, 2008: Weekly Links - March 15th | Vandelay Website Design
  106. Mar 15, 2008: Convergence » links for 2008-03-15
  107. Mar 15, 2008: Links for 15-03-2008 | Velcro City Tourist Board
  108. Mar 14, 2008: trick css piu usati : sastgroup.com
  109. Mar 14, 2008: 2008년 3월 14일 « JJJ is my last exclusion-girilfriend
  110. Mar 14, 2008: Most used CSS tricks | StylizedWeb.com | 次なるもの
  111. Mar 14, 2008: » Most used CSS tricks Webcreatives
  112. Mar 14, 2008: // wyctim.blog » Blog Archive » Heti Linkek
  113. Mar 14, 2008: Metaholic » Most used CSS tricks | StylizedWeb.com
  114. Mar 14, 2008: Pages tagged "css"
  115. Mar 14, 2008: links for 2008-03-14 « Mike Does Tech
  116. Mar 14, 2008: links for 2008-03-13 « toonz
  117. Mar 13, 2008: Trucos CSS más usados | Data2max.com
  118. Mar 13, 2008: La Guimauve du Web » Un rappel de techniques CSS
  119. Mar 13, 2008: Awesomoto » Blog Archive » Most Used CSS Tricks
  120. Mar 13, 2008: The most used CSS Tricks « Well, Here, webdesign, link, resource, development, helpful, css « Sharebrain
  121. Mar 13, 2008: Los trucos más usados de CSS | unblogged. A blog about nothing. Yeah, nothing
  122. Mar 13, 2008: AlanLe.net » links for 2008-03-13
  123. Mar 13, 2008: Most used CSS tricks
  124. Mar 13, 2008: Metaholic » Most used CSS tricks
  125. Mar 13, 2008: purrl.net |** urls that purr **|