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!

• 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.

• A new remote “erase” feature was alluded to during the enterprise portion of the presentation. How will this work, and who controls it? If I’m late paying my AT&T bill, try to break my contract, or try to unlock the phone for use with another carrier, will the phone self-destruct?

• Apple announced a new push notification service for developer use, but I’m guessing it ain’t free. How much will it cost, and who can use it? Will small, independent developers be priced out of the picture? And is it part of the new Mobile Me service, or can it operate on its own, serving users who don’t have $99/year Mobile Me accounts?

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

• Is 3G service even available in my area? How can I find out before purchasing a new phone?

• Will Mobile Me’s push email service work only with me.com email accounts? (I’m guessing 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 functionality for iPhone, but it won’t be useful unless it’s also usable.

• Same question for the multiple language support: How does the UI work for switching languages/keyboards? And can the handwriting recognition used for Chinese character input be expanded for use with other alphabets?

Also, Jobs mentioned that the audio quality had been improved significantly. It will be interesting to hear if that’s really the case.

Update: I also want to add one observation that I haven’t seen made elsewhere yet:

• It looks like iPhone 2.0 supports multiple iCal calendars, which was not mentioned in the keynote (nor on Apple’s site). This will be great, as it brings my iPhone calendar more in line, visually, with my desktop iCal calendar. (I hope this also eliminates the bug/feature of having new events entered on the phone sync unpredictably into the last calendar in iCal’s list.)