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!
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
<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}
<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; }
<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; }
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; }
<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]-->
div{ height:100px; } div *{ margin:0; } div p{ line-height:100px; } Content here
<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; }
<img src="image.gif" class="class1 class2" alt="" /> .class1 { border:2px solid #666; } .class2 { padding:2px; background:#ff0; }
<div id="container"></div> #container { margin:0px auto; }
<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; }
a{ white-space:nowrap; } #main{ overflow:hidden; }
html{ overflow:-moz-scrollbars-vertical; } textarea{ overflow:auto; }
Have some feedback? Leave a commentSorry, comments for this entry are closed at this time.
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!
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)
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
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.
Awesome! Thanks for the collection. I’d swear, when I first learned about multiple classes, I almost fainted. LOL.
Already seen elsewhere :
http://cssglobe.com/post/1392/8-premium-one-line-css-tips
Please provide original content…
@ Jenny
You can see it live here for example
http://www.sixshootermedia.com/
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.
Awesome! Thanks for the examples this time. It really helped visually the code and see the application at the same time
@ ferg
Thanks for another solutions, i also often use text-align:center;
#9 spelling is corrected 
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 */
}
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.
Thanks for your work and for your comment
what the heck! we can use multiple classes?!!
thanks for the list, its cool.
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…”.
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!
really cool list!
really cool list!
@ 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
None of these CSS tricks is original. I think you should give credits to the original author.
Great post! I love posts like this where we have everything in one place.
I have saved and bookmarked this page for my reference. Thanks, these are quite helpful for me.
The CSS codes here are wonderful, especially the one on “glossy text”. Cool, digged, delicious’ed, and stumbled upon. Thanks.
very nice and useful
thank you
Really nice work. Thank you.
Excellent tips, thanks!
Good job. Keep on sending those useful tips/tutorials.
nice
Weren’t most of these recently featured in another article elsewhere?
You may want to check your spelling on a few…
Very cool tricks! Save for further use~~~
Some citations would be nice too.
Amazing… very nice…
Specially i liked the round corner and Quote ones…
blogging it…
post more such things…
thanks.
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.
Very nice! Dugg and Stumbled!
I’ve never seen the png gradient over CSS text before, that’s a good idea, pretty cool
brent
mimoymima.com
These are some nice CSS tips. Thanks for posting.
I know most of them, but anyway this is very useful resource, thanks!
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.