StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

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
  1.  
  2. <div id="container">
  3. <b class="rtop">
  4. <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
  5. </b>
  6. <!--content goes here -->
  7. <b class="rbottom">
  8. <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
  9. </b>
  10. </div>
  11.  
  12. .rtop, .rbottom{display:block}
  13. .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
  14. .r1{margin: 0 5px}
  15. .r2{margin: 0 3px}
  16. .r3{margin: 0 2px}
  17. .r4{margin: 0 1px; height: 2px}
  18.  

Rounded corners without images

2. Style your order list
  1.  
  2. <ol>
  3. <li>
  4. <p>This is line one</p>
  5. </li>
  6. <li>
  7. <p>Here is line two</p>
  8. </li>
  9. <li>
  10. <p>And last line</p>
  11. </li>
  12. </ol>
  13.  
  14. ol {
  15. font: italic 1em Georgia, Times, serif;
  16. color: #999999;
  17. }
  18.  
  19. ol p {
  20. font: normal .8em Arial, Helvetica, sans-serif;
  21. color: #000000;
  22. }
  23.  

Style your order list

3. Tableless forms
  1.  
  2. <form>
  3. <label for="name">Name</label>
  4. <input id="name" name="name"><br>
  5. <label for="address">Address</label>
  6. <input id="address" name="address"><br>
  7. <label for="city">City</label>
  8. <input id="city" name="city"><br>
  9. </form>
  10.  
  11. label,input {
  12. display: block;
  13. width: 150px;
  14. float: left;
  15. margin-bottom: 10px;
  16. }
  17.  
  18. label {
  19. text-align: right;
  20. width: 75px;
  21. padding-right: 20px;
  22. }
  23.  
  24. br {
  25. clear: left;
  26. }
  27.  

CSS Tableless forms

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

Double blockquote

5. Gradient text effect
  1.  
  2. <h1><span></span>CSS Gradient Text</h1>
  3.  
  4. h1 {
  5. font: bold 330%/100% "Lucida Grande";
  6. position: relative;
  7. color: #464646;
  8. }
  9. h1 span {
  10. background: url(gradient.png) repeat-x;
  11. position: absolute;
  12. display: block;
  13. width: 100%;
  14. height: 31px;
  15. }
  16.  
  17. <!--[if lt IE 7]>
  18. <style>
  19. h1 span {
  20. background: none;
  21. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
  22. }
  23. </style>
  24. <![endif]-->
  25.  

Gradient text effect

6. Vertical centering with line-height
  1.  
  2. div{
  3. height:100px;
  4. }
  5. div *{
  6. margin:0;
  7. }
  8. div p{
  9. line-height:100px;
  10. }
  11.  
  12. <p>Content here</p>
  13.  

Vertical centering with line-height

7. Rounded corners with images
  1.  
  2. <div class="roundcont">
  3. <div class="roundtop">
  4. <img src="tl.gif" alt=""
  5. width="15" height="15" class="corner"
  6. style="display: none" />
  7. </div>
  8.  
  9. CONTENT
  10.  
  11. <div class="roundbottom">
  12. <img src="bl.gif" alt=""
  13. width="15" height="15" class="corner"
  14. style="display: none" />
  15. </div>
  16. </div>
  17.  
  18. .roundcont {
  19. width: 250px;
  20. background-color: #f90;
  21. color: #fff;
  22. }
  23.  
  24. .roundcont p {
  25. margin: 0 10px;
  26. }
  27.  
  28. .roundtop {
  29. background: url(tr.gif) no-repeat top right;
  30. }
  31.  
  32. .roundbottom {
  33. background: url(br.gif) no-repeat top right;
  34. }
  35.  
  36. img.corner {
  37. width: 15px;
  38. height: 15px;
  39. border: none;
  40. display: block !important;
  41. }
  42.  

Rounded corners with images

8. Multiple class name
  1.  
  2. <img src="image.gif" class="class1 class2" alt="" />
  3.  
  4. .class1 { border:2px solid #666; }
  5. .class2 {
  6. padding:2px;
  7. background:#ff0;
  8. }
  9.  
9. Center horizontally
  1.  
  2. <div id="container"></div>
  3.  
  4. #container {
  5. margin:0px auto;
  6. }
  7.  

