First, here is the amazing button that we want to create:

Its active state will be triggered on either mouseDown or a touch event (for iOS and Android devices, say). In that case, we want the colors to change as shown:

Of course, ideally we could create this button using pure CSS styles, like border-radius and box-shadow, or with SVG vector art. But let’s say that for whatever reason, this button has visual elements that can’t be created 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 property lets us specify an image to stretch to fit our button, no matter how wide or tall it becomes. Usually, border-image is used with an image like this:

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

#buttonElement {

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

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

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

{

This should grab 18 pixels from either side of the image and stretch it to fit. Of course, we’d then have to overlay the button text on top of this background. (I always specify both the “official” CSS3 property, plus the Mozilla and Webkit derivations. For clarity, I’ll omit the latter two below.)

The old-fashioned way to create the button’s active state is to generate a second PNG:

…and style it with more CSS. Note that we’ve added the .pressed class, and we’re now referencing a different PNG:

#buttonElement.pressed {

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

{

You would then use JavaScript/jQuery/etc. to add the .pressed class to #buttonElement whenever it is clicked or tapped.

But by using the CSS sprites technique, we can include both button states in a single image. (This one is 40 pixels by 100.)

Then, we modify the border-image parameters to reference different parts of our sprite image, depending on the button state:

#buttonElement {

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

{

#buttonElement.pressed {

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

{

See those “50” values? They are the key to shifting the border-image reference up and down, as needed.

Now isn’t that better? Just one image means fewer network requests, plus the button’s active state is already preloaded into memory — no need for extra weird JavaScript!

Dynamic Systems of Engagement by Scott Murray

• Event invitations are most likely to be accepted for a Tuesday at 3pm.
• …on average only three or four people out of ten will be available at any given time.

For more, download the full paper.

My thesis projects, Practice and Cheeky, will both be featured this Saturday at Alchemy, the annual interactive art party. Hope you can make it!

I’ll be teaching another workshop on creative coding at the end of the month! Join us, and learn to use Processing to create your own interactive, digital art. Details at gaffta.org.

Practice, my MFA thesis project, will be set up for you to explore this Friday in the Mission District of San Francisco.

Practice is both a work of interactive video art and a design research project.

Unlike most other works of this medium, it does not reward bodily motion and exaggerated gestures, but encourages patience and self-reflection. In so doing, it explores the tension between emotional engagement and the uncomfortable ambiguity of not knowing what will happen next.

Friday, February 12

About 9:00 – 11:00pm

16th St. and Guerrero St., NE corner (Map)

In the event of rain, the piece will be installed the next night, Saturday, 2/13.