Code Couch » Graphical http://www.codecouch.com The ramblings of two code monkeys Mon, 09 Jan 2012 21:11:09 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 How do I display alpha transparent PNGs across all browsers? http://www.codecouch.com/2007/05/how-do-i-display-alpha-transparent-pngs-across-all-browsers/ http://www.codecouch.com/2007/05/how-do-i-display-alpha-transparent-pngs-across-all-browsers/#comments Sat, 05 May 2007 09:40:05 +0000 Jeff http://www.codecouch.com/?p=104 Update: This article was written when developers had to whip IE6 into shape. If you’re still coding for IE6, perhaps retraining as plumber might be more advisable? :-)

Many web developers have shunned the PNG image format in the past. For some this has been because of a perceived lack of support for alpha transparency (described formally as alpha compositing) in Internet Explorer. Here are some directions on how you can use alpha transparency successfully across all browsers – and specifically IE 6 for Windows.

The examples below rely on the following CSS code (described below):

<style type="text/css">
  #demo1 {
    width: 250px;
    height: 100px;
    background: url(images/logo.png) transparent 0 0 no-repeat;
  }
</style>
<!––[if lt IE 7]>
<style type="text/css">
  #demo1 {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
        (enabled=true,sizingMethod=scale,src=/images/logo.png);
  }
</style>
<![endif]––>

The first block of CSS sets a background image on an element with the id “demo1″ (typically a div, span or img) for all browsers. This works fine for everything else, but doesn’t work with IE prior to version 7.

The second block targets just these “broken” browsers through use of a conditional comment. This second block uses the filter property to set up a proper alpha transparent version of the png. Read more about this here at the MSDN site.

In the following example the CSS above would show the logo.png with alpha transparency as the background to a div:

<div id="demo1"></div>

This next example shows that you can display a png with alpha transparency by targetting a transparent image:

<img src="transparent.gif" id="demo1" alt=""/>

There are plenty of variations of this technique. All the examples above are considered “standards friendly”. This final example shows the same CSS simplified (but not passing validation):

<style type="text/css">
  #demo1 {
    width: 250px;
    height: 100px;
    background: url(images/logo.png) transparent 0 0 no-repeat;
    _background-image: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
        (enabled=true,sizingMethod=scale,src=/images/logo.png);
  }
</style>

If you are putting the CSS above into an external stylesheet, then be aware that the path to the logo.png when used as the background image is relative to the CSS file, but the path to logo.png when used in the filter is relative to the enclosing HTML file. This can cause some confusion.

On a related note… you should always ensure your alpha transparent PNGs are 32-bit to ensure that they always display the same colour across all browsers (specifically Firefox and IE displayed a 24-bit alpha transparent PNG differently using the technique described here – changing it to 32-bit confirmed this was the case).

Post to Twitter

]]> http://www.codecouch.com/2007/05/how-do-i-display-alpha-transparent-pngs-across-all-browsers/feed/ 0 Creating a coloured gradient background without images http://www.codecouch.com/2006/05/creating-a-coloured-gradient-background-without-images/ http://www.codecouch.com/2006/05/creating-a-coloured-gradient-background-without-images/#comments Wed, 03 May 2006 10:33:23 +0000 Dan http://www.codecouch.com/?p=97 Update: This article was written long before CSS gradient support was widespread. I’d strongly advise using CSS to create gradients in an modern web browswer!

Here’s some code to dynamically create a gradient background without using images. The width and/or height of each colour band, as well as the total number of colour bands can be easily changed.

You can use “createGradientV” to create a vertical gradient (North to South), or “createGradientH” to create a horizontal gradient (West to East). Each of the functions takes one or more sets of 4 parameters, documented in the code.

To add more colour bands, simply add more sets of parameters to the relevant “createGradient” method calls.

