Making Chupa-Chups using CSS3 Pseudo-elements

One of the biggest reasons why I don’t blog often is probably because I tweet a lot. Just write a few words and throw some jsfiddle or Dabblet URLs in 140 chars, and boom, I can reach sizable numbers of people. It was quick and easy for me when I had busy days…

Well, now, I have lost my job at Hewlett-Packard (as they ditched Palm hardware then dumped the webOS software as open-source, they no longer need me and my hard-working teammates), so I should no longer excuse for not writing. So here I am, I decide to write up about CSS3 shapes from the fiddles I have written recently:

Shapes with CSS3 Part.1 – Heart

Heart-shaped chocolate live demo: http://dabblet.com/gist/2190614

This Valentine’s Day demo (I really did make this on Feb.14!) shows how to create a heart shape.
Basic idea behind is that creating two rectangles with round-corners on top-left and top-right, and rotate each object in either positive or negative 45 degrees. The trick of making two objects in one HTML element is using pseudo-elements, ::before and ::after.
This code snipet shows how to create a simple heart-shape:

.heart {
	position: relative;
}
.heart::before,
.heart::after {
	content: "";
	position: absolute;
	top: 0;
	background-color: red;
	width: 150px;
	height: 240px;
	border-radius: 75px 75px 0 0;
}
.heart::before {
	left: 0px;
	transform: rotate(-45deg);
	background-color: red;
}
.heart::after {
	left: 64px;
	transform: rotate(45deg);
}

In this example, I omit the vender prefix, but you do need to include them, for example, -webkit-transform to be able to make this code work on the current browsers.

Shapes with CSS3 Part.2 – Flower

Chupa-Chupsy live demo: http://dabblet.com/gist/2190662

This Chupa-Chups, or I’d call it Chupa-Chupsy candy, since I cannot replicate the actual design of the candy wrapper accurately. (Oh, by the way, did you know the logo was created by the surreal artist, Salvador Dalí? Seriously.)

So I tried to mimic the signature yellow flower-shape, with one HTML element using the pseudo-element. This shape is made with a combination of two rounded-corner squares. One of the square is rotated to 45 degrees.
This is how to create the basic flower-shape:

.flower-shape {
    position: relative;
}
.flower-shape,
.flower-shape::before {
    width: 200px;
    height: 200px;
    border-radius: 25%;
    background: yellow;
}
.flower-shape::before {
    content: "";
    position: absolute;
    transform: rotate(45deg);
}

In this example, I used only ::before pseudo-element, instead of both before and after. Although I used both for the heart-shape example (which is made with two rectangles), technically, you can include three objects into one HTML element by inserting each object before and after the object on the element.

So if you’d like to have a flower with 12 petals, you can define .flower-shape::after, which is rotated in 30deg. Make sure to make the .flower-shape::before in -30deg.

To mimic the candy logo, I used the most similar web-font I found on Google Web Font. Once you see the real Chupa-Chups logo, you’ll see this web-font is actually nothing resembling it. But, hey.

Shapes with CSS3 Part.3 – Speech Bubble

Klout Score Flag demo: http://jsfiddle.net/girlie_mac/2uk6U/

This is a no-image replica of the Klout score flag! Creating this speech-bubble style shape used the same technique using ::after pseudo-element.
The method of making the triangle shape is the good’ol CSS2 border shading trick using border-width and border-color. Giving think borders around a box with zero width and height. The triangle size is determined by the border-width, with the given color on the one side and transparent on the rest of the sides. You can read more about how to create a triangle on CSS-Tricks.

The basic shape can be coded like this:

.speech {
    background-color: orange;
    width: 200px;
    height: 160px;
    border-radius: 10px;
    position: relative;
}
.speech:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-bottom: 28px solid transparent;
    border-right: 58px solid orange;
    position: absolute;
    right: 0;
}

Quick Fun: CSS3 Filter Effects

I quickly played with the brand-new CSS Filter Effects on the latest WebKit Nightly! (Edited: and Chrome Canary 18.0.976.0 +)

Click the images to view in the full size.

This is a default google.com screen.
No filter added.

blur(radius) to create Gaussian blur

-webkit-filter: blur(2px);

The default is 0, no blur.

brightness(amount)

-webkit-filter: brightness(30%);

The default is 100%. Values of amount over 100% are allowed.
Updated: I am not sure when it has modified, but it seems that not the accepted value is the range between -100% (dark) and 100% (light), and the default is 0.

