Stiern.com

July 3rd 2009 by Peter · 7 comments

Enhancing Your Site with WebKit

WebKit is an open source browser engine. Apple uses WebKit in Safari, Mail, and other applications. Google’s Chrome browser, along with the S60 browser and the iPhone browser, is also built on WebKit. Some of the cool features of WebKit is transitions and transforms. With purely CSS you can create stunning animations. Your site will still work in other browsers, but the users with WebKit browsers will just get a slightly better experience.

Take for example Elliot Jay Stocks’ new website, elliotjaystocks.com. It is in it self a very beautiful website, but if you open it in e.g. Safari 4, it’s even more beutiful. When you hover your mouse over the images, the border will slowly fade into a lighter color. In non-WebKit browsers, it’ll just be a very sudden transition. This done solely by CSS.

Elliot Jay Stocks' new website

Another example is Atebits’ website. Atebits is the company behind the Twitter app Tweetie. Let’s have a look at their front page:

Atebits' website

That’s just beautiful, huh? Well, let’s dive into how we easily can add similar function to our own site.

The first property we have to learn is -webkit-transition. The -webkit-transition property is a shortcode for the three properties -webkit-transition-property, -webkit-transition-duration and -webkit-transition-timing-function.

We’ll probably learn this the best by having a look at an example, so here goes: We want to create a div that, when hovered, fades into another color. Here’s the code:

div {
-webkit-transition: background-color, color 0.4s linear;
background-color: #777777;
}
 
div:hover {
background-color:#999999;
}

And here’s the example:

This wasn’t so hard, was it? Now let’s move on to using the -webkit-transform property. It allows you to scale, rotate, translate, and skew the object. It even allows you to use matrices for advanced transformations. Let’s try to rotate and skew the div from before:

div {
-webkit-transition: all 0.4s linear;
background-color: #777777;
}
 
div:hover {
-webkit-transform: scale(1.3) skew(3deg);
background-color:#999999;
}

This is just a little glimpse into what you can do with WebKit. Hopefully, you’ll find it useful.

i55iqj8amt

Related posts:

1. Create a Cool Messy List with CSS3 and nth-child
2. 5 Cool Ways to Add Graphs to Your Website
3. Adding Custom Google Maps to Your Website