inkscape -d 300 -D -z -e moments.png -b '#FFFFFF' moments.pdf

bash

1

convert pdf to png with a background color at 300 dpi

inkscape -d 300 -D -z -e moments.png -b '#FFFFFF' moments.pdf

copy | embed

• image, 
• inkscape, 
• pdf, 
• png, 
• rastor, 
• vector

convert PFS0481.png -density 300 -units PixelsPerInch PFS0481_300dpi.tif

bash

1

Convert from PNG to TIFF and change density

convert PFS0481.png -density 300 -units PixelsPerInch PFS0481_300dpi.tif

copy | embed

• bash, 
• convert, 
• density, 
• imagemagick, 
• png, 
• tiff

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/to/image.png', sizingMethod='image');

css

1

fixing ie png alpha issue

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/to/image.png', sizingMethod='image');

copy | embed

• alpha, 
• ie, 
• ie6, 
• png

<?php
/*****************************************************************
 * Script for automatic generation of one pixel
 * alpha-transparent images for non-RGBA browsers.
 * @author Lea Verou
 * @version 1.0 beta
 * Licensed under a MIT license
 *****************************************************************/

######## SETTINGS ##############################################################

/**
 * Enter the directory in which to store cached color images.
 * This should be relative and SHOULD contain a trailing slash.
 * The directory you specify should exist and be writeable (CHMOD 666 or 777).
 * If you want to store the pngs at the same directory, leave blank ('').
 */
define('COLORDIR', 'rgba/');


/**
 * If you requently use a color with varying alphas, you can name it
 * below, to save you some typing and make your CSS easier to read.
 */
$color_names = array(
	'white' => array(255,255,255),
	'black' => array(0,0,0)
	// , 'mycolor' => array(red value, green value, blue value)
);


/**
 * If you don't want the generated pngs to be stored in the server, set the following to
 * false. This is STRONGLY NOT RECOMMENDED. It's here only for testing/debugging purposes.
 */
define('CACHEPNGS', true);



######## NO FURTHER EDITING, UNLESS YOU REALLY KNOW WHAT YOU'RE DOING ##########

$dir = substr(COLORDIR,0,strlen(COLORDIR)-1);
if(!is_writable($dir))
{
	die("The directory '$dir' either doesn't exist or isn't writable.");
}

$rgb = $color_names[$_GET['name']];

$red	= is_array($rgb)? $rgb[0] : intval($_GET['r']);
$green	= is_array($rgb)? $rgb[1] : intval($_GET['g']);
$blue	= is_array($rgb)? $rgb[2] : intval($_GET['b']);
$alphaurl = $_GET['a'];

// "A value between 0 and 127. 0 indicates completely opaque while 127 indicates completely transparent."
// http://www.php.net/manual/en/function.imagecolorallocatealpha.php
$alpha = intval(127 - 127 * ($alphaurl / 100));

// Does it already exist?
$filepath = COLORDIR . "r{$red}_g{$green}_b{$blue}_a{$alphaurl}.png";

if(/*CACHEPNGS and */file_exists($filepath))
{
$url = "http://{$_SERVER['HTTP_HOST']}/{$filepath}";
header("Status: 301");
die(header("Location: {$url}"));
}
else
{
	// Send headers
header('Content-Type: image/png');
header("Expires: ".gmdate("D, d M Y H:i:s", strtotime('+5 years'))." GMT"); 


	$img = @imagecreatetruecolor(1,1) or die('Cannot Initialize new GD image stream');
	
	// This is to allow the final image to have actual transparency
	// http://www.php.net/manual/en/function.imagesavealpha.php
	imagealphablending($img, false);
	imagesavealpha($img, true);
	
	// Allocate our requested color
	$color = imagecolorallocatealpha($img, $red, $green, $blue, $alpha);
	
	// Fill the image with it
	imagefill($img,0,0,$color);

    // Save the file
	imagepng($img,$filepath,0,NULL);
	
	// Serve the file
	imagepng($img);
	flush();
	
	// Free up memory
	imagedestroy($img);
}
?>

php

1

PNG transparent 1x1px generator

<?php
/*****************************************************************
 * Script for automatic generation of one pixel
 * alpha-transparent images for non-RGBA browsers.
 * @author Lea Verou
 * @version 1.0 beta
 * Licensed under a MIT license
 *****************************************************************/

######## SETTINGS ##############################################################

/**
 * Enter the directory in which to store cached color images.
 * This should be relative and SHOULD contain a trailing slash.
 * The directory you specify should exist and be writeable (CHMOD 666 or 777).
 * If you want to store the pngs at the same directory, leave blank ('').
 */
define('COLORDIR', 'rgba/');


/**
 * If you requently use a color with varying alphas, you can name it
 * below, to save you some typing and make your CSS easier to read.
 */