contrast(amount)

-webkit-filter: contrast(30%);

The default is 100%. Values of amount over 100% are allowed.

grayscale(amount)

-webkit-filter: grayscale();

The default is 100%.

sepia(amount)

-webkit-filter: sepia();

The default is 100%.

invert(amount)

-webkit-filter: invert();

The default is 100%.

opacity(amount)

-webkit-filter: opacity(30%);

The default is 100%, no transparency.

Saturate(amount)

-webkit-filter: saturate(50%);

The default is 100%.

Saturate(amount) – the amount over 100% is also allowed.

-webkit-filter: saturate(300%);

hue-rotate(angle)

-webkit-filter: hue-rotate(90deg);

The default is 0deg.

hue-rotate(angle)

-webkit-filter: hue-rotate(300deg);

drop-shadow(<shadow>)

/* Adding Drop-shadow on the toolbar at the top */

#bg {
  -webkit-filter: drop-shadow(rgba(0,0,0,0.5) 0 5px 5px);
}

HTML5 Form Field Validation with CSS3

HTML5 Built-in Form Validation

HTML5 specifications come with a full of goodness that make web devs’ lives easier.
The one of the goodies, the client form validation is the one I like a lot, because, for example, by adding required attribute to an input, I don’t need to write any additional JavaScript to warn a user, when the user submits a form without filling out the required fields. The interactive warning UI comes with browsers.

The “Speech bubble” UI is built in with HTML5-enabled browsers. (This screenshot is taken on Chrome. Other browsers like Firefox and Opera have their own interface.)

Pattern Matching

You can also validate against patterns that defined by you. The pattern attribute specifies a regular expression against the control’s value.

<input type="text" pattern="[0-9]{13,16}" title="A credit card number" />

A user is required to enter values to match a regular expression pattern, in this case, a 13 to 16 digit number.

CSS3 User Interface Selectors

There are numerous user interface state pseudo-classes. You’ve probably already known :hover, :active etc. According to this W3C Candidate Doc, there are additional pseudo-classes defined, such as :valid, invalid, in-range, out-of-range, required, optional, read-only and read-write.

So I played a bit with :valid and :invalid to check against the regular expression pattern.

The diagram shows: 1) The entry is displayed in red when the entered text is not matched.
2) The built-in HTML5 message is displayed when the user submits the form while leaving the invalid entry. No additional CSS is used.
3) The entry is in green when it matches with the defined pattern. Also, a check mark is used as an indicator to tell it is valid.

The simplified code is below. Also you can view the entire code and the working demo on jsFiddle.

<input id="cc" type="text" pattern="[0-9]{13,16}" required />
<div class="input-validation"></div>
<input id="payButton" type="submit" value="Pay Now" />

input[type="text"]:valid {
    color: green;
}

input[type="text"]:valid ~ .input-validation::before {
    content: "✓";
    color: green;
}

input[type="text"]:invalid {
    color: red;
}

I was too lazy to create an image, so I just used the unicode checkmark. Actually, what I wanted to do was that inserting the unicode content after the input with this CSS- input:valid:after. However, it is not possible to add contents to the input with the CSS since input has no document tree content. Therefore, I used the extra div after the input. (So I am using the sibling selector, ~, to specify the div).

If you would make it prettier, I suggest you should place some icons as a background-image of the input, instead of just dumping some unicode char!

input[type="text"]:valid {
    background: url(thumb-up.png) no-repeat top right;
}

References

HTML5 Form Validation on SUMO (Mozilla Blog)

CSS3 Basic User Interface Module by W3C

The pattern attribute by WHATWG

HTML5 Patterns

Five CSS tricks used in Enyo JS Framework, and you can try them too!

Since I have joined Palm (now HP), I don’t blog frequently because working for the webOS have kept me super busy. Especially when working on the webOS 3.0 for the Touchpad tablet, I have been in multiple teams until I switched my position to commit for the Developer Relations team.

Anyway, in case you are not familiar with webOS and Enyo – webOS is a mobile platform running on Linux kernel/ webkit UI with V8 engine, so most of core apps are either written in JS and CSS, or native C/C++. And the JS framework for 3.0 is called Enyo. Basically working on the webOS framework and apps is just like developing web (in fact, I use Chrome for development). So here, I want to share some cool CSS tracks used in the framework!

1. Flexible Box Model

