24 ways: Shiny Happy Buttons

24 ways: Shiny Happy Buttons

If you’ve not seen text-shadows before well, here’s the quick back-story. Text shadow was introduced in CSS2, but only supported in Safari (version 1!) some years later. It was removed from CSS2.1, but returned in CSS3 (in the text module). It’s now supported in Safari, Opera and Firefox (3.1). Internet Explorer has a shadow filter, but the syntax is completely different.

So, how do text-shadows work? The three length values specify respectively a horizontal offset, a vertical offset and a blur (the greater the number the more blurred the shadow will be), and finally a color value for the shadow.

text-shadow: 1px 1px 1px #000;

button {
 width: 15em;
 padding: .5em;
 color: #ffffff;
 text-shadow: 1px 1px 1px #000;
 border: solid thin #882d13;
 -webkit-border-radius: .7em;
 -moz-border-radius: .7em;
 border-radius: .7em;
 -webkit-box-shadow: 2px 2px 3px #999; 
 box-shadow: 2px 2px 2px #bbb;
 background-color: #ce401c;
 background-image: -webkit-gradient (linear, left top, left bottom, from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b));
}

Do websites need to look exactly the same in every browser?