So you are looking at your PSD layout and thinking to yourself: “These buttons look sharp”. You start to cut them out of the template and realize something horrible! You are wasting kbs of loading time here. You are racking up tenths of a second and losing precious audiences around the globe! So you decide to fulfill the epic buttons by creating them with CSS 3!

Example:

I like to take into account the backwards compatibility which is why you see box shadow done multiple times.

In this case I simply changed the ” text-shadow: 0 1px #fff; ” to ” text-shadow: 0 1px #999; ” It doesn’t look as clean, but it definitely emphasizes the text and you can see the color break through.

Think about all of the great possibilities with CSS3 using these techniques. Sure we applied them to buttons, but you could apply this to any object: boxes, dividers, menus, and on.

Stay tuned for more developments on CSS3. My next blog is going to be about CSS3 forms and how to make those forms come alive.

Lechlak

☯ Andrew Lechlak has been in the industry since 2008 specializing in Web Development, SEO, Web Design, SEM, SMM, Social, and Mobile Solution. I greatly enjoy writing for CSS3.com while still maintaining my own work with Lechlak.com & working as a Web Solutions Architect for RolledAlloys.com

These have been depreciated -o-box-shadow, -moz-box-shadow, -webkit-box-shadow

http://www.webtutorialplus.com/ Gunjesh Kumar

While Chrome, Firefox and Opera are moving ahead with CSS3 implementation, it is really surprising that IE is getting left behind. This is one of the big hurdles in implementation of CSS3. Many of the website designers are still sticking with CSS2 due to this.