I often need to write code like:

background: url("/media/img/footer.png") no-repeat;
width: 960px;
height: 147px;

Whenever I do, I have to find the image, then get the dimensions, then copy and paste them in separately. It’s annoying. To help, I put together this small tool, written in Python and using OSX’s pbcopy. You’ll need to tweak it if you are on a different platform.

I put this into a file called css-background in ~/bin, then ran chmod u+x to make it runnable. All the images I ever use are in /media/img, so you may need to change that if you do anything differently. At some point, I may update this to work out the filepath properly, but personally I don’t need it.

Go to the folder with the image in, and run

css-background image_name.png

After running it, the CSS code is in the clipboard ready to paste.

#!/usr/bin/python

import sys, os, argparse, StringIO, struct

def getImageInfo(data):

    # From http://code.google.com/p/bfg-pages/source/browse/trunk/pages/getimageinfo.py
    data = str(data)
    size = len(data)
    height = -1
    width = -1
    content_type = ''

    # handle GIFs
    if (size >= 10) and data[:6] in ('GIF87a', 'GIF89a'):
        # Check to see if content_type is correct
        content_type = 'image/gif'
        w, h = struct.unpack("= 24) and data.startswith('\211PNG\r\n\032\n')
          and (data[12:16] == 'IHDR')):
        content_type = 'image/png'
        w, h = struct.unpack(">LL", data[16:24])
        width = int(w)
        height = int(h)

    # Maybe this is for an older PNG version.
    elif (size >= 16) and data.startswith('\211PNG\r\n\032\n'):
        # Check to see if we have the right content type
        content_type = 'image/png'
        w, h = struct.unpack(">LL", data[8:16])
        width = int(w)
        height = int(h)

    # handle JPEGs
    elif (size >= 2) and data.startswith('\377\330'):
        content_type = 'image/jpeg'
        jpeg = StringIO.StringIO(data)
        jpeg.read(2)
        b = jpeg.read(1)
        try:
            while (b and ord(b) != 0xDA):
                while (ord(b) != 0xFF): b = jpeg.read(1)
                while (ord(b) == 0xFF): b = jpeg.read(1)
                if (ord(b) >= 0xC0 and ord(b) <= 0xC3):
                    jpeg.read(3)
                    h, w = struct.unpack(">HH", jpeg.read(4))
                    break
                else:
                    jpeg.read(int(struct.unpack(">H", jpeg.read(2))[0])-2)
                b = jpeg.read(1)
            width = int(w)
            height = int(h)
        except struct.error:
            pass
        except ValueError:
            pass

    return content_type, width, height

parser = argparse.ArgumentParser(description='Specify an image')
parser.add_argument('image', action="store", help='image to generate code for')
arguments = parser.parse_args()

f = open(arguments.image, 'r')

info = getImageInfo(f.read())

width = str(info[1])
height = str(info[2])

text = 'background: url("/media/img/'+arguments.image+'") no-repeat;\n'
text += 'width: '+width+'px;\n'
text += 'height: '+height+'px;'

outf = os.popen("pbcopy", "w")
outf.write(text)
outf.close()

Simple!

This requires you to use the amazing Modernizr library, or could be modified to use your own check for whether the browser supports CSS transitions. It’s rough and ready, but works fine as far as I know!

For lots more info and demos of transitions, have a look at my CSS3 transitions and transforms tutorial.

All this lot goes before your document ready section.

var speed = 500; // Default animation speed in milliseconds (1000 = 1 second)

var vP = "";
var transitionEnd = "TransitionEnd";
if ($.browser.webkit) {
	vP = "-webkit-";
	transitionEnd = "webkitTransitionEnd";
} else if ($.browser.msie) {
	vP = "-ms-";
} else if ($.browser.mozilla) {
	vP = "-moz-";
	transitionEnd = "transitionend";
} else if ($.browser.opera) {
	vP = "-o-";
	transitionEnd = "oTransitionEnd";
}

function animate2(object, cssProperties, callback, ms) {
	if (!ms) {
		ms = speed;
	}

	if (Modernizr.csstransitions) {
		object.css(vP+"transition", "all "+ms+"ms ease-in-out");

		object.css(cssProperties);

		if ($.isFunction(callback)) {
			object.bind(transitionEnd,function(){
			     object.unbind(transitionEnd);
			     callback();
			});
		}

	} else {
		if ($.isFunction(callback)) {
			object.animate(cssProperties, ms, callback);
		} else {
			object.animate(cssProperties, ms);
		}
	}
}

Then, the bit that runs once the DOM is built:

$(function(){
    // Simplest example. Animate the height of a box to 600px high.
    animate2($("#my_box"), {"height": 600});

    // More complex. Animate the height to 600px, and the left-margin to 100px with a callback.
    animate2($("#my_box"), {"height": 600, "margin-left": 10px}, function(){
         console.log("Animation finished");
    }, 1500);

});

Rather pleasant I feel. I’d really welcome suggestions for improvement, the idea is to provide a simple way to move things around using the best method possible.

I’ve just written a tutorial complete with demos showing how to use the CSS3 transition, transform and animation properties – find it here: CSS3 Transition, Transform and Animations Tutorial.

Hopefully it’s useful/interesting – any comments/improvements let me know!

It’s still a work in progress, so I’ll be adding to it over the next few weeks.