Replicating iPhone Buttons the ‘-webkit’ way!
By Matthew KrivanekAfter getting a hold of the iPhone’s original UI images (links can be found in this thread and special thanks to Kai Cherry for finding them!), I noticed a technique Apple is using to create their buttons. It seems they are placing an entire button into one PNG, then scaling the middle of the image so that the corners of the button are not distorted.
So for example, the image to the right is an original image from the iPhone. Its width is 29px. That breaks down to there being 14px on the left and right, defining the rounded corners and a 1px sliver which is the body of the button. So, in theory, if you were able to keep the left and right sides of the button stationary while expanding the 1px center piece, this would create a horizontally-scalable button with only one image.
But alas, how would we do this using only CSS? Well, I started digging around Safari’s ‘-webkit’ innards, and was able to to use the -webkit-border-image to accomplish exactly what I wanted.
