rgbapng - Compass plugin
rgbapng is a Compass plugin for providing cross browser compatible RGBA support. It works by creating single pixel transparent PNGs on the fly for browsers that don't support RGBA. It uses the pure Ruby ChunkyPNG library resulting in hassle-free installation and deployment, and increased performance.
Installation
Installation is simple via Ruby Gems. Compass and ChunkyPNG are required.
gem install compass-rgbapng
Using rgbapng with your Compass project
To use rgbapng with your project, require the plugin from your Compass configuration:
require "rgbapng"
And then import the mixins to your SASS/SCSS files:
@import "rgbapng";
Configurable variables
There is a single variable that defines the path to which your PNG images will be saved. This defaults to rgbapng
inside your Compass images directory. Change the path globally with:
$rgbapng_path: 'my_pngs';
Mixins
There are two mixins available to you.
rgba-background($color, [$path])
Sets the background property to use the RGBA value, falling back to the compiled PNG.
@include rgba-background(rgba(0,0,0,0.75));
Compiles to:
background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);
rgba-background-inline($color)
Sets the background property to use the RGBA value, falling back to a base64 encoded image data.
@include rgba-background-inline(rgba(0,0,0,0.75));
Compiles to:
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNh2A8AAM4AxOSyusMAAAAASUVORK5CYII=');
background: rgba(0, 0, 0, 0.75);
Functions
There are two Sass::Script
functions which can be used in your SASS:
# Creates the single pixel PNG image
# Returns a String of the image path and filename
png_pixelate(color, [dir])
# Returns a String of the base64 encoded image data
png_base64(color)
Credit where it's due
- The CSS technique used was initially described by Lea Verou in Bulletproof, cross-browser RGBA backgrounds, today.
- The SASS functions were first created by Benjamin Doherty using the RMagick library.
Copyright
Copyright (c) 2010 Aaron Russell. See LICENSE for details.