Apparently this is old news. Two-year-old news. I’m working on an iPhone-optimized website for a client and this was a big help, so I thought I’d pass it on. It all starts with CSS3 (Safari 3/webkit only):
-webkit-border-image
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.
This goes very nicely with the iPhone GUI PSD.
No comments
Jump to comment form | Comments RSS | Trackback URI