CSS3 Gradients: No Image Aqua Button

Note (Jan 28, 2010): I added a Firefox support to this tutorial. Please visit the “revisited” article too!

Boooo, Yahoo! just had the 3rd round of layoff within a little over a year period, and this time I was axed with several more fellow excellent engineers of Mobile team. So now I have free time to spend on more coding!
My job function needed full focus on products and it prevented me to have experiments and testing as I wanted to, so I always spent my own time to do. Now I can do whatever I want to while I am still on payroll. Yes! I am still paid my regular salary for a while, thanks for the new regulation

OK, enough blah about the stupid corporate stuff.
Anyway, I played around with WebKit CSS3 gradient and created a useless but fun stuff – an Aqua button with no images!
Back in the time when Mac OS X was first announced, there’re a plenty of web tutorials that describe how to create the sexy aqua button with Photoshop, and now I can show how to create one with CSS!

Here’s a screen capture of the rendered button. You can see the actual HTML page too.

OK, let’s take a look at the code:

<div class="button aqua">
  <div class="glare"></div>
  Button Label
</div>

Create a Button Base and Styling Label

.button{
  width: 120px;
  height: 24px;
  padding: 5px 16px 3px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border: 2px solid #ccc;
  position: relative;

  /* Label */
  font-family: Lucida Sans, Helvetica, sans-serif;
  font-weight: 800;
  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;
}

The first part to render a rounded-corner rectangle. Set the position as relative to place “glare” inside of the button later.
The second part is for styling the label.
Give text-shodow with alpha-transparency. (Believe or not, Chrome and Android do not support text-shadow!)

Button Color and Shadow

.aqua{
  background-color: rgba(60, 132, 198, 0.8);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
  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; /* FF 3.5+ */
}

Now, specify the appearance of the button and shadow at bottom.
Here. I use the -webkit-gradient to create a nice-looking aqua gradient.

Notice that I use -webkit-gradient as a background-image, although there’s no physical graphics are added there.
You can use gradients in background-image, border-image, list-style-image and content property.
On Firefox, this is ignored and you see only Background-color.

The syntax for linear gradient is as follows:

-webkit-gradient(lenear, left top, right bottom, from(start color/alpha), to(end color/alpha))

In this example, starts with dark blue from straight top to bottom (no angle) at 95%, not all way down, to blended into lighter blue.

Then, I specified color on each border (so the css looks pretty messy).

Finally, give a nice shadow at bottom, with -webkit-box-shadow.
Firefox 3.5+ supports it too, so duplicate it with -moz-box-shadow.

Syntax is as:

[color/alpha] [horizontal offset] [vertical offset] [blur radius]

Give it shine

.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)));
}

The class glare renders the glossy look on the button.
First, give absolute position to the parent container, button to give shine in the right position.

<;li
Again, use -webkit-gradient to create the glossy look, by playing with alpha-transparency.
Start with the white (alpha 0.7) and end with complete transparent (alpha 0).

Honestly, I do not like to have this non-semantic empty div block to only get this visual effect.
I need to figure a better way to do.

References:

• Safari Reference Library – CSS Property Functions by Apple
• Surfin’ Safari – Introducing CSS Gradients
• Mozilla Extensions

Using Keyframes – WebKit CSS Animation Examples

Now WebKit supports explicit CSS animations! After seeing the new animation examples posted on WebKit.org, I needed to test keyframes by myself.
So I have created a dumb-downed version of the fallen leaves seen on webkit.org blog, called “Let it Snow”.

Unlike the fallen leaves example, I stick strictly with CSS only (means zero JavaScript). Also I tested on Webkit nightly and an iPhone (OS 2.0) Safari. On my iPhone (Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_2 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5G77 Safari/525.20), the animation is slow and some feature is ingored.

Well, let’s see the “Let It Snow” animation in action!

How to use Keyframes?

Keyframes are specified with the CSS “At-Rule” by using the keyword,@-webkit-keyframes, followed by an identifier (= animation-name)

	
@-webkit-keyframes animation-name {
 from {
   style definition ["Before"-state]
 }
 to {
   style definition ["After"-state]
 }
}
	

A keyframe defines the styles applied within the animation. To specify multiple frames, use “%” instead of “from” and “to” keywords.
Here’s an actual example I used for “Let it Snow”.

	
@-webkit-keyframes fade {
  0%   { opacity: 0; }
  10%  { opacity: 0.8; }
  100% { opacity: 0; }
}
	

