This is my third article on CSS3 No Image Aqua Buttons. The previous articles include:

1. CSS3 Gradients: No Image Aqua Button
2. CSS3 Aqua Button – Revisited for Firefox 3.6
3. And this one – Read on!

Since Smashing Magazine has selected the original Aqua button demo for their article, “50 Brilliant CSS3/JavaScript Coding Techniques”, I have had so much more visitors to my blog.

This resulted quality developers leave useful comments and tips for me – thank you, Zoley for suggesting using box-shadow with the inset value, and a big thank you to Jim for actually re-writing the Aqua button with the technique!!!

So, now the CSS3 Aqua button is revised with semantic markup (no more “glare” div! Yes, I complained it by myself before!) and shorter CSS.
And this time, no CSS gradients! – use CSS box-shadow property with multiple inset values to draw layers of inner-shadows to create the visual effect.

Syntax

(-moz-)box-shadow: none | <shadow> [,<shadow>]* where <shadow> is defined as: inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? && <color>? ]


Values

from Mozilla Developer Center:

inset (optional)
If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content).
The presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn above background, but below border and content.

<color> (optional)
If not specified, the color depends on the browser. In Gecko (Firefox), the value of the color property is used. Safari’s shadow is transparent and therefore useless if <color> is omitted.

<offset-x> <offset-y> (required)
This are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. Negative values place the shadow to the left of the element. <offset-y> specifies the vertical distance. Negative values place the shadow above the element.
If both values are 0, the shadow is placed behind the element (and may generate a blur effect if <blur-radius> and/or <spread-radius> is set).

<blur-radius> (optional)
This is a third <length> value. The higher this value, the bigger the blur, so the shadow becomes bigger and lighter. If not specified, it will be 0.

<spread-radius> (optional)
This is a fourth <length> value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).

Note – The box-shadow property has been removed from W3C CSS3 Background Candidate recommendation document.

The Entire Code!

Use -moz and -webkit prefix for box-shodow to support these browsers. For Opera, there’s no need to add -o.

Also, notice there are three inset values are defined for detailed visual effects!

<input type="button" class="new-aqua" value="Login"/>

input[type=button].new-aqua {
  width: 155px;
  height: 35px;
  background: #cde;
  border: 2px solid #ccc;
  border-color: #8ba2c1 #5890bf #4f93ca #768fa5;
  font: 600 16px/1 Lucida Sans, Verdana, sans-serif;
  color: #fff;
  text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border-radius: 16px; -moz-border-radius: 16px; -webkit-border-radius: 16px;
  box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
  -moz-box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
  -webkit-box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
}
.new-aqua:hover {
  text-shadow: rgb(255, 255, 255) 0px 0px 5px;
}

View the live demo page! This new aqua button works on FF 3.6, Webkit 4 (the current Safari 4 doesn’t support inset box-shadow yet), Chrome 4 and Opera 10. (But fails on 10.1 on Mac).

* Edited on Feb.5 – Opera 10.1 fail and Safari4 (I noticed this works only on Webkit Nightly after published this!)

And again, a huge thanks to Jim Green for the revised CSS!

References

• Safari CSS Reference by Apple Safari Dev Center
• -moz-box-shadow by Mozilla Developer Center
• CSS3 borders, backgrounds and box-shadows by Dev.Opera

I gathered 30+ major browsers I have worked with (plus a few I have never even seen), and categorize by the markup that browsers can render – WML, CHTML, XHTML-MP, and HTML4.

So, here you go. If you find some mistakes, let me know!

I have categorized only with the markup type, and did not sub-categorize these browsers. However, if I would, I may want to grade XHTML-MP devices with page memory size (=”deck size”, yes I said deck size), and screen resolution for UI design purpose.

To grade full-HTML browsers, you need to spend massive time and effort on testing rendering capability with CSS, and Javascript DOM compatibility, events, etc. Actually, PPK has done excellent work on mobile browser testing, so you can simply visit Quirksmode.org!

I have been working for mobile phones since I joined Nokia in 2005, then Yahoo! later, I have been frustrated with luck of information on mobile browsers. Although Nokia was pioneering sharing information on S60 WebKit browsers, still there was not enough so I had to run many tests by myself without much help from anybody else, and recorded some quirks found a little bit at the time. So PPK’s work on compatibility test table is the one of the best resource I can have!

Anyway, PPK made his visit to Yahoo! last week and the video of his presentation is now on YUI Theater!

Also, his slides are availabe at SlideShare:

• Yahoo presentation: JavaScript Events
• Google presentation: The Open Web goes mobile
  

Watch the step-by-step instruction video:

More Mobile App/Widget SDKs:

• Apple: iPhone SDK
• Google: Android SDK
• Yahoo!: Blueprint SDK (this is what I am working for)
• Nokia: Widset
• Openwave: Mobile Widget
• Plasmo: Widget

Although I don’t know if there’s any new features added from Beta 4, the nice new features added for 4 (compared to 3) includes “mini” version of the entire web page, just like Nokia’s WebKit, and landscape mode.

The page rendering speed seems to be just as fast as I expected – faster than WebKit.

As long as I’ve been testing on the beta and now this official 4, as a web developer, I am happy with the improvement on CSS support. So many pages that looked like crap on Opera 3, are now beautifully rendered. It supports better table layout and more semantic markups (Now, I can use the strong, H1 tags etc. without making terrible mess) and CSS3 including media queries. Although limited, it supportes some JavaScript events as well.

Also, Opera launched a developers’ community site called Dev Opera recently, to help us developing better on Opera.