A few month ago, after I was saw the impressive web wireframes templates and iPhone stencil created with Google Docs by Morten Just, on Docs blog, I started playing with this Google’s new addition to the Docs family, Drawing, to copycat this idea and made a Palm Pre stencil.

So here you go! You can check out my Palm Pre stencil on Google Docs.
If you’d like to have your own copy, sign in your google account, then:
Choose file > make a copy

You can drag or copy the UI widgets to the white canvas (printable area). To edit text, you need to ungroup the object first, by selecting the UI widget to be editted and go to Format > Ungroup (you may need to repeat ungrouping grouped objects) then double-click the text to edit.

Also, I labeled each UI objects to match the Mojo UI Widget names so developers can reference the stencil and code easily!

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!

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

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

I mentioned that I had been writing an iPhone app using Appcelerator before, and an app was almost ready to go. However, I was not able to publish it with the particular contents so I re-wrote the app and re-created some graphics to finish up this brand-new app.

This is free of charge also ad-free (for now, at least!) so get your copy now!

Now I have joined the human interface team at Palm, inc. It’s awesome I can work with a shiny new toys (Pre and Pixi), also I am happy to keep working on WebKit!
(Plus, it’s cool I constantly bump into my ex-colleagues and friends from Yahoo! in the area!)

One of the interesting I have been independently doing is that writing an app for iPhone with JavaScript, and this time, not an web app but a “native” Cocoa app. Yes I said a native iPhone app in JavaScript! But how? -I used this excellent open-source platform, called Titanium by Appcelerator! Without bothering Obj.C or Java, Titanium allows developers to write iPhone and Android apps with the familiar web technology.

So, as a test run, I have created the iCuteoverload app for iPhone again. (Originally, I made the web app for iPhone, using iUI in 2007)
I will not release this app on AppStore -not because of the technical issue but the agreement with the business decision. (Yes, this app contents are not mine and copyrighted!) But I should be able to show the video capture as a demo to tell you what Titanium can do for web devs like me!

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!

Ever since I heard of Snow Loepard’s hardware-accelerated CSS, I wanted try some cool CSS animation for Safari 4.

So after installing Snow Leopard, I spent about a day and half to try creating my first 3D animation with Flickr API.
Honestly, I wasn’t sure where to get started to make some cool 3D effect, so what I did was I tried to reproduce the one on webkit.org example and modify a lot by trial and error approach.
Also, I have been freqently asked about how I did with “My Favorites” feature on my Palm Pre app (which is also a WebKit-based), so I throw the HTML5’s local storage demo with this 3D demo.

So here, you can try my CSS 3D and Local DB Demo!!!
Be sure to view this demo on Safari 4, iPhone Safari, or WebKit Nightly! This doesn;t seem to work on other Webkit-based browsers such as Chrome and Palm.

I am not going to write a whole tutorial how to replicate this animation but I try to explain some examples.

Spin a Wheel!

Look at one of the flicke photo wheel on my demo. This is a combination of a few different animation.
Let’s focus on the small wheel inside. This is the snippet of HTML of the wheel:

<div id="gallery">
  <div id="pic01"><img src="..."/></div>
  <div id="pic02"><img src="..."/></div>
  ... (10 more imgs)
</div>	

OK, for now, let’s ignore how each photo is rendered to form a loop, and just focus on the animation of one div, #gallery (= a wheel). A band of photos is ratating clockwise around Y-axis.
This means the animation starts as -webkit-transform: rotateY(0); and goes around an circle for a whole 360 degree. -webkit-transform: rotateY(-360deg);.
Use positive if you want to rotate in opposite direction.
I set the whole circle completion span as 60 seconds in linier motion and the animation goes infinite.

This diagram from Apple’s Safari Reference Library explains coordinates.

So the css for this movement is defined as:

#gallery {
  -webkit-transform-style: preserve-3d;
  -webkit-animation: spinY 60s linear infinite;
}

@-webkit-keyframes spinY {
  from { -webkit-transform: rotateY(0);}
  to   { -webkit-transform: rotateY(-360deg);}
}

Use 3D style, -webkit-transform-style: preserve-3d;to give 3D illusion. I set the initial perspective in its parent div as -webkit-perspective: 380;.
It gives you an illusion of the depth. You can make the value lower to make it look more up-close to you.
The unit of perspective should be “px”, but it looks like you’d better remove it for iPhone.

To figure out how to render each photo in loop, also other animations, please look at the source code of my demo.

Also, I will write about how to use HTML 5’s local storage sometimes later!

References

• 3D Transforms by Webkit.org
• CSS Transforms (2D) by Webkit.org
• CSS Animation by Webkit.org
• CSS 3D Transforms Module Level 3 W3C Working Draft
• Safari Reference Library -Transforms by Apple

Can’t have enough cute!
Instead of upgrading my previous app, iCuteOverload for Palm, I have created this power-up version of cute app called, PREtty Cute Suite.

This app is more offensively and obnoxiously cute with more cute-related rss feed and flickr pics.
Included feeds are:

1. Cute Overload
2. I Can Has Cheezburger
3. Cute Obssesion
4. Epicute
5. Super Cute Kawaii
6. Cupcakes Take Tha Cake

Also, a bunch of cute picture streams from Flickr.


This app allows you to save the pix/feeds you like as your favorites, also share the links via email.

Currently available as a “Homebew” app on PreCentral.net for free.
I have no plan to submit this to the Palm official app store in this moment, at least for this version 0.9.