CSS3 Gradients & HTML5 Databases
Thanks to those who make Doctype possible!
CSS3 Gradients
With the release of Firefox 3.6, CSS3 gradients are finally available in most of the major browsers. This is huge win, because it means that you can experiment with gradients in your design without having to re-export images.
Syntax
Mozilla and Webkit have a slightly different syntax, but the concepts are the same. In Mozilla, the first argument represents where the gradient starts. This can be used the same way you use background position with descriptors like top or left, but you can also use pixels, em, degrees, and radians. So for example, by setting this to 180 degrees, you can create a horizontal gradient. The next two arguments are the two colors you want your gradient to start and end with. All of the arguments, should be separated with commas.
background-image: -moz-linear-gradient(top, #ff0000, #0000ff);
For webkit, the syntax is a bit different. You'll start with -webkit-gradient, and then instead of specifying the type of gradient you're using inside the name of the property, like in Mozilla, you use "linear" as the first argument. The next two arguments are "left top" and "left bottom." These tell the browser the start and end points AND the directionality of your gradient.
background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#0000ff));
You can also use integer values. Think of the first pair of numbers and the second pair of numbers as coordinates, with a line drawn in between them that specifies where the gradient should go. If you can use gradients in Photoshop, this should sound familiar to you. Finally, there's the "from" and "to" functions, which each take a color. These just say what two colors your gradient should start and end with.
-webkit-gradient(linear, 1250 225, 0 225, from(#0000ff), to(#00ff00));
To make this work in both Mozilla and Webkit, you simply use two separate background-image declarations.
background-image: -moz-linear-gradient(top, #ff0000, #0000ff);
background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#0000ff));
Stop Points
If you want more than one color in your gradient, or if you want to change where your gradient begins and ends, you'll need to use stop points. For Mozilla, all you have to do is specify additional colors. By default, they'll be evenly distributed.
background-image: -moz-linear-gradient(top, #0000ff, #ffffff, #00ff00);
If you want to move the stop points, you can use percentages to specify where they should be located along the gradient. After the color, just put the percentage position of where you would like to place the color stop.
background-image: -moz-linear-gradient(top, #0000ff 0%, #ffffff 60%, #00ff00 100%);
In webkit, we use the color-stop function, which takes two arguments. The first is a position for the color stop and the second argument is the color.
-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0000ff), color-stop(60%, #ffffff), color-stop(100%, #00ff00));
Resources
- W3C Draft Specification for linear gradients in CSS3
- Webkit's Introduction of CSS3 Gradients
- Mozilla's Introduction of CSS3 Gradients
- CSS3 Gradient Generator
HTML 5 Databases (WebStorage)
Two new features introduced in HTML 5 are the WebStorage and WebDatabase modules.For the last 15 years or so, if we wanted to remember information in the browser, we had to use cookies. While they serve their purpose, as a datastore for client-side interfaces, they can be kludgy and limited. The WebStorage features defined in HTML5 make a great interface for storing values on the browser.W3C WebStorage module screenshot The biggest difference is that WebStorage data is not sent to the server each request, like the cookie data is.
localStorage and sessionStorage
WebStorage offers two data stores: sessionStorage and localStorage. Both have the same WebStorage interface, but sessionStorage clears it's when the window closes, and localStorage persists until the user or software cleans the data out manually.
The webStorage system is a very simple key-value database. There is one global namespace, in which you store string key value pairs. the databases are accessed from global objects localStorage and sessionStorage. In the examples we use localStorage, but sessionStorage can be used the exact same.
To store a value you just call:
localStorage.setItem('key", 'value');
To retrieve a value just call:
localStorage.getItem('key')l
Now you can assign non string keys or values, but they will have toString() called on them before they are used which usually leads to confusionc
The storage Objects have a length attribue, a key(n) method which returns the nth key, a removeItem(key) method to delete a key, and a clear()
method to clear out the whole store. In addition to the getItem and setItem interface defined in the spec, most implementations will have the storage objects behave like a normal javascript object, and you can get and set values using square bracket or dot notation.
localStorage.keyName = "value";
localStorage.keyName; //=> "value"
localStorage["keyName"] = "value";
localStorage["keyName"]; //=> "value"
Currently, WebStorage support is pretty solid in Firefox 3.5+, Safari 4 (and Mobile Safari), Chrome, and Internet Explorer 8 (in both IE7 and IE8 rendering mode).
Resources
This was just an overview of the webStorage module. In addition to the WbStorage key value store, the WebDatabase module provides a full SQL database available to javascript. Originally we were going to cover that on this episode, but there is too much cool stuff in it, so we are giving it it's own segment next week. So don't forget to subscribe on iTunes or via RSS so you won't miss it.