top
12
03
2008
18:11 pm
filed as: CSS, Design
author: Dejan Cancarevic
comments: Subscribe
108 Responses

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

Subscribe full RSS RSS
  • del.icio.us del.icio.us (0)
  • StumbleUpon StumbleUpon
  • Digg Digg
  • Mister Wong Wong it
108 Responses, Leave a Reply
108
Dejan
March 17th
2008
13: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.

107
Yare
March 17th
2008
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!

106
Scott
March 17th
2008
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)

105
John Smith
March 17th
2008
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

104
Rein Henrichs
March 17th
2008
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.

103
Miami Web Design
March 16th
2008
22:32 pm

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

102
cypher
March 16th
2008
14:15 pm

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

Please provide original content…

101
Dejan
March 16th
2008
10:50 am

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

100
Jenny
March 16th
2008
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.

99
mark
March 16th
2008
5:42 am

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

98
Dejan
March 14th
2008
16:04 pm

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

97
ferg
March 14th
2008
15:49 pm

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 */
}

96
ASM
March 14th
2008
15:09 pm

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.

95
shao69
March 14th
2008
13:52 pm

Thanks for your work and for your comment ;-)

94
M.Mahgoub
March 14th
2008
12:30 pm

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

93
Donna
March 14th
2008
1:30 am

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

92
Manny
March 14th
2008
0:25 am

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!

91
midomssh
March 13th
2008
23:31 pm

really cool list!

90
witze blog
March 13th
2008
16:47 pm

really cool list!

89
Dejan
March 13th
2008
14:18 pm

@ 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 ;)

88
anonymous
March 13th
2008
14:07 pm

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

87
Chris
March 13th
2008
13:25 pm

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

86
Welcome to Paradise
March 13th
2008
12:38 pm

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

85
Ken
March 13th
2008
10:39 am

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

84
hasan
March 13th
2008
9:57 am

very nice and useful
thank you

83
Ali Erdoğan
March 13th
2008
9:26 am

Really nice work. Thank you.

82
Elijah
March 13th
2008
8:20 am

Excellent tips, thanks!

81
Eran Levy
March 13th
2008
7:58 am

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

80
jesudas
March 13th
2008
7:52 am

nice

79
john
March 13th
2008
7:46 am

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

78
Fish
March 13th
2008
7:07 am

Very cool tricks! Save for further use~~~

77
me
March 13th
2008
7:04 am

Some citations would be nice too.

76
Techdudes
March 13th
2008
6:34 am

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

blogging it…

post more such things…

thanks.

75
Jermayn Parker
March 13th
2008
2:16 am

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.

74
Deron Sizemore
March 12th
2008
23:31 pm

Very nice! Dugg and Stumbled! :)

73
brent
March 12th
2008
23:26 pm

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

brent
mimoymima.com

72
Chris
March 12th
2008
19:11 pm

These are some nice CSS tips. Thanks for posting.

71
Sarah
March 12th
2008
18:19 pm

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

