If You’re Not Using Webkit You’re Doing It Wrong

Time for a sweeping statement. If you’re not using a webkit browser, Apple Safari or Google Chrome, you’re doing it wrong! And you’re missing out on a lot of special features. Not just on this website but on a whole host of others.

So, what are some of the advantages of using a -webkit browser I hear you ask? Well, within this article I will do a small case study on this website to let you see some of the things that -webkit can offer.

The Logo

When you hover over my logo you should notice two things happening. First you will notice the animation that is flipping the logo upside down and the second thing you will notice is the logo decreasing in size. Now, you might not be very impressed with either of these techniques as they are easily achievable with javascript but what if I were to tell you that these were infact created with css?

To achieve this I have implemented an effect called webkit-transform, available in browsers driven by the webkit rendering engine(Chrome and Safari). The code in my stylesheet looks like the following

header a img {-webkit-transition: all 0.15s ease-out;}
header a:hover img,
header a:focus img {-webkit-transform: scale(0.7) rotate(180deg);}

The first part of the code tells the transition to last a set amount of time, 0.15, and for the effect to move smoothly (ease-out) and the second part of the code, the a:hover and a:focus, tells the element to scale to 0.7 of it’s size and rotate 180 degrees.

Background Gradient

Background gradients are quite the rage but what if you could display a gradient without the use of an image? Well surprise, surprise with webkit you can.

background: #EAEAEA;
background: -webkit-gradient(linear, left top, left bottom, from(#FFF),
 to(#A1A1A1), color-stop(1, #A1A1A1));

The above piece of code is what I originally had implemented on my website but more about that in the next step. You will notice that I have specified two background properties, the first background property is for a fall back option for browsers that don’t support the webkit engine and the second call only applying to webkit browsers.

First you specify that you wish to use the webkit-gradient on the background element and within the brackets you can then specify the properties you wish to use. Linear defines the way the gradient displays, another option you can choose is radial, and left top to left bottom defines the direction of the gradient. The last section tells the browser the colour you wish to start and finish on.

However shortly after I pushed my redesign live with the code above, someone suggested an alternative.

background: #EAEAEA;
background: -webkit-gradient(linear,left top,left bottom,from(#fff),
to(#a1a1a1),color-stop(1,#a1a1a1)) fixed no-repeat 0 100%;

This code does all of the same of the previous version but this time the gradient does not scroll the full length of your content, instead it will only last the length of the browser window.

Some people will suggest that you specify the -webkit code above the fallback statement so that you are making less calls.

Menu Buttons

My main menu buttons have also been created in exactly the same way as the background-gradient. This is a subtle effect that when combined with a text-shadow you can create a pretty realistic button without the use of an image.

What else can webkit offer?

Above I’ve tried to give you a little introduction into the world of -webkit, little pieces of code that can be sprinkled throughout your websites. However, if we look at the opposite end of the spectrum, some of the possibilities that -webkit can offer are outstanding.

• Doctor Who Intro
• Star Wars Atat

All funny buggers asking if this works in Internet Explorer 6 will be shot at dawn.

If you liked this article then please feel free to Tweet it