Friday 23 September 2011

Transfrom


#transfrom1 {
text-align:center;
margin:0 auto;
height:50px;
width:580px;
font-size:20px;
color:#FFF;
background-color:#999;
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
#transfrom2 {
text-align:center;
margin:20px auto;
height:50px;
width:580px;
font-size:20px;
color:#FFF;
background-color:#F00;
-moz-transform: skew(-25deg);
-webkit-transform: skew(-25deg);
}



Preview




Transform – rotate
Transform – rotate


Border Radius


#border_radius1 {
text-align:center;
margin:0 auto;
height:50px;
width:580px;
border: 5px solid #c4c8cc;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#border_radius2 {
text-align:center;
margin:20px auto;
height:50px;
width:580px;
border: 5px solid #c4c8cc;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 15px;
-khtml-border-radius-topleft:15px;
-khtml-border-radius--topright:15px;
-khtml-border-radius-bottomright: 0px;
-khtml-border-radius-bottomleft: 0px;
border-radius-topright-topleft:15px;
border-radius-topright-topright:15px;
border-radius-topright-bottomright: 0px;
border-radius-topright-bottomleft: 0px;
}

Preview

border-radius & rounded corners


Text shadow


#textshadow1 {
text-align:center;
margin:0 auto;
height:50px;
width:580px;
text-shadow: 2px 2px 7px #111;
font-size: 3.2em;
color: #f5f5f5;
}
#textshadow2 {
text-align:center;
margin:20px auto;
height:50px;
width:580px;
text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;
font-size: 3.2em;
color: #fff;
text-align: center;
padding: 10px 0px 5px 0px;
background: #151515;
}

Preview

Text shadows
Text shadows


Gradients




#gradients1 {
    text-align:center;
    margin:0 auto;
    height:50px;
    width:580px;
  background: -moz-linear-gradient(top, #35425d 0%, #fff 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#35425d), to(#fff));
}

#gradients2 {
    text-align:center;
    margin:20px auto;
    height:50px;
    width:580px;
  background: -moz-linear-gradient(left, #35425d 25%, #fff 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#35425d), to(#fff));
}

#gradients3 {
    text-align:center;
    margin:20px auto;
    height:50px;
    width:580px;
  background: -moz-radial-gradient(50% 50%, farthest-side, #487a77, #fff);
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#487a77), to(#fff));
}



Preview

Gradient


Linear gradient

Radial gradient

Box Shadow



#box_shadow1 {
    text-align:center;
    margin:0 auto;

  width:580px;
    height:50px;
    border: 5px solid #c4c8cc;
  -moz-box-shadow: 5px 5px 7px #888;
  -moz-border-radius-bottomright: 15px;
  -webkit-box-shadow: 5px 5px 7px #888;
  -webkit-border-bottom-right-radius: 15px;
}

#box_shadow2 {
    text-align:center;
    margin:20px auto;
    height:50px;
    width:580px;
   border: 5px solid #c4c8cc;
  -moz-box-shadow: -10px 5px 10px #900    ;
  -moz-border-radius-bottomright: 15px;
  -webkit-box-shadow: -10px 5px 10px #900;
  -webkit-border-bottom-right-radius: 15px;
}





Preview

Box shadows