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

"container">

"rtop">

"r1"> "r2"> "r3"> "r4">





"rbottom">

"r4"> "r3"> "r2"> "r1">







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

 

2. Style your order list

This is line one







Here is line two







And last line







ol {

font: italic 1em Georgia, Times, serif;

color: #999999;

}



ol p {

font: normal .8em Arial, Helvetica, sans-serif;

color: #000000;

}

 

3. Tableless forms

"name">Name

"name" name="name">


"address">Address

"address" name="address">


"city">City

"city" name="city">






label,input {

display: block;

width: 150px;

float: left;

margin-bottom: 10px;

}



label {

text-align: right;

width: 75px;

padding-right: 20px;

}



br {

clear: left;

}

 

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;

}

 

5. Gradient text effect

CSS Gradient Text



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;

}





 

6. Vertical centering with line-height

div{

height:100px;

}

div *{

margin:0;

}

div p{

line-height:100px;

}



Content here

 

7. Rounded corners with images

"roundcont">

"roundtop">

"tl.gif" alt=""

width="15" height="15" class="corner"

style="display: none" />





CONTENT

"roundbottom">

"bl.gif" alt=""

width="15" height="15" class="corner"

style="display: none" />







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

}

 

8. Multiple class name

"image.gif" class="class1 class2" alt="" />



.class1 { border:2px solid #666; }

.class2 {

padding:2px;

background:#ff0;

}

 

9. Center horizontally

"container">



#container {

margin:0px auto;

}

 

10. CSS Drop Caps

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

}

 

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;

}