iPhone-like back button in XUL
By glazou on Wednesday 3 March 2010, 08:57 - Mozilla - Permalink
I recently found that very interesting page (you'll need Safari for that one) and thought I could rather easily adapt the webkit-based styles to moz. Here's the result:
This is strictly CSS-based, using the -moz-border-image property. You'll need the two following images to make it work:
![]() |
![]() |
left.png |
left-hover.png |
And here are the very simple style rules to turn for instance a XUL <button class="macLeftNavButton"/>
into the beast above:
.macLeftNavButton {
-moz-appearance:none;
padding: 4px;
min-width:75px;
text-align: center;
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: xx-small;
text-decoration: none;
border-left: 12px;
border-right: 5px;
color: white;
text-shadow: #000 0px 1px 1px;
-moz-border-image: url("left.png") 0 5 0 12;
}
.macLeftNavButton:hover {
-moz-border-image: url("left-hover.png") 0 5 0 12;
}
.macLeftNavButton:hover:active {
padding: 5px 3px 3px 5px;
}
I tested that on my Mac and it works absolutely fine. It could require some tweaking on win/linux but you probably don't want iPhone-like buttons on those platforms anyway. Creating the right-arrow buttons is trivial and I'll let you do that yourself. Enjoy!
Comments
Current Firefox trunk nightlies introduced a new toolbar button style, where the asymmetric shape of the back/forward buttons (Windows only) are done using a svg mask, whose url points to a svg for the shape.
They also use -moz-linear-gradient for the background, -moz-box-shadow, text-shadow, and -moz-transition (bug 544999).
The only images are the back/forward arrows themselves.
Of course that's not exactly web-compatible yet...