I have been out shinyed

John Allsopp has just had published Shiny Happy Buttons on 24 Ways, and John has out shinyed my buttons using CSS3 for progressive enhancement at Web Mixed Grill.


shiny button as see in webkit nightly build

If you are using a nightly webkit build you will see on the left CSS3 button with a background gradient, which was done without images. Everybody else will have to look at the image on the right.

What John did better

  • Used CSS gradients which is currently only supported by webkit nightly builds at the moment. David Hyatt’s Introducing CSS Gradients has the details.
  • Used only one element, instead of the three I used. One of the extra divs I used was for an extra border, because no browser supports multiple borders, yet. The other div I used was for the transparent overlay, which could be replicated by multiple CSS gradients and overlaying a radial gradient on a linear gradient.
  • Used the button element instead of a div. I made a personal choice to avoid using a button element, because it is not supported by XHTML-MP 1.2 and therefore a couple of major mobile browsers (like IE for Windows Mobile 6).

Same Mistakes

  • Both me and John used border-radius and box-shadow which causes problems with the current version of Chrome

Where Next?

Time to start looking further at CSS gradients, both radial and linear and to look at implementing multiple gradients. To get the background effect I want.

I will look cutting down the number of elements and think about using a button element instead of a div and anchor for my next example, which I am about to start working on.

3 Responses to “I have been out shinyed”

  1. Gary Barber Says:

    Using a button doesn’t mean john is right, just that he’s not considering the complete picture. I can understand why he used gradients they are very sexy.

  2. Nick Says:

    Gary it was not John is right I am wrong. It was more maybe I should reconsider my blanket ban on the button element. Not working in IE for Windows Mobile, Blazer and other mobile browsers vs being semantically correct, styleable in Safari for Mac and works well in computer browers.

    If you use anything more than very simple JavaScript you might as well use a button. Because IE for WM6 is likely to die on the JavaScript.

  3. Ann @Ann Arbor Michigan Website Promotion Says:

    Hey Nick I’m sure you’ll come up with something better. In any case most people are moving from IE to firefox and chrome.