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>Great! Now, let's insert some text within the style tag to create a WebKit transition.
<head>
<style>
</style>
</head>
<body>
</body>
</html>
Creating the Styles
We're going to create a basic box to demonstrate the -webkit-transition feature. Here's what mine looks like:
.box {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.
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);
}
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>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.
<div class="box"></div>
</body>
I'll be back next month for a new edition of Super CSS. See you then!
Great post. A+
ReplyDeleteOk, absolute CSS newbie question incoming, but how do you open (would use be a better word?) webkit? Or is there somewhere else you go to start everything off? Is it the HTML page? How do you get to that? Ok. So, more than one newbie question apparently...I'll just drop those off. More will probably come later, haha.
ReplyDeleteHi Kelsy,
ReplyDeleteAlways good to ask questions! Webkit is a layout engine used by certain web browsers. A layout engine reads the HTML and CSS figures out how it all connects together and then displays it in the browser window. Annoyingly to web designers, different browsers use different layout engines and that means sometimes we have to use these special tags in the CSS to target newer features (like the transitions that Nate was showing off).
How do you open (would use be a better word?) webkit?
You can't really open or use webkit. What you can do is understand more about webkit and then target it when you write your CSS by putting -webkit- before the CSS property. This ensures that the newer, cool stuff in CSS3 will work properly. The best way to learn this stuff is just reading blogs like Nate's SuperCSS blog posts, A List Apart, etc.
Or is there somewhere else you go to start everything off?
The best way to start practicing is writing your own html and css with a text editor. Here at the Center we have textwrangler on the macs, notepad on windows, and dreamweaver on both. After you write and save your .html file you can preview it by opening it with a web browser. If it looks good, you can upload it to your Copland web space with a ftp client (we have Fetch on the macs, and SSH ftp client on Windows)
Is it the HTML page? How do you get to that?
Yes, another great way to learn more is to inspect the HTML page. If you right click on any page using Google Chrome you will see a menu with the option to "View Page Source" if you click this you can see the HTML page. This is a great way to learn more about how things work. If you choose "Inspect Element" it will jump you in the HTML to whatever you right-clicked on.
I will also put in a plug for my workshop Intro to Authoring Web Pages: The Power of HTML and CSS in April. I think it is already full, but if you are interested, join the waitlist because I might schedule an additional session, and people also often drop out when it gets closer to the date.