This code has been tested working on IE/Win 6, NN/Win 7, Opera/Win 7, FF/Win, FF/Mac, and Safari/Mac. It does NOT work on IE/Mac (tested on version 5.22).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="content-language" content="en" />
    <title>Gradient Background</title>
 
    <style type="text/css">
        body {
            padding: 0px;
            margin: 20px;
            background-color: #00CCFF;
        }
 
        #fadeBandsV {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 80px;
            z-index: 1;
        }
 
        #fadeBandsH {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            z-index: 1;
        }
 
        #fadeBandsV div {
            overflow: hidden;
            position: absolute;
            width: 100%;
        }
 
        #fadeBandsH div {
            overflow: hidden;
            position: absolute;
            height: 200px;
        }
 
        #pageContent {
            position: relative;
            z-index: 2;
        }
    </style>
 
    <script type="text/javascript">
    <!--
 
        // do not call this function directly - use createGradientV or createGradientH instead
        function createGradient(direction, args) {
            var bandSets = args.length / 4;
            var startPos = 0;
 
            for (var bandSetLoop=0; bandSetLoop<bandSets; bandSetLoop++) {
                fadeFromColour = args[bandSetLoop * 4];
                fadeToColour = args[bandSetLoop * 4 + 1];
                bandSize = args[bandSetLoop * 4 + 2];
                fadeSteps = args[bandSetLoop * 4 + 3];
 
                // calculate stepped colour values for each band
                var colourSteps = [fadeFromColour.concat()];                // ensure first colour is the start colour
                for (var bandLoop=1; bandLoop<fadeSteps; bandLoop++) {
                    colourSteps[bandLoop] = [];
                    for (var rgbLoop=0; rgbLoop<3; rgbLoop++) {
                        colourSteps[bandLoop][rgbLoop] = Math.round(colourSteps[bandLoop-1][rgbLoop] + ((fadeToColour[rgbLoop] - colourSteps[bandLoop-1][rgbLoop]) / (fadeSteps - bandLoop)));
                    }
                }
 
                // now draw each band
                if (direction == 'V') {
                    for (var bandLoop=0; bandLoop<fadeSteps; bandLoop++) {
                        document.getElementById('fadeBandsV').appendChild(aDiv = document.createElement('div'));
                        aDiv.style.height = bandSize + 'px';
                        aDiv.style.top = startPos + (bandSize * bandLoop) + 'px';
                        aDiv.style.backgroundColor = 'rgb(' + colourSteps[bandLoop][0] + ',' + colourSteps[bandLoop][1] + ',' + colourSteps[bandLoop][2] + ')';
                    }
                } else {
                    for (var bandLoop=0; bandLoop<fadeSteps; bandLoop++) {
                        document.getElementById('fadeBandsH').appendChild(aDiv = document.createElement('div'));
                        aDiv.style.width = bandSize + 'px';
                        aDiv.style.left = startPos + (bandSize * bandLoop) + 'px';
                        aDiv.style.backgroundColor = 'rgb(' + colourSteps[bandLoop][0] + ',' + colourSteps[bandLoop][1] + ',' + colourSteps[bandLoop][2] + ')';
                    }
                }
                startPos += fadeSteps * bandSize;
            }
        }
 
        // createGradientV - creates a vertical gradient (North to South)
        // Parameters: createGradientV takes a single set, or multiple sets of, 4 arguments:
        //         argument 1: fadeFromColour = an array of R,G,B colours to fade from (for example, [0, 0, 255] == #0000FF)
        //         argument 2: fadeToColour = an array of R,G,B colours to fade to (for example, [0, 204, 255] == #00CCFF)
        //         argument 3: bandHeight = height of each colour band
        //         argument 4: fadeSteps = number of colour bands used for the gradient (should be at least 2)
        function createGradientV() {
            if (arguments.length < 1 || arguments.length % 4 != 0) {
                alert('Incorrect usage. Number of parameters must be a multiple of 4!');
                return;
            }
            createGradient('V', arguments);
        }
 
        // createGradientH - creates a horizontal gradient (West to East)
        // Parameters: createGradientH takes a single set, or multiple sets of, 4 arguments:
        //         argument 1: fadeFromColour = an array of R,G,B colours to fade from (for example, [0, 0, 255] == #0000FF)
        //         argument 2: fadeToColour = an array of R,G,B colours to fade to (for example, [0, 204, 255] == #00CCFF)
        //         argument 3: bandHeight = height of each colour band
        //         argument 4: fadeSteps = number of colour bands used for the gradient (should be at least 2)
        function createGradientH() {
            if (arguments.length < 1 || arguments.length % 4 != 0) {
                alert('Incorrect usage. Number of parameters must be a multiple of 4!');
                return;
            }
            createGradient('H', arguments);
        }
 
        function drawGradient() {
            createGradientV([255, 0, 0], [255, 255, 0], 3, 50, [255, 255, 0], [0, 0, 255], 3, 50, [0, 0, 255], [0, 204, 255], 3, 50);
            createGradientH([255, 0, 0], [255, 255, 255], 3, 50, [255, 255, 255], [0, 0, 255], 3, 50);
        }
 
    //-->
    </script>
</head>
 
<body onload="drawGradient();">
    <div id="fadeBandsV"></div>
    <div id="fadeBandsH"></div>
    <div id="pageContent">
        <h1>A test heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras lorem. Proin laoreet fringilla sem. Pellentesque malesuada, urna tristique ornare feugiat, turpis wisi ultrices nisl, ac vulputate dolor justo non sapien. Sed fermentum velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at nulla. Maecenas tortor nulla, adipiscing eget, auctor sed, cursus id, quam. Suspendisse at sem nonummy orci lobortis ultrices. Proin odio est, dictum id, dictum nec, ullamcorper sit amet, sem. Proin ullamcorper lacus vitae risus. Nulla feugiat posuere erat. In nec est ac eros lacinia congue. Suspendisse potenti. In a ipsum rhoncus ipsum volutpat consectetuer.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras lorem. Proin laoreet fringilla sem. Pellentesque malesuada, urna tristique ornare feugiat, turpis wisi ultrices nisl, ac vulputate dolor justo non sapien. Sed fermentum velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at nulla. Maecenas tortor nulla, adipiscing eget, auctor sed, cursus id, quam. Suspendisse at sem nonummy orci lobortis ultrices. Proin odio est, dictum id, dictum nec, ullamcorper sit amet, sem. Proin ullamcorper lacus vitae risus. Nulla feugiat posuere erat. In nec est ac eros lacinia congue. Suspendisse potenti. In a ipsum rhoncus ipsum volutpat consectetuer.</p>
    </div>
</body>
</html>

Post to Twitter

]]> http://www.codecouch.com/2006/05/creating-a-coloured-gradient-background-without-images/feed/ 0