This style is applie to create each snow flake appearance. A snowflake blurry appears (increase opacity) when 10% of the time elapsed (The total time is defined later. I’ll explain it next).
And at the end, the snowflake disappears (opacity back to zero).

Once the animation timeframe is defined, apply it using -webkit-animation-name and related properties.
I set total animation duration as 5 seconds, and the animatin goes forever (= infinite times. The default is 1).
See the simplified example below.

	
#snow div {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
}
	

	
<div id="snow" class="snow">
  <div>&#10053;</div> /* an entity for ❅ */
</div>
	

Using Transform

Let’s rotate and move around snowflakes by using -webkit-transform.
rotate, of course, rotate the element, and translate specifies a 2D translation by the vector [tx, ty]. (For more explanations, please see CSS transform spec page).
I used percent, 0 and 100% here, but of course you can use “from” and “to”.
Also note that transform doesn’t seem to work on current iPhone Safari yet.

	
@-webkit-keyframes spin{
  0%   { -webkit-transform: rotate(-180deg) translate(0px, 0px);}
  100% { -webkit-transform: rotate(180deg) translate(10px, 75px);}
}
	

You can just add the amination-name to the #snow div selector, separating with comma.

	
#snow div {
  -webkit-animation-name: fade, spin;
  ...
}
	

More

For the “Let it snow” example, I also include the cheesy “accumulate” keyframe to make snow accumulate on ground. Kinda ugly though.
Moreover, I gave the -webkit-animation-duration to individual snowflake so all flakes don’t fall all together!

	
.snowflake {
  color: #fff;
  font-size: 2em;
  position: absolute; (Note: The parent container is set relative positioned!)
}
.snowflake.f1 {
  left: 40px;
  -webkit-animation-duration: 5s;
}
.snowflake.f2 {
  font-size: 1.8em;
  left: 120px;
  -webkit-animation-duration: 7s;
}
...
	

	
<div id="snow" class="snow">
  <div class="snowflake f1">&#10053;</div> /* an entity for ❅ */
  <div class="snowflake f2">&#10052;</div> /* an entity for ❄ */
  ... (add two more snowflake-div in the actual sample)
</div>
	

To view the entire markup and CSS, just view source of the sample file!

Resources:

• Surfin’ Safari – CSS Animation
• Surfin’ Safari – CSS Animation 2
• CSS Effects proposed specifications – Animation
• CSS Effects proposed specifications – Transforms
• Safari Supported CSS Properties – “Visual Effects”
• Apple Web Apps Reference Library “CardFlip” (Registration required)

WebKit Comparison on CSS3

Bitstream has launched a new mobile browser called Bolt, which is a J2ME browser and use WebKit as a rendering engine.

Instead of writing a review on this new WebKit browser, I decided to just do some quick CSS3 test on variety of WebKit browsers!
If you rather read the review, I recommend WAP Review. There’s a very detailed great article on Bolt there.

WebKit browsers I used

1. WebKit Nightly for Mac OS X (as a Control)
   Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_4; en-us) AppleWebKit/528.11+ (KHTML, like Gecko) Version/4.0dp1 Safari/526.11.2
2. iPhone Safari
   Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_2 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5G77 Safari/525.20
3. Chrome by Google
   Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.19 (KHTML, like Gecko) Chrome/1.0.154.43 Safari/525.19
4. HTC Dream Android
   Mozilla/5.0 (Linux; U; Android 1.0; en-us; dream) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2
