WebKit Filters
The filter property will allow us to alter a page element's appearance with effects such as blur, color alteration, fade, and so on. This can be useful for styling all images on a page or creating unique image and link hovers. But be aware: this WebKit function is relatively new, so not all browsers support it.
The Code
To get started, set up a basic HTML page with a div tag in the body and a style tag in the head:
<html>
<head>
<style>
</style>
</head>
<body>
<div>
</div>
</body>
</html>
<html>
<head>
<style>
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Next, we're going to insert an image link within the div we created, like so:
<html>
<head>
<style>
</style>
</head>
<body>
<div>
<a class="gray"><img src="http://www.pixeljoint.com/files/icons/full/mercenary_2.png" /></a>
</div>
</body>
</html>
You can use any image url you want for the img src. Also, I gave the link tag a class of "gray" so that we can easily identify it later when we're applying styles.
Styling the Image
For this demonstration, I'm going to use the -webkit-filter: grayscale property on the image so that when my mouse is not hovering over the link, it appears as a grayscale image, but when my mouse moves over the image, it transitions in to a full color image. There are two parts to this code: one for the static image, and one for when I hover over it. This is what the first part of the code to be inserted within the style tag will look like:
.gray {
-webkit-filter: grayscale(100%);
-webkit-transition: all 0.5s ease;
}
And here is the second part for when the mouse is hovering over the image link:
.gray:hover {
-webkit-filter: grayscale(0%);
}
So the the image will change from 100% grayscale to 0% grayscale. I also added the -webkit-transition function in the first segment so that there is a smooth transition from grayscale to color.
The Code in Action
When we view the code all together, it should look like this:
<html>
<head>
<style>
<body>
<div>
<a class="gray"><img src="http://www.pixeljoint.com/files/icons/full/mercenary_2.png" /></a>
</div>
</body>
</html>
<head>
<style>
.gray {
-webkit-filter: grayscale(100%);
-webkit-transition: all 0.5s ease;
}
.gray:hover {
-webkit-filter: grayscale(0%);
}
</style>
</head></style>
<body>
<div>
<a class="gray"><img src="http://www.pixeljoint.com/files/icons/full/mercenary_2.png" /></a>
</div>
</body>
</html>
Below is the outcome:
Pretty neat, right? You can read more about the filter property here. Play around with the different filters you can apply to get a sense of what you can do with this property. I'll be back next month with another coding lesson. Thanks for reading!
No comments:
Post a Comment