CSS Notes

Rounded Borders

from http://www.css3.info/preview/rounded-border/

#roundedradius {
-moz-border-radius: 15px;
border-radius: 15px;
} 
W3C Specification Mozilla Implementation
border-radius -moz-border-radius
border-top-left-radius -moz-border-radius-topleft
border-top-right-radius -moz-border-radius-topright
border-bottom-right-radius -moz-border-radius-bottomright
border-bottom-left-radius -moz-border-radius-bottomleft

Shadows

from http://css-tricks.com/snippets/css/css-box-shadow/

.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

.innershadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

/* IE Shadow - HTML and CSS */
.shadow1 { 
   margin: 40px; 
   background-color: rgb(68,68,68); /* Needed for IEs */ 
   -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
   -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
   box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
   filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); 
   -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; 
   zoom: 1; 
} 

.shadow1 .content { 
position: relative; /* This protects the inner element from being blurred */ 
padding: 100px; 
background-color: #DDD; 
} 

/*Use a negative spread radius to get one edge of a box.*/ 
.one-edge-shadow { 
-webkit-box-shadow: 0 8px 6px -6px black; 
-moz-box-shadow: 0 8px 6px -6px black; 
box-shadow: 0 8px 6px -6px black; 
}

Gradients

from http://webdesignerwall.com/tutorials/cross-browser-css-gradient

background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

Transparent Elements

Note: transparency is applied to all child elements, which means this has to be used selectively.

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