5. Nokia N95 8GB
   Mozilla/5.0 (SymbianOS/9.2 U; Series60/3.1 NokiaN95_8GB/10.0.021; Profile/MIDP-2.0 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413
6. Bolt 0.74 on Nokia N95 8GB
   Mozilla/5.0 (X11; 78; CentOS; US-en) AppleWebKit/527+ (KHTML, like Gecko) Bolt/0.741 Version/3.0 Safari/523.15

CSS3 Styling I tested

.opracity {opacity: .5;}
.textShadow {text-shadow: #777 2px 2px 2px;}
.textShadows2 {text-shadow: rgba(0,0,255, .7) 3px 3px 2px, rgba(255,0,0, .7) -3px -3px 2px;
.ellipsis{text-overflow: ellipsis; width: 200px; overflow: hidden;}
.borderRadius {background-color: #666; color: #fff; width: 200px; padding: 10px; -webkit-border-radius: 10px;}
.boxShodow{-webkit-box-shadow: #000 3px 2px 6px; width: 200px; padding:5px;}
.strokeAndFill{-webkit-text-stroke: 1px green; -webkit-text-fill-color: #ccc; font-size: 2em; }
.borderImg{-webkit-border-image: url(button.gif) 0 13 0 13 stretch stretch; border-width: 0px 13px; padding: 5px 0 7px;}

Results

Summary

* Basic feature is spported, but not multiple shodows.
** Not degraded gracefully. Contents become unreadable so should be avoided.

Additional Notes

Besides the CSS3 test, it is noticeable that Bolt does not honer css font size, weight and header with H tag. This is happening to another J2ME browser, Opera Mini 4 (not tested here since Opera Mini is not WebKit-based). Additionally, like Opera Mini, Bolt uses proxy for rendering and compression. Data is passed through proxy before sending to device.

More Update on CSS Animation

OK, so now I am trying to clarify how to make the css animation works using class name swap.

The conclusion is that it does work! – but you need to apply the -webkit-transition to “destination” class not the “origin” as I first attempted. Thanks for Dave and Dean from Apple, who pointed it out.

Go to The Actual Example Page

HTML Markup used for these examles (from Apple’s doc):

			
<div class="box"
	style="width:100px;
	height:100px;
	background-color:blue;"
	onclick="this.className = 'boxFade'">
Tap to fade
</div>
			
		

What *Not* To Do

This worked on some older WebKit nightly builds, but not on the latest build.

The reason is the -webkit-transition properties into the newClassName definition.

			
/* *** This is a bad example *** */

div.box { /* this applies only to the 'before' transition state */
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
}
div.boxFade {
opacity:0;
}
			
		

Click the box. On clicking event, the box’s opacity turns 0 immediately because the transition properties are not set for the “after” state.

What To Do – 1

This is the actual example snippet from Apple’s documentation, Safari CSS Animation Guide for iPhone OS page 13-14.
The reason this example works is that the -webkit-transition properties are defined in a generic <div> tag, not in a specified class that applied only for “before” state.

			
div { /* this applies for both 'before' and 'after' states */
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 2s;
}
div.fadeAway {
	opacity:0;
}
			
		

What To Do – 2

Move all the -webkit-transition properties into the newClassName definition.

			
div.fadeAway { /* give the transition rules to "after" state */
	opacity:0;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 2s;
}
			
		

Now really a JavaScript-free. Yay.

Update: WebKit CSS Animation

Regarding to the bug on CSS animation I mentioned on last blog entry, I got a reply from an Apple developer (Quick!)

The issue:
CSS animation doesn’t work with onclick=”this.className=’newClassName’” anymore on the latest WebKit nightly build

I filed the bug on WebKit Bugzilla, and got the answer already. See the ticket.

Basically, this bug was closed (invalid) because they have decided to change the animation implementaion, from “source transition” model to “destination
transition” model.
(Read the whole explanation)

Stay tuned for the new documentation from WebKit or Apple!

UPDATE / CORRECTION (July 23, 08) – please see “More Update on CSS Animation”

WebKit CSS Animation Examples

According to WebKit.org, the WebKit supports the simplest kind of animation called a transition.

Transitions are specified using the following properties:

• transition-property – What property should animate, e.g., opacity.
• transition-duration – How long the transition should last.
• transition-timing-function – The timing function for the transition (e.g., linear vs. ease-in vs. a custom cubic bezier function).
• transition – A shorthand for all three properties.

Last week, I’ve noticed that Apple had published some new documentations at Developer Connection, including
Safari CSS Animation Guide for iPhone OS and Safari CSS Transforms Guide for iPhone OS (Go to download page).
Since I read the WebKit.org blog entry last year, I was interested in the CSS animation so I finally decided to give it try.

I spent some time writing several CSS tests, ran on several different WebKit browsers. and my conclusion is that:

1. the animation and transforms are pretty buggy on current iPhone Safari.
2. the current WebKit nightly (as of July 19) has some bugs so animation doesn’t work when swapping class names

with oncick event handler attributes like, using this.className='newClassName'.

The className swap was working perfectly, until I installed the newer build, r35231.
I will file the bug to Webit.org soon.

On latest build, build r35075 – r35231 (the newest one I tested),
changing the values of style object properties, instead, as
onclick="this.style.opacity='0'"

I wanted to create the animation entirely absent of JavaScript, but now I need to use a function to handle multiple style properties…

UPDATE / CORRECTION (July 23, 08) – please see “More Update on CSS Animation”

I still haven’t gotten a chance to try iPhone 3G yet, and I tested only on my old iPhone with the latest upgrade.
Are there any differences in between two Safaris? I doubt it.

Anyway, Open the test page I wrote in a new window!

Animate Opacity

Opacity Transition Test

Expected result: When a user mouse-overs the box, an object appears smoothly (opacity=.5) in 2 sec.
On mouse-click, the image fades in completely (opacity=1).

	
.box1 img{
	opacity: 0;
	-webkit-transition: opacity 2s ease-out;   /* shorthand for all three properties */
}
.box1 img:hover {
	opacity: .8;
}
	

	
<div class="box1">
	<img src="images/apple.png"/>
</div>
	

Animate Position – Move to right

Position Transition Test

Expected result: the image moves to the right as fading out.

	
.box2{
	opacity: 1;
  	-webkit-transition-property: opacity, left;
	-webkit-transition-duration: 1s, 1.5s;
	transition-timing-function: ease-in;
}
	

	
<div class="box2" onclick="this.style.opacity='0'; this.style.position='relative'; this.style.left='500px'">
	<img src="images/apple.png"/>
</div>
	

Animate Letters – Letter-Spacing

Letter-Spacing Test

Expected result: When the text is clicked, each letter spaces out as fading away.

It is pretty cumbersome to handle multiple style properties with onclick, so I added a JavaScript function to take care:

	
function switchStyles(style,obj) {
	for(var prop in obj)
		style[prop] = obj[prop];
}
	

UPDATE / CORRECTION (July 23, 08) – You don’t need this hassle with JS. Please see “More Update on CSS Animation”

	
.box3{
	color: green;
	opacity: 1;
  	-webkit-transition-property: opacity, letter-spacing;
	-webkit-transition-duration: 1.5s, 2s;
	transition-timing-function: ease-out, linear;
}
	

	
<div class="box3"
     onclick="switchStyles(this.style,{
	    color : 'lime',
	    opacity : '0',
	    letterSpacing : '3em'
});">
	some text to be clicked here.
</div>
	

Transform – Click to spin the image and fade away

Position Transition Test

Expected result: the image rotates twice (360 deg x 2) around the Z axis, as fading.

	
.box4{
  	-webkit-transition-property: -webkit-transform, opacity;
	-webkit-transition-duration: 2s;
	transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0); /* equivalent to ease-in-out */
}
	

	
<div class="box4"
	 onclick="switchStyles(this.style,{
	    webkitTransform: 'rotate(720deg) translate(1000px,0px)',
		opacity: '0'
});">
	<img src="images/apple.png"/>
</div>
	

Also, I tried CSS gradients. These still don’t seem to work on iPhone but worked on all recent WebKit nightly.

CSS Gradients – Linear and Radial

Gradients Test

Expected results:
Linear – Green to white top-to-bottom linear gradient
Radial – White to pink center-to-outer radial gradient
Actual results:
Nicely working on WbKit nightly builds. Failed miserably on both Mac desktop and iPhone Safari 3.1.

Screenshot of the results on WebKit nightly


The syntax is as follows:
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

	
#gradientLinear{
	float: left;
	width: 180px;
	height: 180px;
	border: 1px solid #11276c;
	background:
		-webkit-gradient(linear, left top, left bottom, from(rgba(158,192,0,.85)), color-stop(1, #fff));
}

#gradientRadial{
	float: left;
	margin-left: .5em;
	width: 180px;
	height: 180px;
	border: 1px solid #11276c;
	background:
		-webkit-gradient(radial, center center, 3, 80 80, 100, from(rgb(255,255,255)), to(rgba(228,56,132,.85)), color-stop(0%,#fff));
}
	

Resources:

1. Surfin’ Safari – CSS Animation
2. Surfin’ Safari – Introducing CSS Gradients
3. Safari CSS Animation Guide for iPhone OS
4. Safari CSS Transform Guide for iPhone OS