Plugin: CSS3 (auto prefix CSS3 properties)
Development and Programming
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
SwEEEEEEEEt.
I just added transform:rotate() and corrected border-radius to comply with the latest CSS3 draft.
In future versions, I’ll be adding background-image gradients and IE matrix filters (http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx).
Please let me know if there’s anything else you’d like to see included.
Just added: * EE 2.0 version * background:linear-gradient * Internet Explorer support for background gradient, box-shadow, transform rotation, and opacity.
Very nice, thanks for posting Steve.