An easy way to use HTML5 linear gradients

CSS3 gradients are great. How many of you have used css gradients on your CMSMS sites? How many have used a tool like gradient editor? It helps to get the job done.... but, if you need to go back and tweek the gradient, you might as well start over from the begining.

Here is a way to use a User Defined Tag in CMSMS to make all this much easier.


Setting up the UDT

The following UDT produces cross-browser compatible css gradients much like the before mentioned gradient generator. To use it create a new UDT in CMSMS, name it css_linear_gradient and copy the code below in.

//regex to handle rgb and rgba color values
$gradient = preg_replace('/,(?![^\(]*\))/','|',$params['val']);
$colorstops = explode("|", $gradient);
//separate the gradient direction from the color stops
$direction = array_shift($colorstops);
//format color stops for all variations
switch (strtolower($direction)){
  case "to bottom":
    $ddirection = "top";
    $wgdirection = "linear, left top, left bottom";
    $b64direction = 'x1="0%" y1="0%" x2="0%" y2="100%"';
  case "to right":
    $ddirection = "left";
    $wgdirection ="linear, left top, right top";
    $b64direction = 'x1="0%" y1="0%" x2="100%" y2="0%"';
  case "135deg":
    $ddirection = "-45deg";     $wgdirection = "linear, left top, right bottom";     $b64direction = 'x1="0%" y1="0%" x2="100%" y2="100%"';     break;   case "45deg":     $ddirection = "45deg";     $wgdirection = "linear, left bottom, right top";     $b64direction = 'x1="0%" y1="100%" x2="100%" y2="0%"';     break;   default:     $ddirection = "error";     $wgdirection = "error";     $b64direction = ''; } //put together standard colorstops $strcolorstops = ""; foreach($colorstops as $color){   $strcolorstops .= ",".trim($color); } //old webkit colorstops $wgcolorstops = ""; foreach($colorstops as $color){   $wgcolor = explode(" ",trim($color));   $wgcolorstops .= ", color-stop(".$wgcolor[1].",".$wgcolor[0].")"; } //svg gradient for ie9 $b64colorstops = <<<XML <?xml version="1.0" ?> <svg xmlns="" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"> <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" $b64direction> XML; foreach($colorstops as $color){   $b64color = explode(" ",trim($color));   $b64colorstops .= '<stop offset="'.$b64color[1].'" stop-color="'.$b64color[0].'" stop-opacity="1"/>'."\n"; } $b64colorstops .= '</linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" /></svg>'; //output all variations echo "background: url(data:image/svg+xml;base64,".base64_encode($b64colorstops).");\n"; echo "background: -moz-linear-gradient($ddirection$strcolorstops); /* FF3.6+ */\n"; echo "background: -webkit-gradient($wgdirection$wgcolorstops); /* Chrome,Safari4+ */\n"; echo "background: -webkit-linear-gradient($ddirection$strcolorstops); /* Chrome10+,Safari5.1+ */\n"; echo "background: -o-linear-gradient($ddirection$strcolorstops); /* Opera 11.10+ */\n"; echo "background: -ms-linear-gradient($ddirection$strcolorstops);/* IE10+ */\n"; echo "background: linear-gradient($direction$strcolorstops);/* W3C */";

Using it in your CSS

In your CSS you can call the UDT like this:

[[css_linear_gradient val="to bottom, #ffffff 50%,#76a220 78%,#466804 96%,#002400 100%"]]

It also supports rgb and rgba color notation:

[[css_linear_gradient val='to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 79%,rgba(255,255,255,1) 100%']]

It takes the W3C standard notation for gradients.
The first item is the direction: "to bottom"|"to right"|"135deg"|"45deg"
The rest are color stops seperated by commas.

The output

This is an example of what it will produce in your CSS:

.foo {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA);/* ... [base64 string cut short] */
    background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-top(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);/*Opera 11.10+*/
    background: -ms-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
    background: linear-gradient(to bottom, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* W3C */

For IE9 it creates a base64 encoded SVG image.
I could have implemented the "filter:" property that IE8 and below support, but I chose not to do that in this UDT (though Colorzilla's gradient generator does use "filter:").
The CSS produced should be compatible with IE9+, FF3.6+, Chrome, Safari4+, Opera 11.10+