Enyo’s basic UI is created with using the CSS3 flexible box model.
You no longer have to worry about all the float craziness. I actually have written an article, CSS 3 Flexible Box Model and Enyo Flex Layout for webOS Developer Blog too, so please read it too!

Example:

When you want to achieve a layout that has an avatar at the left, and two lines of a person’s info at the right side like this,

You can create this UI without float if the browser support flex-box:

<div class="tweet">
  <div class="tweet-avatar"><img src="avatar.png"></div>
  <div class="tweet-contents">
    <div class="tweet-username">@n00b_css3_user</div>
    <div class="tweet-text">Hello, world. CSS3 Flexbox is cool.</div>
  </div>
</div>

.tweet {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
}

.tweet-contents {
  margin-left: .5em;
  display: -webkit-box;
  -webkit-box-flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
}

Note: this is an original spec from 2009 and this is what browsers currently support (if they do), and likely to keep supporting. I have no idea why the spec has been completely re-written recently, but so far no browsers support the new specs.

2. Root Em

There is a new unit in CSS, rem unit, which stands for “root em”. The sizing only with em could be troublesome because how it relates to the parent’s font-size. However, the rem is relative to the root, which is html.
In Enyo framework, the root font size is set to 20px. So by using rem, you can set its children font-size easily without being affected by their parents.

Here’s a comparison of em and rem:

<div class="container">
  <p class="subdue">48 minutes ago</p>
</div>

With em

html {font-size: 20px;}
.container {font-size: .8em}
.subdue {font-size: .75em} /* the font size = 12px (20 x .8 x .75) */

With rem

html {font-size: 20px;}
.container {font-size: .8em}
.subdue {font-size: .75rem} /* the font size = 15px (20 x .75) */

3. Pointer-events

This is a little obscure and simple trick not everybody has known, and a secret(?) trick I have been using since the earlier webOS framework called Mojo.
The pointer-events property was originally defined for SVG content, and later adopted as a CSS property.
For CSS, there are only two values: auto or none.
You can control the target of the mouth event, and by setting this value none, the element is no longer a target of mouse events, so when a user click the element, it pass through to its descendant during the event bubbling.

<div style="position:relative">
  <div class="overlay"></div>
  <ul>
    <li><a href="">link 1 on fading list</a></li>
    <li><a href="">link 2 on fading list</a></li>
    <li><a href="">link 3 on fading list</a></li>
  </ul>
<div>

.overlay {
  pointer-events: none;
}

The screenshots at left indicates that when the pointer-events property value is not set (default), the first link underneath of the visual overlay is not clickable, and when it is set none, the element becomes clickable (right).

The demo: http://jsfiddle.net/girlie_mac/7TvVY/

4. border-image with sprites