Center horizontally

10. CSS Drop Caps
  1.  
  2. <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>
  3.  
  4. p.introduction:first-letter {
  5. font-size : 300%;
  6. font-weight : bold;
  7. float : left;
  8. width : 1em;
  9. }
  10.  

CSS Drop Caps

11. Prevent line breaks in links, oversized content to brake
  1.  
  2. a{
  3. white-space:nowrap;
  4. }
  5.  
  6. #main{
  7. overflow:hidden;
  8. }
  9.  
12. Show firefox scrollbar, remove textarea scrollbar in IE
  1.  
  2. html{
  3. overflow:-moz-scrollbars-vertical;
  4. }
  5.  
  6. textarea{
  7. overflow:auto;
  8. }
  9.  

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

173 Comments So Far

  1. Pingback: CSS Tricks

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

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

  4. Pingback: links for 2008-03-16

  5. Pingback: links for 2008-03-15 « linksnstuff

  6. By Dejan posted on March 16, 2008 at 10:50 am

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

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

    Please provide original content…

  8. Pingback: CSS tricks

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

  10. Pingback: Weekly Link Post 33 « Rhonda Tipton’s WebLog

  11. Pingback: StratumTech » Most Used CSS Tricks

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

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

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

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

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

  17. Pingback: The essential list of CSS tips, tricks & hacks | Jayhan Loves Design & Japan

  18. Pingback: Stewart Schatz » Blog Archive » Some CSS Tricks From Dejan Cancarevic

  19. Pingback: links for 2008-03-17 | Tom Arnold

  20. Pingback: Wöchentliche Rundablage: ASP.NET MVC, Silverlight 2, LINQ… | Code-Inside Blog

  21. Pingback: Urbano’s Blog » Blog Archive » Most used CSS tricks

  22. Pingback: diigo2ZerockBlog 03/18/2008 « ZerockBlog

  23. Pingback: Most used CSS tricks « Private: MY Note

  24. Pingback: Finds of The Week - March 16, 2008 » Chinh Do

  25. Pingback: links for 2008-03-18 at James A. Arconati

  26. Pingback: links for 2008-03-18 — SOJo: Student of Online Journalism by Megan Taylor

  27. Pingback: Fatih Hayrioğlu’nun not defteri » 18 Mart 2008 web’den seçme haberler

  28. Pingback: Efeitos interessantes usando CSS - Infoministração

  29. Pingback: links for 2008-03-19

  30. Pingback: Tagging the Web Daily 03/19/2008 « PAB Skunkworks Weblog

  31. Pingback: links for 2008-03-19 « Elearning

  32. Pingback: Tips y trucos de CSS (muy útiles) — michaelmuller.net | Diseño y Desarrollo Web

  33. Pingback: rascunho » Blog Archive » links for 2008-03-20

  34. Pingback: Surf Raporu, 21 Mart 2008 | Taylan Aktepe

  35. Pingback: Templaterie Blog

  36. Pingback: Big Fat Rat » links for 2008-03-25

  37. Pingback: CCS & Ajax Links for March 24th | False Positives

  38. Pingback: Best Of March 2008 | Best of the Month | Smashing Magazine

  39. Pingback: Best Of March 2008 | Blog

  40. Pingback: most used css tricks — award tour

  41. Pingback: PHP MYSQL HP-UX CSS AJAX : iNetVista

  42. Pingback: en çok kullanılan basit css teknikleri - Mp3 indir dinle

  43. Pingback: Tasarım Notları » Blog Archive » En Çok Aranan CSS Uygulamaları

  44. Pingback: en çok kullanılan basit css teknikleri | Bizim Neyimiz Eksik?

  45. Pingback: Web-дизайн ссылки и links… « Блог Серёжи Борзова

  46. Pingback: Coolness roundup #6: Grid-based & CSS flisterz:blog

  47. Pingback: Best Of March 2008 - juliomarroquin.com

  48. Pingback: Free CSS Tutorials Online

  49. Pingback: Great Resources Elsewhere: March 21 to March 28 - CSSnewbie

  50. Pingback: links for 2008-04-06 | Disruptive Technocrat