I have been out shinyed

John All­sopp has just had pub­lished Shiny Happy But­tons on 24 Ways, and John has out shinyed my but­tons using CSS3 for pro­gress­ive enhance­ment at Web Mixed Grill.

If you are using a nightly web­kit build you will see on the left CSS3 but­ton with a back­ground gradi­ent, which was done without images. Every­body else will have to look at the image on the right.

What John did better

• Used CSS gradi­ents which is cur­rently only sup­por­ted by web­kit nightly builds at the moment. David Hyatt’s Intro­du­cing CSS Gradi­ents has the details.
• Used only one ele­ment, instead of the three I used. One of the extra divs I used was for an extra bor­der, because no browser sup­ports mul­tiple bor­ders, yet. The other div I used was for the trans­par­ent over­lay, which could be rep­lic­ated by mul­tiple CSS gradi­ents and over­lay­ing a radial gradi­ent on a lin­ear gradient.
• Used the but­ton ele­ment instead of a div. I made a per­sonal choice to avoid using a but­ton ele­ment, because it is not sup­por­ted by XHTML-MP 1.2 and there­fore a couple of major mobile browsers (like IE for Win­dows Mobile 6).

Same Mistakes

• Both me and John used border-radius and box-shadow which causes prob­lems with the cur­rent ver­sion of Chrome

Where Next?

Time to start look­ing fur­ther at CSS gradi­ents, both radial and lin­ear and to look at imple­ment­ing mul­tiple gradi­ents. To get the back­ground effect I want.

I will look cut­ting down the num­ber of ele­ments and think about using a but­ton ele­ment instead of a div and anchor for my next example, which I am about to start work­ing on.

This entry was posted on Thursday, December 18th, 2008 at 10:25 pm and is filed under css and html . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.