You have seen some demos how to use the CSS3 border-image.
But making multiple assets used for border-image is trivial because how an image needs to be “sliced” into 9 tiles with css.
However, if an each asset in the sprites only requires into 3 tiles. (For example, [static-left] [stretchable center] [static-right], and top and bottom borders are zero, you can create a single sprite image of multiple states of a button, and still be able to achieve the border-image.

.alert-button {
  /* notice the fat border-bottom */
  -webkit-border-image: url(images/alert-button.png) 0 14 111 14 repeat repeat;

  /* notice that border-top and bottom are set zero */
  border-width: 0 14px;

  /* some visual styling here */
  -webkit-box-sizing: border-box;
  height: 37px;
  line-height: 37px;
}

.alert-button:active {
  /* the fat border-top and bottom adjusted */
  -webkit-border-image: url(images/alert-button.png) 37 14 74 14 repeat repeat;
}

The demo: http://jsfiddle.net/girlie_mac/89C2T/

5. Hardware acceleration

WebKit enables hardware-acceleration to render CSS 3D transforms. Although some WebKit (like webOS) may not render 3D visuals correctly, it still uses the GPU to speed up. So all you need to take advantage of this is to use the -webkit-transform CSS property!
The easiest possible way to achieve it is using translate3d instead of translate (also scale3d instead of scale), although you are not intend to make your web in 3D visual effect.

.toaster {
  -webkit-transform: translate3d(0,0,0);
}

or just set only the z-axis:

.toaster {
  -webkit-transform: translateZ(0);
}

I hope some of the stuff I just wrote are new to you!
There are more fun stuff I can write about Enyo JS framework, but I keep them for the official HP webOS Dev Blog!

Bye now!

Open Web Camp III

I had this wonderful opportunity to speak at OpenWebCamp III at Stanford University on this weekend, and I feel very honor to be there with so many great speakers and attendees.

Apparently, I have been doing mobile development longer than most of people, I picked the subject on developing mobile web, and how it has been changed and what we can do next.

I covered the topics including:

• How the mobile development has changed from WML, XHTML-MP, HTML4 and finally HTML5 with CSS3
• Legacy to HTML5: using input attributes to make easier for a user to type on phone
• Dealing with smarter phones: Viewport and Media-queries
• High DPI display: CSS pixel != Device pixel
• Device API

My slides, “WAP to HTML5: Mobile web – past, present, and future” is available in html5, not Powepoint or Keynotes so I couldn’t post it on SlideShare!

Quick Demo: CSS3 Fancy Avatar

Now I started using jsfiddle for code snippets so I can show the code AND the actual results on browsers.

This fancy avatar frame is created pretty easily by using CSS box-shadow inset values.
Basically, what I did is that giving a div container (with an avatar picture as a background image) an inset shadow to bottom/right, and glare to top/left. Oh and added border-radius for the rounded corners.

This works without the vendor-specific extensions on latest Firefox, Chrome, Webkit Nightly, and Opera. Safari 5 still requires -webkit extension to make the box-shadow work.

Really easy and practical!

Quick Demo: Webkit CSS3 Mask with SVG

I haven’t got a chance to create the apps and demos I’ve been thinking because my day job at Palm has kept me really busy. (Yeah, we’re shipping webOS 2.0 pretty soon!)
So instead of writing a new material, I decided to post the stuff I was testing around a while ago because SVG seems to be a hot topic since the HTML5 buzz!

This is an example of CSS mask with SVG. -The CSS alpha mask is introduced by Webkit.org back in 2008.

And this image at the right is a screen capture from WebKit Nightly browser. The photo I use here is a Twitter avatar photo of @sockington, masked with an SVG file (I used the vector image created by eagl0r on DeviantArt and converted it as as SVG with Adobe Illustrator) with using Webkit-only CSS 3 property, -webkit-mask.

The actual demo is here.
This works only on advanced webkit-browsers with SVG support, such as Safari 4+ and Chrome 2+ (not sure. I need to check). Android webkit browsers currently do not support SVG.
For non-supporting browsers, you should just see three rectangle pictures as fallback. Nothing should look broken.

The code is Simple

<img class="avatar" src="avatar-pic.png"/>

.avatar {
  -webkit-mask-box-image: url(twitter-bird.svg);
}

I used mask-box-image instead of mask-image to make the mask stretch to fit with various image sizes and aspect ratio. mask-image repeats the mask images as patterns (also you can specify the type of repeat, and position etc. I am not going to talk about them here but you can read on the reference link below).

Reference

Surfin’ Safari (webkit.org) – CSS Masks

Simulating MacOS Dock-like menu with CSS3

Since my original “CSS Aqua button” written last year, I have seen more and more fan CSS3 UI mimic of MacOS components around! I think I have seen some Mac docks too, but as I remember they all use jQuery.
So I was thinking about making one only with CSS.

Initially I thought it was easy – let’s make an hovered icon larger like 200%, and make siblings in 150% of the original size using CSS sibling selector, and done! A piece of cake, huh? – Then I realized I made a mistake. The adjacent-sibling selector apply to an element which is immediately after the element in markup, not both before and after.
Oh well, so I needed to write a minimal JavaScript (so you don’t need to import a whole JS library) to add a class name to the element comes before the hovered object.

Anyway, here’s the live-demo! (Try it with the the latest Webkit Nightly or Safari 4) for the best experience!), and I’ll show you how I did-

Markup (Simplified)

Let’s create menu items as a list.

<div id="dock-container">
  <div id="dock">
  <ul>
    <li><a href="http://android.com"><img src="images/dock-icons/android.png"/></a></li>
    <li><a href="http://palm.com"><img src="images/dock-icons/palm.png"/></a></li>
    <li>...
  </ul>
  <div class="base"></div>
  </div>
</div>

The list should be displayed horizontally by setting the style to #dock li {display:inline-block}. Please see the source code from the demo for the details.

Magnify the icon with CSS transform

