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!

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

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

Today, I am not going to post some CSS3 tricks on Webkit, or stuff like that. Instead, I post a list mobile browsers, since I am often asked about mobile / WAP browsers by engineers, product managers, and mobile-curious or mobile-newbie people.

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!

iPhone OS 3.0 is now available, and developers can take advantage of the newly introduced geolocation feature in Safari browser.

To try it out quickly, I used Twitter Search API again to create a tiny test app called, NeighborTweet, which enable you to find out who are tweeting in your neighborhood. Basically, what it does is that obtain your location, and pass the latitude and longitude data to Twitter search and display the result tweets.

Try it out on your iPhone with:
Short URL http://bit.ly/K0ZaE
or
This QR Code with scanning app like BeeTagg.

If you are interested in learning more on Twitter search API and geocode, please read Twitter Wiki.

OK, now here’s the code.
To find out your location with Geolocation class is simple – you just call getCurrentPosition() method. This initiates an asynchronous request to detect the user’s position.

navigator.geolocation.getCurrentPosition(someFunction)

Get latitude and longitude, by using coords instance:

latitude = position.coords.latitude;
longitude = position.coords.longitude;

Here’s an actual code I used to create the sample app:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    callback(position.coords.latitude, position.coords.longitude);
  });
} else {
  alert("Geolocation services are not supported by your browser.");
} 

function callback(lat,lon){
  // twitter search json-p callback
  var geocode = "&geocode=" + lat + "%2C" + lon + "%2C1mi";
  var fullUrl = url + geocode;
  ...
}
var url = "http://search.twitter.com/search.json?callback=getTweets";

function getTweets (json) {
  // display json data
  ...
}

References

Geolocation References:

• Safari Reference Library – Getting Geographic Locations – Apple Developer Connection
• Using geolocation – Mozilla Developer Center
• Geolocation API Specification – W3C Working Draft

More References:

• Twitter Search API Wiki
• Remote JSON – JSONP

Although W3C’s document, The Geolocation API Specification is still in draft state and not yet finalized, major browsers are working to support this functionality and as we all expected, Mobile Safari is not an exception.

According to ComputerWorld blog, the geolocation API has been implemented for the upcoming API. Apparently, Seth of ComputerWorld tried the test webpage, built by Doug Turner for Mozilla on a 3.0B5 iPhone’s Mobile Safari.
This screenshot is grabbed from the CompWorld’s blog.

Obviously I don’t have access to the new iPhone so I just tested the test page (http://people.mozilla.org/~dougt/geo.html) using Geolocation API watchPosition() method, on Mozilla 3.5. (And this should works similarly on Fennec too. I wish I could try on an actual device!)

I am using my old PowerBook G4, with Comcast,. Since this Mac is not equipped with GPS device, Firefox gathers information about nearby wireless access points and computer’s IP address.

Nice! I can’t wait to see this working on iPhone!
Especially, NextMuni.com with location enabled, that tells me where I am and where the nearest bus stop!

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

Here comes Fennec!!! (Release note)

It’s been a whole year since Firefox first announced that they were developing for their mobile version, after the not-so-successful Minimo for WinMo, and they finally released this public alpha for Nokia N810, whose default built-in browser is already Mozilla-based MicroB.

Unfortunately neither I or my beloved DeviceAnywhere has N810 device, so I tried the one for Mac OS.
Because this is for N810 WVGA screen, so the browser window is set 800×480 pixel, and support touch screen (so you need flick the screen to navigate). I am wondering how comfortable with the UI on other smaller screen devices, or how non-touch screen UI would look like. (Or are they even planning to support one?)

Anyway, I was playing around and tested some pages quickly:


(left) Startup screen, and (right) Yahoo! search.



(L) My twitter home page. Editting was a bit pain because I don’t see a cursor on this emulator. (R) Run Acid3 test. 90/100 is good (better than iPhone Safari but doesn’t beat the latest Webkit which gets perfect score).



(L) iCuteOverload. Looks like it supports iUI nicely. I need to take out the “-webkit” prefix to see if border-image works on Fennec. (R) Some tests on event – not seems to support (both results “true” on iPhone Safari)


Anyway, overall I think this is pretty sweet. I am excite to see the battle among Webkit – Apple vs. Google, and vs. Mozilla.Also, if you are lucky enough own N810, try install it on your device!