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: IT民工的坐井观天 » 最常用的CSS小把戏(Most used CSS tricks)

  2. Pingback: Os doze mais utilizados truques de CSS | Tecnologia da Informação - Desenvolvimento e Educação

  3. Pingback: links for 2008-04-08 | Eugeni’s blog

  4. Pingback: Most used CSS tricks | StylizedWeb.com : Tenglar, án ábyrgðar

  5. Pingback: CSS Kniffe auf Apfelknacker

  6. Pingback: HD Blog » Most used CSS tricks

  7. Pingback: links for 2008-04-23 « Yet another blog

  8. Pingback: Trucos CSS mas utilizados

  9. Pingback: CSS Tricks Anyone?

  10. Pingback: cwpfolio.com » Blog Archive » Ten Links For The Week

  11. Pingback: Los 12 trucos de CSS más usados… y necesarios

  12. Pingback: CSS Tricks und Tutorials | Photoclinique

  13. Pingback: Интересное в сети.. « Блог Серёжи Борзова

  14. Pingback: DICAS MAIS ÚTEIS DE CSS « GR!LO PRESS

  15. Pingback: 12 часто используемых CSS приемов | Listeria.ru

  16. Pingback: Thursday Links Roundup #5 - Putting Blogs First

  17. Pingback: 25 Awesome tutorials for web designers « Narendra Dhami

  18. Pingback: 25 Awesome tutorials for web designers « Guiwells’s Blog

  19. Pingback: From free for free » Blog Archive » 25 Awesome tutorials for web designers

  20. Pingback: Web geliştiriciler için 25 harika paket

  21. Pingback: 25 Awesome tutorials for web designers | Boxed CSS

  22. Pingback: 25 Awesome tutorials for web designers | Boxed CSS

  23. Pingback: 9 Top CSS Essential Skills That Every Web designer Should Learn - aComment.net

  24. Pingback: links for 2008-08-21 | Funny Web Pages

  25. Pingback: 9 Top CSS Essential Skills That Every Web designer Should Learn « Kurt’s Rasmussen Class Weblog

  26. Pingback: 25 Awesome tutorials for web designers | 打篮球的手

  27. Pingback: RSSA聚合 » 25 Awesome tutorials for web designers

  28. Pingback: CSS Tricks - digital-workshop

  29. Pingback: En Cok Aranan Css Uygulamaları | C.AKIN Web Page

  30. Pingback: Emo Nedir? Nasıl Emo Olunur? EmoTurka | En Cok Aranan Css Uygulamaları

  31. Pingback: ART178: Intro. to Web Design » Blog Archive » CSS Positioning

  32. Pingback: Most used CSS tricks | StylizedWeb.com | Personal

  33. Pingback: Bookmarks for Dezember 10th through Dezember 11th | maximi maxima maxi max ist da

  34. Pingback: en çok kullanılan basit css teknikleri « zrmbilisim katkıları ile 2009 seo yarışması

  35. Pingback: Blog - FRHost Hospedagem de Site » Blog Archive » 9 Dicas de CSS que todo Designer deve Saber

  36. Pingback: Most Used CSS Tricks | From the desk (and BlackBerry) of Keith Parnell

  37. Pingback: Neonblood

  38. Pingback: her web tasarımcının öğrenmesi gereken 9 önemli css yeteneği |

  39. Pingback: » Blog Archive » Los trucos CSS mas utilizados

  40. Pingback: 我想网 » Blog Archive » 最有用的CSS技巧

  41. Pingback: 350+ CSS Tools and 160+ RSS Feeds for Web Developers and Web Designers « WebDevTeam’s Blog

  42. Pingback: 84 Amazingly Useful CSS Tips & Resources | Hi, I'm Grace Smith

  43. Pingback: 84个CSS教程,老外的。 - Booto’Blog

  44. Pingback: 84 Useful CSS Tips & Resources | Monty Tuts - Your Ultimate Web Design Resource

  45. Pingback: 84 Amazingly Useful CSS Tips & Resources | Grace Smith | cssOrigins.com

  46. Pingback: 50+CSS实用技巧和资源汇总 | 博译论 | 分享网络热门与新知 关注网络应用与营销

  47. Pingback: Digest 04/09: CSS, HTML e Layout | Boas práticas de Desenvolvimento com Padrões Web

  48. Pingback: 200+ anv

  49. Pingback: 84 recursos y consejos sobre CSS « GoVisual

  50. Pingback: Css Styles Links « bnotezz