Notes on CSS text effect

Web design trends are changing as fast as fashions of women. Sooner or later, there will be no more usage of graphic buttons thanks to new CSS styles. Here, I want to note down some cool styles I’ve collected from CSS gurus.

Button

.button{
width: 200px;
text-align: center;
border: 1px solid #8ec1da;
background-color: #ddeef6;
border-radius: 4px;
box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
-o-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
-webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
-moz-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
color: #3985a8;
text-shadow: 0 1px #fff;
padding: 5px 30px;
}

This one looks like the inner shadow effect of Photoshop. It looks cool but complex CSS.

background: #E1E7A0; padding: 20px; text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px, rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px, rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; color: white; font-size: 18px; font-family: "Lucida Calligraphy";

with effect

font-size: 48px; color: #eee; text-shadow: -1px -1px 0px #999;

for more:
https://developer.mozilla.org/En/CSS/text-shadow
http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/
https://developer.mozilla.org/En/CSS/text-shadow
http://css-tricks.com/examples/ButtonMaker/