Hey guys, Nate "Top Dog" Tlaseca here. Today, I'm going to teach you about a little feature known as WebKit and how it can help make your website beautiful.
What is WebKit?
WebKit is a web browser engine used by browsers such as Safari and Chrome. You can make use of WebKit features such as animation, transform, transition, and more through the use of the -webkit prefix in your CSS. Other browsers have the ability to use WebKit features, but use their own CSS tags to ensure browser compatibility such as -moz for Firefox, -o for Opera, and -ms for Internet Explorer.
All WebKit features will (most likely) use the same -webkit prefix once they leave the experimental phase and are implemented in the browser, but until then, you should always use each vendors custom prefix to make sure these cool features work. For our first lesson, I'm going to show you how to use -webkit-transition and -webkit-transform, two features that have lots of applications and are fairly simple to use.
Set Up Your HTML Page
Typically, you would put your WebKit styles in a CSS file, but for simplicity, we're just going to use the style tag in the head of the HTML page. Your basic HTML template should look something like this:
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
Great! Now, let's insert some text within the
style tag to create a WebKit transition.
Creating the Styles
We're going to create a basic box to demonstrate the -webkit-transition feature. Here's what mine looks like:
.box {
display: block;
width: 50px;
height: 50px;
background-color: #333;
-webkit-transition: width 1.5s, height 1.5s,
background-color 1.5s, -webkit-transform 1.5s;
transition: width 1.5s, height 1.5s,
background-color 1.5s, transform 1.5s;
}
.box:hover {
background-color: #FF8888;
width:200px;
height:200px;
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
Let me explain each part for you. First, I created a class of
.box so that I can assign a div in the HTML's
body a class of
.box later. This will allow us to apply these properties to the div.
Next, using the
-webkit-transition tag, I defined what I want box to do once the WebKit function is activated. The width, height, and background color will change over the course of 1.5 seconds, and the box will also transform (in this case it will rotate) by an amount that I defined in the next segment.
See how
transition follows
-webkit-transition? This is the browser compatibility I was referring to earlier;
transition is the shorthand method of writing
-webkit-transition, -
moz-transition, etc. For this demonstration, I'm only using
-webkit-transition to cut down on the length of the code.
Finally,
.box:hover determines what I want the page element to do once I hover over it. Notice how I have a line corresponding to each property following the
-webkit-transition property. Once I hover over the box, the box will switch from using the properties under the
.box segment to the properties under the
.box:hover segment. You can use
:hover property without using WebKit features, but the WebKit features will give more interesting results. We'll take a look at the final result after one more step.
Creating a <div>
This portion of the demo is really simple. All you need to do is insert <div class="box"></div> after the <body> tag, like so:
<body>
<div class="box"></div>
</body>
And that's it! Save your HTML file and open it up in the browser. Hover over the gray box below to see it in action.
I'll be back next month for a new edition of Super CSS. See you then!
