Most used CSS tricks

Most used CSS techniques, from stylizedweb.com blog

1. Rounded corners without images

 

  1.  
  2. <p id="”container”">
  3. <strong class="”rtop”">
  4. </strong>
  5.  
  6. < !-–content goes here –->
  7. <strong class="”rbottom”">
  8. </strong></p>
  1. .rtop, .rbottom{display:block}
  2. .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
  3.  
  4. .r1{margin: 0 5px}
  5.  
  6. .r2{margin: 0 3px}
  7.  
  8. .r3{margin: 0 2px}
  9.  
  10. .r4{margin: 0 1px; height: 2px}

Rounded corners without images

2. Style your order list

  1.  
  2. <li><span>This is line one</span></li>
  3. <li><span>Here is line two</span></li>
  4. <li><span>And last line</span></li>
  5. </ol>
  6.  
  1.  
  2. ol {
  3. font: italic 1em Georgia, Times, serif;
  4. color: #999999;
  5. }
  6.  
  7. ol span{
  8. font: normal .8em Arial, Helvetica, sans-serif;
  9. color: #000000;
  10. }

Style your order list

3. Tableless forms

 

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

CSS Tableless forms

4. Double blockquote

 

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

Double blockquote

5. Gradient text effect

<h1><span></span>CSS Gradient Text</h1>

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

Gradient text effect

6. Vertical centering with line-height

 

  1. div{
  2. height:100px;
  3. }
  4. div *{
  5. margin:0;
  6. }
  7. div p{
  8. line-height:100px;
  9. }

Vertical centering with line-height

7. Rounded corners with images

 

  1.  
  2. <p class="”roundcont”">
  3. </p><p class="”roundtop”">
  4.  
  5. CONTENT
  6. </p><p class="”roundbottom”">
  7. </p>
  1. .roundcont {
  2. width: 250px;
  3. background-color: #f90;
  4. color: #fff;
  5. }
  6.  
  7. .roundcont p {
  8. margin: 0 10px;
  9. }
  10.  
  11. .roundtop {
  12. background: url(tr.gif) no-repeat top right;
  13. }
  14.  
  15. .roundbottom {
  16. background: url(br.gif) no-repeat top right;
  17. }
  18.  
  19. img.corner {
  20. width: 15px;
  21. height: 15px;
  22. border: none;
  23. display: block !important;
  24. }

Rounded corners with images

8. Multiple class name

 

  1. <img src=”image.gif” class=”class1 class2″ alt=”" />

.class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}
[ad#blog]

9. Center horizontally

 

  1. <div id=”container”></div>
  1. #container {
  2. margin:0px auto;
  3. }

Center horizontally

10. CSS Drop Caps

 

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

CSS Drop Caps

11. Prevent line breaks in links, oversized content to brake

 

  1. a{
  2. white-space:nowrap;
  3. }
  4.  
  5. #main{
  6. overflow:hidden;
  7. }

12. Show firefox scrollbar, remove textarea scrollbar in IE

 

  1. html{
  2. overflow:-moz-scrollbars-vertical;
  3. }
  4.  
  5. textarea{
  6. overflow:auto;
  7. }

About Alex

Hello! I'm Alejandro U. Alvarez, an engineering student at Universidad de Oviedo (Spain). I started programming during my Freshman year in Brookline High School (Boston, MA), and then got more and more interested in web development. I'm almost in love with JavaScript, although I keep an open mind with other languages

6 thoughts on “Most used CSS tricks

  1. You should be more careful when you “borrow” from other sites — you’ve done a nice job cleaning up some of the code (like on #1, for example), but #2 won’t work as you’ve rewritten it. Without a containing tag inside those list items (the original article used <p>, but I tend to use <span> in my code), your numbers will inherit their style from the list item, not the ordered list. Also, #3 is missing the <br /> tags that made those clears work properly — without them, any sufficiently wide form will act funny. I tend to put the “clear: left” bit on the labels themselves, if that helps you clean it up.

    1. Thanks for the tips!
      The fun thing is that I actually use the List trick in my comments, I changed the css to have it work and I forgot to update the topic.

      In the original post the code might have been a little different, I added and changed some stuff where I thought it would be better.. :)

Leave a Reply