For each advanced CSS3 property, use this plugin in a CSS template to spew out all the supporting browser prefixes (supports Gecko, Konqueror, Opera, Trident, and Webkit).
Refer to the Mozilla site for implementation style and ideas: https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
For example:
#rounded_box {
{exp:css3:borderRadius value="1em 2em 3em 4em"}
}
...outputs:
#rounded_box {
-moz-border-radius:1em 2em 3em 4em;
border-top-left-radius:1em;
border-top-right-radius:2em;
border-bottom-left-radius:3em;
border-bottom-right-radius:4em;
-webkit-border-top-left-radius:1em;
-webkit-border-top-right-radius:2em;
-webkit-border-bottom-left-radius:3em;
-webkit-border-bottom-right-radius:4em;
}
MORE SAMPLES
{exp:css3:backgroundClip value="content"}
see https://developer.mozilla.org/en/CSS/-moz-background-clip
{exp:css3:backgroundOrigin value="content"}
see https://developer.mozilla.org/en/CSS/-moz-background-origin
{exp:css3:backgroundSize value="100% 100%"}
see https://developer.mozilla.org/en/CSS/-moz-background-size
{exp:css3:borderImage value="url(image.png) 1px 2px 3px 4px"}
see https://developer.mozilla.org/en/CSS/-moz-border-image
{exp:css3:borderRadius value="1em"}
{exp:css3:borderRadius value="1em 2em 3em 4em"}
{exp:css3:borderRadius value="1em/1px"}
{exp:css3:borderRadius value="1em 2em 3em 4em / 1px 2px 3px 4px"}
see https://developer.mozilla.org/en/CSS/-moz-border-radius
Note: Make sure you use 1 or 4 space-delimited values. Since cases where 2 or 3 values would make sense seemed so rare, I didn’t bother supporting those. Also, for horizontal/vertical radii, use the Mozilla slash style.
{exp:css3:boxShadow value="1px 2px 3px rgba(0,0,0,.5)"}
see https://developer.mozilla.org/en/CSS/-moz-box-shadow
{exp:css3:boxSizing value="border-box"}
see https://developer.mozilla.org/en/CSS/box-sizing
UPDATED 2010-03-18
EE 2.0 version
(branched at http://github.com/stedman/sd.css3.ee_addon/tree/ee2 )
background linear gradient
{exp:css3:backgroundLinearGradient value="top, #fff, #000"}
{exp:css3:backgroundLinearGradient value="left, rgba(0,10,20,.5), rgba(200,210,220,.5)"}
IE example:
<!--[if IE 8]>
.shadow {
{exp:css3:boxShadow ie="8" value="1px 2px 3px #666"}
}
<![endif]-->
...outputs:
<!--[if IE 8]>
.shadow {
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=1px,OffY=2px,Color='#666')";
}
<![endif]-->
IE Usage:
{exp:css3:backgroundLinearGradient ie="8" value="top, #fff, #000"}
{exp:css3:boxShadow ie="6" value="1px 2px 3px #666666"}
{exp:css3:opacity ie="6" value="0.5"}
{exp:css3:transformRotate ie="6" value="10deg"}
DOWNLOAD from GitHub
http://github.com/stedman/sd.css3.ee_addon