70 Trackback(s)
  1. May 11, 2008: cwpfolio.com » Blog Archive » Ten Links For The Week
  2. Apr 24, 2008: Trucos CSS mas utilizados
  3. Apr 23, 2008: links for 2008-04-23 « Yet another blog
  4. Apr 14, 2008: HD Blog » Most used CSS tricks
  5. Apr 9, 2008: CSS Kniffe auf Apfelknacker
  6. Apr 9, 2008: Most used CSS tricks | StylizedWeb.com : Tenglar, án ábyrgðar
  7. Apr 8, 2008: links for 2008-04-08 | Eugeni’s blog
  8. Apr 8, 2008: Os doze mais utilizados truques de CSS | Tecnologia da Informação - Desenvolvimento e Educação
  9. Apr 7, 2008: IT民工的坐井观天 » 最常用的CSS小把戏(Most used CSS tricks)
  10. Apr 6, 2008: links for 2008-04-06 | Disruptive Technocrat
  11. Apr 4, 2008: Great Resources Elsewhere: March 21 to March 28 - CSSnewbie
  12. Apr 3, 2008: Free CSS Tutorials Online
  13. Apr 2, 2008: Best Of March 2008 - juliomarroquin.com
  14. Mar 31, 2008: Coolness roundup #6: Grid-based & CSS flisterz:blog
  15. Mar 28, 2008: Web-дизайн ссылки и links… « Блог Серёжи Борзова
  16. Mar 28, 2008: en çok kullanılan basit css teknikleri | Bizim Neyimiz Eksik?
  17. Mar 28, 2008: Tasarım Notları » Blog Archive » En Çok Aranan CSS Uygulamaları
  18. Mar 28, 2008: en çok kullanılan basit css teknikleri - Mp3 indir dinle
  19. Mar 28, 2008: PHP MYSQL HP-UX CSS AJAX : iNetVista
  20. Mar 27, 2008: most used css tricks — award tour
  21. Mar 27, 2008: Best Of March 2008 | Blog
  22. Mar 27, 2008: Best Of March 2008 | Best of the Month | Smashing Magazine
  23. Mar 26, 2008: CCS & Ajax Links for March 24th | False Positives
  24. Mar 25, 2008: Big Fat Rat » links for 2008-03-25
  25. Mar 22, 2008: Templaterie Blog
  26. Mar 20, 2008: Surf Raporu, 21 Mart 2008 | Taylan Aktepe
  27. Mar 20, 2008: rascunho » Blog Archive » links for 2008-03-20
  28. Mar 19, 2008: Tips y trucos de CSS (muy útiles) — michaelmuller.net | Diseño y Desarrollo Web
  29. Mar 19, 2008: links for 2008-03-19 « Elearning
  30. Mar 19, 2008: Tagging the Web Daily 03/19/2008 « PAB Skunkworks Weblog
  31. Mar 19, 2008: links for 2008-03-19
  32. Mar 18, 2008: Efeitos interessantes usando CSS - Infoministração
  33. Mar 18, 2008: Fatih Hayrioğlu’nun not defteri » 18 Mart 2008 web’den seçme haberler
  34. Mar 18, 2008: links for 2008-03-18 — SOJo: Student of Online Journalism by Megan Taylor
  35. Mar 18, 2008: links for 2008-03-18 at James A. Arconati
  36. Mar 18, 2008: Finds of The Week - March 16, 2008 » Chinh Do
  37. Mar 18, 2008: Most used CSS tricks « Private: MY Note
  38. Mar 18, 2008: diigo2ZerockBlog 03/18/2008 « ZerockBlog
  39. Mar 17, 2008: Urbano’s Blog » Blog Archive » Most used CSS tricks
  40. Mar 17, 2008: Wöchentliche Rundablage: ASP.NET MVC, Silverlight 2, LINQ… | Code-Inside Blog
  41. Mar 17, 2008: Stewart Schatz » Blog Archive » Some CSS Tricks From Dejan Cancarevic
  42. Mar 17, 2008: The essential list of CSS tips, tricks & hacks | Jayhan Loves Design & Japan
  43. Mar 17, 2008: StratumTech » Most Used CSS Tricks
  44. Mar 17, 2008: Weekly Link Post 33 « Rhonda Tipton’s WebLog
  45. Mar 16, 2008: CSS tricks
  46. Mar 16, 2008: links for 2008-03-15 « linksnstuff
  47. Mar 16, 2008: links for 2008-03-16
  48. Mar 16, 2008: CSS Tricks
  49. Mar 15, 2008: CSS? - timebomb.
  50. Mar 15, 2008: Weekly Links - March 15th | Vandelay Website Design
  51. Mar 15, 2008: Convergence » links for 2008-03-15
  52. Mar 15, 2008: Links for 15-03-2008 | Velcro City Tourist Board
  53. Mar 14, 2008: trick css piu usati : sastgroup.com
  54. Mar 14, 2008: 2008년 3월 14일 « JJJ is my last exclusion-girilfriend
  55. Mar 14, 2008: Most used CSS tricks | StylizedWeb.com | 次なるもの
  56. Mar 14, 2008: » Most used CSS tricks Webcreatives
  57. Mar 14, 2008: // wyctim.blog » Blog Archive » Heti Linkek
  58. Mar 14, 2008: Metaholic » Most used CSS tricks | StylizedWeb.com
  59. Mar 14, 2008: Pages tagged "css"
  60. Mar 14, 2008: links for 2008-03-14 « Mike Does Tech
  61. Mar 14, 2008: links for 2008-03-13 « toonz
  62. Mar 13, 2008: Trucos CSS más usados | Data2max.com
  63. Mar 13, 2008: La Guimauve du Web » Un rappel de techniques CSS
  64. Mar 13, 2008: Awesomoto » Blog Archive » Most Used CSS Tricks
  65. Mar 13, 2008: The most used CSS Tricks « Well, Here, webdesign, link, resource, development, helpful, css « Sharebrain
  66. Mar 13, 2008: Los trucos más usados de CSS | unblogged. A blog about nothing. Yeah, nothing
  67. Mar 13, 2008: AlanLe.net » links for 2008-03-13
  68. Mar 13, 2008: Most used CSS tricks
  69. Mar 13, 2008: Metaholic » Most used CSS tricks
  70. Mar 13, 2008: purrl.net |** urls that purr **|

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

About

StylizedWeb is blog about web trends and tutorials and KnowHow community forum designed and maintained by Dejan Cancarevic.

Six Shooter Media
logo and web site design

Search