Css Cheat Sheet

CSS 2 :

Image List :

ul
{
list-style-image: url(‘img.ext’);
}

Cross Browser Solution ( Clear First ) :

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

Set Static Content ( Doesnot moved when scrolled )

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Image Transparency :

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

CSS 3 :

Rotation with CSS:

div
{
transform:rotate(60deg);
-ms-transform:rotate(30deg); /* IE 9 /
-moz-transform:rotate(60deg); /
Firefox /
-webkit-transform:rotate(30deg); /
Safari and Chrome /
-o-transform:rotate(30deg); /
Opera */
}

Rounded Corner:

div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}

Shadow :

div
{
width:300px;
height:100px;
background-color:yellow;
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier /
-webkit-box-shadow: 10px 10px 5px #888888; /
Safari */
box-shadow: 10px 10px 5px #888888;
}

Border Image :

div
{
border-width:15px;
width:250px;
padding:10px 20px;
}

#round

{
-moz-border-image:url(border.png) 30 30 round; /* Firefox /
-webkit-border-image:url(border.png) 30 30 round; /
Safari and Chrome /
-o-border-image:url(border.png) 30 30 round; /
Opera */
border-image:url(border.png) 30 30 round;
}

#stretch

{
-moz-border-image:url(border.png) 30 30 stretch; /* Firefox /
-webkit-border-image:url(border.png) 30 30 stretch; /
Safari and Chrome /
-o-border-image:url(border.png) 30 30 stretch; /
Opera */
border-image:url(border.png) 30 30 stretch;
}

Wrap Word :

p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}