CSS3 Sample Code

The cross browser css3 generator. Copy and edit

Box Round

.box_round {
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}

Box shadow

.box_shadow {
-moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE9 */
}

Box Gradient

.box_gradient {
background-color: #444444;
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
background-image: linear-gradient(top, #444444, #999999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */
}

Box RGBA

  .box_rgba {
  background-color: #B4B490;
  background-color: rgba(180, 180, 144, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490'); /* IE6–IE9
  }
  

Box Rotate

  .box_rotate {
  -moz-transform: rotate(7.5deg);  /* FF3.5+
  -o-transform: rotate(7.5deg);  /* Opera 10.5
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome
  -ms-transform: rotate(7.5deg);  /* IE9
  transform: rotate(7.5deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', /* IE6–IE9
  M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104);
  }
  

Box Transition

  .box_transition {
  -moz-transition: all 0.3s ease-out;  /* FF3.7+ */
  -o-transition: all 0.3s ease-out;  /* Opera 10.5 */
  -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
  transition: all 0.3s ease-out;
  }
  

Box Text Shadow

  .box_textshadow {
  text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome */
  }
  

Font Face

  @font-face {
  font-family: 'WebFont';
  src: url('myfont.eot');  /* IE6–8 */
  src: local('☺'),
  url('myfont.woff') format('woff'),  /* FF3.6, IE9 */
  url('myfont.ttf') format('truetype');  /* Saf3+, Chrome, FF3.5, Opera 10+ */
  }