First, let’s define the dock icon animation with css transition.
The origin of the transform has to set to bottom, so the icon doesn’t scale from the middle of the icon. (Diagram #1).

I used only a webkit extension for this example but you can use -moz and -o extensions, for Firefox and Opera respectively.

Then, set the hover state – use css transform to scale the icon image up to 200%. Also you need to add some margin otherwise the enlarged icon overlaps with neighboring icons!

#dock li img {
  width: 64px;
  height: 64px;
  -webkit-box-reflect: below 2px
		    -webkit-gradient(linear, left top, left bottom, from(transparent),
		    color-stop(0.7, transparent), to(rgba(255,255,255,.5))); /* reflection is supported by webkit only */
  -webkit-transition: all 0.3s;
  -webkit-transform-origin: 50% 100%;
}
#dock li:hover img {
  -webkit-transform: scale(2);
  margin: 0 2em;
}

Magnify adjacent icons

#dock li:hover + li img,
#dock li.prev img {
  -webkit-transform: scale(1.5);
  margin: 0 1.5em;
}

To magnify the icon at the right hand side of the hovered icon (Diagram #2), all you need to do is define the scale with using a CSS adjacent-sibling selector, E + F (an F element immediately preceded by an E element).

For the icon at the left (Diagram #3), ss I mentioned earlier, there is no css to get the previous sibling, so I need to rely on JavaScript.
I used the DOM node interface, previousElementSibling to access the sibling node. previousElementSibling should be supported by Webkit, Opera and Firefox.

Basically what I am doing here is that get the mouseovered object (should be an img element), find the parent li element (the immediate parent should be an a-alement, not a li, so get a’s parent! Check the HTML code again!), find the previous sibling li, then give a classname “prev” so I can apply the style.
Don’t forget to remove the class name as mouseout, otherwise the icon stays large.

function addPrevClass (e) {
  var target = e.target;
    if(target.getAttribute('src')) { // check if it is img
      var li = target.parentNode.parentNode;
      var prevLi = li.previousElementSibling;
      if(prevLi) {
        prevLi.className = 'prev';
      }

      target.addEventListener('mouseout', function() {
        prevLi.removeAttribute('class');
      }, false);
  }
}
if (window.addEventListener) {
  document.getElementById("dock").addEventListener('mouseover', addPrevClass, false);
}

For more details with the fancy CSS3 effects (e.g. the gradient and 3D-transform to create the “base” of the dock), please see the source code of the demo page!

CSS3 Box-Shadow with Inset Values – The Aqua Button ReReVisited!

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

CSS3 Aqua Button – Revisited for Firefox 3.6

This is an update for the Aqua button tutorial. This update will add a support for Firefox 3.6. If you haven’t seen the article, please go read it before proceeding here.

On the end of November last year, Mozilla Hacks announced the support for CSS gradient in a background on upcoming Firefox 3.6 (which final version has just released recently).

As already been supported on WebKit, FF does support both linear and radial gradient, however, Mozilla has implemented differently –
Most noticeably, Mozilla separate linear and radial gradient as -moz-linear-gradient and -moz-radial-gradient, while on WebKit, the syntax goes -webkit-gradient and you specify linear or radial.

Also the specification of each value is different too.
If you want a linear gradient starting from red on top to ending at bottom in white, you need to define –

WebKit:
background: -webkit-gradient(linear, left top, right bottom, from(red), to(white)))
Firefox:
background: -moz-linear-gradient(top, red, white);


The Aqua Button Redefined

Let’s re-create the aqua button, by adding -moz prefixed gradient definitions:

The button:

.aqua{
  background-color: rgba(60, 132, 198, 0.8);
  border-top-color: #8ba2c1;
  border-right-color: #5890bf;
  border-bottom-color: #4f93ca;
  border-left-color: #768fa5;
  -webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
  -moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
/* for FF 3.6 */
  background-image: -moz-linear-gradient(rgba(28, 91, 155, 0.8) 0%, rgba(108, 191, 255, .9) 90%);
}

and the glare:

.button .glare {
  position: absolute;
  top: 0;
  left: 5px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  height: 1px;
  width: 142px;
  padding: 8px 0;
  background-color: rgba(255, 255, 255, 0.25);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
  /* for FF 3.6 */
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%);
}

This is the actual html page. Open it on Firefox 3.6 and see!

More Info on Mozilla CSS Gradients

• CSS gradients in Firefox 3.6 by HACKS.MOZILLA.ORG
• -moz-linear-gradient by Mozilla Developer Center
• -moz-radial-gradient by Mozilla Developer Center