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.
The following is an example using only CSS & the whiteButton.png from above.
THE HTML:
<a href="#" class="button">Sample iPhone Button</a>
THE CSS:
a.button {
/* Default positioning of button */
display: block;
margin: 0 auto;
width: 250px; /* if no width was set, the button would
expand to the width of its parent */
text-align:center;
line-height: 46px; /* will keep the text vertically
centered on the 46px high button */
/* Font styling */
font-family: Helvetica;
font-weight: bold;
font-size: 20px;
text-decoration: none;
color: #000;
text-shadow: #fff 0px 1px 1px; /* slight white drop shadow */
/* Button image is 29px wide.
14px for the left part of the button
14px for the right
1px for the middle
*/
border-width: 0 14px 0 14px;
-webkit-border-image: url(images/whiteButton.png) 0 14 0 14;
}
Take a look. NOTE: Currently, this example only works in Safari 3 or the latest version of webkit.
Real-world Examples
I’ve created a couple of demo pages to show how the buttons can be reused. The styles have been organized with inheritance in mind so that we can produce several different styles of buttons buttons while using the same base of code.
THE HTML:
<div class="options-extend"> <a href="#" class="white button">Use As Wallpaper</a> <a href="#" class="white button">Email Photo</a> <a href="#" class="white button">Assign To Contact</a> <a href="#" class="last gray button">Cancel</a> </div>
THE CSS:
a.button {
/* Default positioning of button */
display: block;
margin: 0 auto;
text-align:center;
line-height: 46px; /* will keep the text vertically
centered on the 46px high button */
font-size: 20px;
/* Font styling */
font-family: Helvetica;
font-weight: bold;
text-decoration: none;
text-transform: capitalize;
/* Button image is 29px wide.
14px for the left part of the button
14px for the right
1px for the middle
*/
border-width: 0 14px 0 14px;
}
a.white.button {
color: #000;
text-shadow: #fff 0px 1px 1px;
-webkit-border-image: url(images/whiteButton.png) 0 14 0 14;
}
a.gray.button {
color: #fff;
text-shadow: #333 0px 1px 1px;
-webkit-border-image: url(images/grayButton.png) 0 14 0 14;
}
a.button:hover {
color: #fff;
text-shadow: #333 0px 1px 1px;
-webkit-border-image: url(images/blueButton.png) 0 14 0 14;
}
a.last.button {
margin-top: 10px;
}
div.options-extend {
padding: 20px 20px 15px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: url(images/options-extend.png) repeat-x top left;
}
Take a look. NOTE: Currently, this example only works in Safari 3 or the latest version of webkit.
Finally, here’s one more example using the same base of code with a couple of modified styles and HTML.
Why use only one image?
The main reason, in my book, is the EDGE network. Let’s face it, it’s slow. Really slow–and the less requests to the server, the better. Plus, combining the different elements of the image into one is a negligible difference in file size.
Conclusion
So, with the Safari we are able to use a single image to create horizontally dynamic buttons. I’m sure if I spent some more time with this, I might be able to produce them to be vertically dynamic as well.
Please leave your comments/suggestions and subscribe to our feed as we’ve got several other interesting how-tos on the way!
You say: “NOTE: Currently, this example only works in Safari.”
Should that be “Safari 3″? Since it actually looks wrong in the same way with Firefox as it does in Safari 2, but looks right with the Omniweb 5.6 I’m using which will have the newer webkit.
Hi Philip,
From the reading I had done, I assumed it would work in Safari 2, but I guess not. I’ll update the post. Thanks for the heads up!
[mk]
Your site’s design makes your code snippets unreadable on narrow (read: MacBook) screens as the column size is fixed and the sides eat too much space.
Sorry about that Pooch. We’re utilizing a pre-built Wordpress template for the time being while getting LaunchPad built. We should be updating the whole site’s design soon.
Very cool. Great information. I wonder how easy it will be to just place a button somewhere on a web page without of the absolute positioning? Imagine having 10 buttons on a pages. :o)
Awesome effect, just have to find something to use it for.
great, now we’re making the same mistakes again?
don’t use platform specific effects that only work on one browser/system.
don’t you remember where that lead us, when IE became big?
Er Flo, this is for the iPhone and iPhone apps. Where only 1 web browser is possible.
Flo, this is CSS3, see http://www.w3.org/TR/css3-background/#the-border-image
Currently the border-image property is only supported by WebKit browsers. So, to make use of it we must place the ‘-webkit-’ in front of it.
Nice tip. It’s just a shame we can’t get full CSS3 support quicker, because you could probably do this cross-browser with background-origin, background-position, background-size and a little sliding doors if they had it.
[…] read more | digg story Share This Sphere: Related Content […]
The webkit name space addition isn’t a mistake as Flo implies; It’s a requirement. None of CSS3 has become a “recommendation” so any actual implementation of it should have a namespace change in case something changes down the road.
The addition is to prevent problems of popular hacks becoming de facto standards when an experimental implementation becomes too widespread to actually change. Yes, if and when it’s adopted as a “recommendation” your CSS3 code will have to change, but until it actually becomes a recommendation using namespaces is the proper way to include CSS3.
Thanks, linked here! http://www.modmyiphone.com/forums/showthread.php?p=4936#post4936
This is a great bit of info.
Opera 9.5 (first weekly in a few weeks) will have FULL CSS3 support, so you should maybe remove “-webkit-”
Flo got pwnt!
[…] scalable buttons composed from a single image. This technique is covered in great detail in an article by Matthew Krivanek, where the performance benefit of the approach (fewer network round trips, our First Principle of […]
This post really needs a “more” tag in it. The length of this post makes it time consuming to attempt to read previous posts. Just a tip.
Good article, I’m seeing more and more sites use this method (not the same implementation, but breaking the multiple parts up into one)
“Opera 9.5 (first weekly in a few weeks) will have FULL CSS3 support, so you should maybe remove “-webkit-””
CSS3 is a large multi-part specification, and is nowhere near entirely finished (only certain parts are).
I doubt W3C and Opera will have it finished and implemented without major bugs in a few weeks.
[…] Replicating iPhone Buttons the ‘-webkit’ way! at LaunchPad Blog Making managing, launching and discovering new iPhone web apps simple and fun. (tags: CSS design development internet iPhone iPod mobile Safari web WebDesign WebDev work webkit) Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. […]
[…] Replicating iPhone Buttons the ‘-webkit’ way! at LaunchPad Blog 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. (tags: safari css html technique) […]
[…] Creating iPhone buttons Good to add to the bag of tricks. […]
I didn’t think :hover worked on iPhone…
Just a quick note: Ryan Schroeder is correct that :hover doesn’t work on the iPhone’s version of MobileSafari.
However, everything else is peachy. Thanks for this awesome work.
As others have mentioned, border-image is CSS3 and not Safari specific, even if it WebKit is the only rendering engine that supports it currently. Although the -webkit- prefix is required currently, I’d recommend also including the declaration without the prefix. This is because there will be a time when other browsers will support this, and not including it will mean those browsers won’t work with your pages even though they support border images. Opera sees this quite a bit with sites that use -moz-opacity and -webkit-opacity, and doesn’t give opacity, so Opera doesn’t get the correct style. Although you say these examples are just for the iPhone, Opera Mini and Opera Mobile support much of the same technologies that Safari does, and should be able to display the same pages and apps. The mobile web is cross browser after all, and not Apple vendor specific. Just designing for iPhone is sending the web backwards to the just-IE desktop days. Opera Mini does have some drawbacks for webapps in that i doesn’t support Ajax, but Opera Mobile will support this just fine.
To respond to a previous comment, Opera Kestrel will not support full CSS3 as this would be impossible. We are working hard on CSS3 however, and well as many other things like SVG.
@ Ryan & Kristofer,
Actually, it’s not so much that :hover doesn’t work at all on the iPhone and more that it doesn’t work in the traditional sense of the :hover state.
If you pull up this example (http://www.launchpadhq.com/examples/picture-options.html) in the iPhone you’ll note that the “hover” state does not activate until the finger is released from the touchpad. Stranger, it leaves the link in a hovered state until another link is clicked on…
So, while this technique is not fully desired, you’re able to accomplish a sort of on-click styling, which to me is more interactive than no styling at all.
You can read more about this approach here: http://www.launchpadhq.com/blog/2007/07/03/active-vs-hover/
Great stuff Matthew! Now I have to come up with an iPhone app so I can use these buttons!
[…] Replicating iPhone Buttons the ‘-webkit’ way! at LaunchPad Blog (tags: iphone css safari) […]
[…] - Replicating the iPhone, the webkit way How to use one background image to create dynamic, scaling buttons for the iPhone in […]
[…] Trend. iPhone-Schaltflächen. So baut man sie nach (funktiniert momentan nur mit Safari/Webkit): Replicating iPhone Buttons the ‘-webkit’ way! Tags: CSS, Tips « News-Websites […]
[…] (intel Mac only) [hacktheiphone.com] HowTo: Send MMS messages on iPhone [hacktech.wordpress.com] HowTo: Replicate iPhone Buttons the ‘-webkit’ way [launchpadhq.com] HowTo: 17 vigorous bookmarklets […]
[…] (intel Mac only) [hacktheiphone.com] HowTo: Send MMS messages on iPhone [hacktech.wordpress.com] HowTo: Replicate iPhone Buttons the ‘-webkit’ way [launchpadhq.com] HowTo: 17 powerful bookmarklets […]
[…] (intel Mac only) [hacktheiphone.com] HowTo: Send MMS messages on iPhone [hacktech.wordpress.com] HowTo: Replicate iPhone Buttons the ‘-webkit’ way [launchpadhq.com] HowTo: 17 powerful bookmarklets […]
[…] (intel Mac only) [hacktheiphone.com] HowTo: Send MMS messages on iPhone [hacktech.wordpress.com] HowTo: Replicate iPhone Buttons the ‘-webkit’ way [launchpadhq.com] HowTo: 17 powerful bookmarklets […]
I am confused about one thing. How does the 1 pixel between the two end pieces get applied? I see it work but I can’t understand why it works. An explaination would be appreciated.
I knew I loved this tid bit the second I read it, and I put it to use within the hour. But I found the size of the original button to be HUGE when incorporated into the small type design of my site. Far bigger than needed for nimble fingers.
So did a quick reworking of the whiteButton.png file to make it just 32 pixels high, tweaked the .css code to match the new height, and reduced the text size also. The result is a pretty little button that still feels like it belongs in the family. It’s not an “app” by any means, just an iPhone specific bit of design that I’m quite happy with. Feel free to check it out here if you’re interested: http://www.tobywilkins.com
I’m open to advice for other/better ways to incorporate quicktime movies if anyone has any tricks to return the user to the main page when they click DONE after viewing a movie… that would be cool.
You can grab the new button art here if you like: http://www.tobywilkins.com/images/whiteButton_sm.png
The button itself is 32 pixel high with a little padding on the top and bottom (3 + 3) to give it little breathing room when used in close proximity to other type/graphics.
Thanks for the invaluable info, I can’t wait to see your app.
Toby.
[…] read more | digg story […]
[…] read more | digg story […]
[…] read more | digg story […]
[…] (intel Mac only) [hacktheiphone.com] HowTo: Send MMS messages on iPhone [hacktech.wordpress.com] HowTo: Replicate iPhone Buttons the ‘-webkit’ way [launchpadhq.com] HowTo: 17 vigorous bookmarklets […]
Listen. Do not have an opinion while you listen because frankly, your opinion doesn?t hold much water outside of Your Universe. Just listen. Listen until their brain has been twisted like a dripping towel and what they have to say is all over the floor.
Thanks for the great article. Keep up the good work.
sIWPya ligh29d9F4CsjK0A
Hi:
Our company main products is IPOD and IPHONE repair parts, like lcd,front
panel,HDD,headphone jack,batteries etc.with 5 years experiences in China,With our
knowledge and experience in this line ,we guarantee satisfaction in reasonable prices,
high quality and prompt delivery.
hope we can enjoy many more years of doing business together.
Email:wendy@ipartscity.com
Link:www.ipartscity.com
Thank you for your site
I made on photoshop backgrounds for myspace and youtube and ect..
my backgrounds:http://tinyurl.com/5b8ksl
have a great day and thank you again!
Very nice site!
[url=http://training.cvc4.org/pharm1/14274/2.html]cheap cialis[/url]
Very informative and useful stuff here. I’ve recently started diving into developing complete themes for the iPhone using WebKit. I have many years of experience in graphic design and web development, which I can now translate to my iPhone. So far, I’ve managed to use transition effects, embed weather feeds, completely alter the lock screen, and skin the Weather app.
CSS is my specialty, and I can’t wait to see CSS3 adopted into the fold of W3C standards. It’s insanely powerful stuff, and only becoming more so with each update. RAWK. \m/
Да уж…
I’m not sure why it’s necessary to use anchors to mark up your buttons when html provides input[type=button] for just that purpose. If it’s a button, do mark it up as one, and your users who are using VoiceOver will actually be able to experience it as such.