Much has been writ­ten about CSS sprites, but less so about CSS3’s border-image. I wanted to use the two together to pro­duce beau­ti­ful, scal­able but­tons that use only one image for both nor­mal and active (e.g. clicked) states. I couldn’t find any­one else online using this approach yet, so I doc­u­mented my exper­i­ments here.

Update on Jan, 5 2011: Corrected code typos and added a live demo page. Corrected some curly braces that were point­ing the wrong way, and updated ven­dor pre­fix prop­erty ref­er­ences, so -webkit and -moz are listed before the non-prefixed property.

First, here is the amaz­ing but­ton that we want to create:

Its active state will be trig­gered on either mouse­Down or a touch event (for iOS and Android devices, say). In that case, we want the col­ors to change as shown:

Of course, ide­ally we could cre­ate this but­ton using pure CSS styles, like border-radius and box-shadow, or with SVG vec­tor art. But let’s say that for what­ever rea­son, this but­ton has visual ele­ments that can’t be cre­ated with CSS alone, and we have to use a bitmap image. (All images on this page are PNGs with alpha transparency.)

CSS3’s new border-image prop­erty lets us spec­ify an image to stretch to fit our but­ton, no mat­ter how wide or tall it becomes. Usually, border-image is used with an image like this:

This image is 40 pix­els wide by 50 tall. So we could use this CSS:

#buttonElement {

-webkit-border-image: url(../images/button.png) 0 18 0 18;

-moz-border-image: url(../images/button.png) 0 18 0 18;

border-image: url(../images/button.png) 0 18 0 18;

}

This should grab 18 pix­els from either side of the image and stretch it to fit. Of course, we’d then have to over­lay the but­ton text on top of this back­ground. (Be sure to spec­ify the vendor-specific pre­fixed prop­er­ties first. For clar­ity, I’ll omit the ven­dor pre­fixes below.)

The old-fashioned way to cre­ate the button’s active state is to gen­er­ate a sec­ond PNG:

…and style it with more CSS. Note that we’ve added the .pressed class, and we’re now ref­er­enc­ing a dif­fer­ent PNG:

#buttonElement:active {

border-image: url(../images/button_active.png) 0 18 0 18;

}

You would then use JavaScript/jQuery/etc. to add the .pressed class to #but­tonEle­ment when­ever it is clicked or tapped.

But by using the CSS sprites tech­nique, we can include both but­ton states in a sin­gle image. (This one is 40 pix­els by 100.)

Then, we mod­ify the border-image para­me­ters to ref­er­ence dif­fer­ent parts of our sprite image, depend­ing on the but­ton state:

#buttonElement {

border-image: url(../images/button_sprite.png) 0 18 50 18;

}

#buttonElement:active {

border-image: url(../images/button_sprite.png) 50 18 0 18;

}

See those “50” val­ues? They are the key to shift­ing the border-image ref­er­ence up and down, as needed.

See the live demo!

Now isn’t that bet­ter? Just one image means fewer net­work requests, plus the button’s active state is already pre­loaded into mem­ory — no need for extra weird JavaScript!

When is Good is one of my all-time favorite web tools, mak­ing it super easy to find a good time to sched­ule a group meet­ing. They pub­lished a fas­ci­nat­ing paper last year, shar­ing the most inter­est­ing find­ings from the aggre­gate data of user’s sched­ules, including:

• Event invi­ta­tions are most likely to be accepted for a Tuesday at 3pm.
• …on aver­age only three or four peo­ple out of ten will be avail­able at any given time.

For more, down­load the full paper.

I’m sure every­one and their moth­ers have already blogged this, but here are the lin­ger­ing ques­tions I have fol­low­ing today’s WWDC keynote:

• A new remote “erase” fea­ture was alluded to dur­ing the enter­prise por­tion of the pre­sen­ta­tion. How will this work, and who con­trols it? If I’m late pay­ing my AT&T bill, try to break my con­tract, or try to unlock the phone for use with another car­rier, will the phone self-destruct?

• Apple announced a new push noti­fi­ca­tion ser­vice for devel­oper use, but I’m guess­ing it ain’t free. How much will it cost, and who can use it? Will small, inde­pen­dent devel­op­ers be priced out of the pic­ture? And is it part of the new Mobile Me ser­vice, or can it oper­ate on its own, serv­ing users who don’t have $99/year Mobile Me accounts?

• How much will my monthly 3G phone bill cost? (More, presumably.)

• Is 3G ser­vice even avail­able in my area? How can I find out before pur­chas­ing a new phone?

• Will Mobile Me’s push email ser­vice work only with me.com email accounts? (I’m guess­ing yes, which means I wouldn’t be able to use it with alignedleft.com.)

• How does the new Mail app’s UI for multiple-message delete/move work? This is new func­tion­al­ity for iPhone, but it won’t be use­ful unless it’s also usable.

• Same ques­tion for the mul­ti­ple lan­guage sup­port: How does the UI work for switch­ing languages/keyboards? And can the hand­writ­ing recog­ni­tion used for Chinese char­ac­ter input be expanded for use with other alphabets?

Also, Jobs men­tioned that the audio qual­ity had been improved sig­nif­i­cantly. It will be inter­est­ing to hear if that’s really the case.

Update: I also want to add one obser­va­tion that I haven’t seen made else­where yet:

• It looks like iPhone 2.0 sup­ports mul­ti­ple iCal cal­en­dars, which was not men­tioned in the keynote (nor on Apple’s site). This will be great, as it brings my iPhone cal­en­dar more in line, visu­ally, with my desk­top iCal cal­en­dar. (I hope this also elim­i­nates the bug/feature of hav­ing new events entered on the phone sync unpre­dictably into the last cal­en­dar in iCal’s list.)