$color_names = array(
	'white' => array(255,255,255),
	'black' => array(0,0,0)
	// , 'mycolor' => array(red value, green value, blue value)
);


/**
 * If you don't want the generated pngs to be stored in the server, set the following to
 * false. This is STRONGLY NOT RECOMMENDED. It's here only for testing/debugging purposes.
 */
define('CACHEPNGS', true);



######## NO FURTHER EDITING, UNLESS YOU REALLY KNOW WHAT YOU'RE DOING ##########

$dir = substr(COLORDIR,0,strlen(COLORDIR)-1);
if(!is_writable($dir))
{
	die("The directory '$dir' either doesn't exist or isn't writable.");
}

$rgb = $color_names[$_GET['name']];

$red	= is_array($rgb)? $rgb[0] : intval($_GET['r']);
$green	= is_array($rgb)? $rgb[1] : intval($_GET['g']);
$blue	= is_array($rgb)? $rgb[2] : intval($_GET['b']);
$alphaurl = $_GET['a'];

// "A value between 0 and 127. 0 indicates completely opaque while 127 indicates completely transparent."
// http://www.php.net/manual/en/function.imagecolorallocatealpha.php
$alpha = intval(127 - 127 * ($alphaurl / 100));

// Does it already exist?
$filepath = COLORDIR . "r{$red}_g{$green}_b{$blue}_a{$alphaurl}.png";

if(/*CACHEPNGS and */file_exists($filepath))
{
$url = "http://{$_SERVER['HTTP_HOST']}/{$filepath}";
header("Status: 301");
die(header("Location: {$url}"));
}
else
{
	// Send headers
header('Content-Type: image/png');
header("Expires: ".gmdate("D, d M Y H:i:s", strtotime('+5 years'))." GMT"); 


	$img = @imagecreatetruecolor(1,1) or die('Cannot Initialize new GD image stream');
	
	// This is to allow the final image to have actual transparency
	// http://www.php.net/manual/en/function.imagesavealpha.php
	imagealphablending($img, false);
	imagesavealpha($img, true);
	
	// Allocate our requested color
	$color = imagecolorallocatealpha($img, $red, $green, $blue, $alpha);
	
	// Fill the image with it
	imagefill($img,0,0,$color);

    // Save the file
	imagepng($img,$filepath,0,NULL);
	
	// Serve the file
	imagepng($img);
	flush();
	
	// Free up memory
	imagedestroy($img);
}
?>

copy | embed

• gd, 
• image, 
• img, 
• php, 
• png, 
• repeating, 
• tiles, 
• transparent

.transparent_class {  
     filter:alpha(opacity=50);  
     -moz-opacity:0.5;  
     -khtml-opacity: 0.5;  
     opacity: 0.5;  
} 

css

1

CSS Transparency Settings for All Browsers

.transparent_class {  
     filter:alpha(opacity=50);  
     -moz-opacity:0.5;  
     -khtml-opacity: 0.5;  
     opacity: 0.5;  
} 

copy | embed

• crossbrowser, 
• css, 
• png, 
• transparency

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Test Background PNG24</title>
        
        <style type="text/css">
        body {
            background          : url(immagine-test.jpg) top left no-repeat; 
            color               : #fff;
        }
        
        
        
        .overlay { 
            background-image	: url(bg30.png); 
            width               : 300px;
            height              : 200px;
        }
        </style>

        <!--[if lte IE 6]>
            <style type="text/css">
            .overlay {
                background-image	: url(bg100.gif);
                filter				: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bg30.png", sizingMethod="scale");
            }
        </style>
        <![endif]--> 
        
            
        
    </head>

<body>

    <div class="overlay">
    Prova testo su sfondo trasparente al 30%
    </div>

</body>
</html>

html

1

Semi-Transparent PNG on IE By Fabrizio Calderan

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Test Background PNG24</title>
        
        <style type="text/css">
        body {
            background          : url(immagine-test.jpg) top left no-repeat; 
            color               : #fff;
        }
        
        
        
        .overlay { 
            background-image	: url(bg30.png); 
            width               : 300px;
            height              : 200px;
        }
        </style>

        <!--[if lte IE 6]>
            <style type="text/css">
            .overlay {
                background-image	: url(bg100.gif);
                filter				: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bg30.png", sizingMethod="scale");
            }
        </style>
        <![endif]--> 
        
            
        
    </head>

<body>

    <div class="overlay">
    Prova testo su sfondo trasparente al 30%
    </div>

</body>
</html>

copy | embed

• ie, 
• png, 
• transparent

 background-image: url("trasparente.png")!important;
 background-image: none;
 filter: none !important;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagen/trasparente.png', sizingMethod='scale');

css

1

png ie6 hack

 background-image: url("trasparente.png")!important;
 background-image: none;
 filter: none !important;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagen/trasparente.png', sizingMethod='scale');

copy | embed

• css, 
• ie6, 
• png