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

I wrote this article, Creating Usable UI—Buttons and Interactive Dialogs, for Palm webOS Developer Portal. I walk through the Enyo button setup, the proper use of color and text, and how best to use buttons in intuitive, consistent user dialogs.

This is written for the webOS’s very own enyo.js framework, however, the major contents should apply to any web and app development so please take a look!

Thanks!

p.s. In case you don’t know – I am a developer relations engineer at Palm (acquired by Hewlett-Packard). As you may know, the best-yet-most-unfortunated mobile-platform, webOS’s future is unknown in this moment…

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!

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!

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

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

Finally, I have my app, called iCanHasLOL published on App Store!
Actually the app was reviewed within 24 hours by Apple, although I’ve heard it would usually take 2 weeks.

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!

Hello, I have neglected my blog since September although there have been some blog-worthy events like N900 meetup (plus Droid experience and new Fennec demo. See the videos by Tnkgrl from the link!), California Data Camp, release of Net2Streams Pro (the streaming radio app for Palm WebOS I helped writing) etc… Well, I keep microblogging on Twitter almost daily basis so follow me if you’d like!

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!