Gradients are pretty dicey at best, since support for them varies from browser to browser and version to version.
Here's an approach to incorporating a diagonal page background into my pages and allow admins to change the colors from
the CMSB interface.
You can examine and modify the process with two tools. The Ultimate Gradient Generator at
http://www.colorzilla.com/gradient-editor/ to generate any new style of gradient you want to create, and the base64
coder/decoder at http://www.base64decode.org/
There are lots of pitfalls in this concept.
IE9 doesn't support CSS Gradients and so you must use a base64 SVG to generate a background gradient image to display.
Fortunately there's a php function called base64_encode that makes it possible to do this on the fly from values in your
database.
If IE is in" Compatibility" mode your gradient won't display correctly and fill the entire screen . Fortunately you can
add this as the first line in the head of your viewer to force IE not to enter compatibility mode.
<meta http-equiv="X-UA-Compatible" content="IE=8;IE=9" />
There's more in articles at: http://www.alistapart.com/articles/beyonddoctype and http://hsivonen.iki.fi/doctype/
Some older versions of browser/OS combinations don't work well with this code (***Still looking for identification and
solutions for these.***)
I found that to get the gradients to cover the full screen, without repeats, I needed to make the following additions to
my CSS style sheet:
html {
height: 100%;
In order to allow clients to change the colors of my diagonal gradient I created 3 text fields in a single record editor
called "Common Information" for the Upper left (darkest), Lower Left (middle) and Lower right (lightest) colors and I
inserted the following code in my body CSS in place of the Gradient Generator code :
<!-- three variables to use in the svg conversion -->
<?php $lightest = $common_informationRecord['lightest_background_gradient_color']; ?>
<?php $middle = $common_informationRecord['middle_background_gradient_color']; ?>
<?php $darkest = $common_informationRecord['darkest_background_gradient_color']; ?>
<!-- The Ascii version of the SVG code iIncluding the variables -->
<?php
$str = '<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#'.$darkest.'" stop-opacity="1"/>
<stop offset="0%" stop-color="#'.$darkest.'" stop-opacity="1"/>
<stop offset="100%" stop-color="#'.$middle.'" stop-opacity="1"/>
<stop offset="100%" stop-color="#'.$darkest.'" stop-opacity="1"/>
</linearGradient>
<rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
</svg>';
?>
body {
background: url(data:image/svg+xml;base64,<?php echo base64_encode($str)?>);
background: -moz-linear-gradient(-45deg, #<?php echo $common_informationRecord['middle_background_gradient_color']; ?>
0%, #<?php echo $common_informationRecord['darkest_background_gradient_color']; ?> 0%, #<?php echo
$common_informationRecord['lightest_background_gradient_color']; ?> 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#<?php echo
$common_informationRecord['middle_background_gradient_color']; ?>), color-stop(0%,#<?php echo
$common_informationRecord['darkest_background_gradient_color']; ?>), color-stop(100%,#<?php echo
$common_informationRecord['lightest_background_gradient_color']; ?>));
background: -webkit-linear-gradient(-45deg, #<?php echo $common_informationRecord['middle_background_gradient_color'];
?> 0%,#<?php echo $common_informationRecord['darkest_background_gradient_color']; ?> 0%,#<?php echo
$common_informationRecord['lightest_background_gradient_color']; ?> 100%);
background: -o-linear-gradient(-45deg, #bf6e4e 0%,#<?php echo
$common_informationRecord['darkest_background_gradient_color']; ?> 0%,#<?php echo
$common_informationRecord['lightest_background_gradient_color']; ?> 100%);
background: -ms-linear-gradient(-45deg, #<?php echo $common_informationRecord['middle_background_gradient_color']; ?>
0%,#<?php echo $common_informationRecord['darkest_background_gradient_color']; ?> 0%,#<?php echo
$common_informationRecord['lightest_background_gradient_color']; ?> 100%);
background: linear-gradient(135deg, #<?php echo $common_informationRecord['middle_background_gradient_color']; ?>
0%,#<?php echo $common_informationRecord['darkest_background_gradient_color']; ?> 0%,#<?php echo
$common_informationRecord['lightest_background_gradient_color']; ?> 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#<?php echo
$common_informationRecord['darkest_background_gradient_color']; ?>', endColorstr='#<?php echo
$common_informationRecord['lightest_background_gradient_color']; ?>',GradientType=1 );
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#<?php echo
$common_informationRecord['darkest_background_gradient_color']; ?>', endColorstr='#<?php echo
$common_informationRecord['lightest_background_gradient_color']; ?>')";
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
To accommodate IE9, I also inserted the following in the head of each of my viewers and added the class="gradient" to my
body tag:
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
To temporarily display a solid color background in IE until the "fix" is in (***solved with the compatibility mode
switch above***), I added this to each of my viewers as well:
<!--[if lte IE 8]>
<style type="text/css">
body{
background: #<?php echo $common_informationRecord['ie_page_background_color'] ?>;
}
.gradient {
filter: none;
}
</style>
<![endif]-->
|
