Written by HTML5 is a vital markup language widely adopted by web designers, and CSS3 has a really great potential for creating nice effects. We may say that HTML5 & CSS3 are bringing so much useful into our lives.
In this article, I will show you nine HTML5/CSS3 image effects tutorials in three parts to help you master your web developing skills. You would like to apply these effects to build your own stylish and functional portfolio showcase, photo gallery, etc. Below is part one, and hope you like these three image effects tutorials with HTML5 & CSS3.
1. Fullscreen Image Blur Effect with HTML5
When working with larger interface elements or image links, a blur when hovered over is the way to go. This tutorial will mainly teach you how to create blur images on the transition to another one, creating a smooth effect. You need to add some images in the structure that will serve as backgrounds, and add the canvas element to contain a blurred version of the image. With the blurred canvas image visible, you can either show the new image immediately or show it blurred and then “sharpen” it.
You may download source and set this HTML5 image effect example by changing the variation between 1 and 2:
animOptions = { speed : 700, variation : 1, blurFactor : 10 }
Here, the speed is the animation speed between each transition (from normal to blurred image) and the blurFactor is basically the radius for the blur effect.
2. HTML5 Canvas Image Effects: Black & White
It is widely known that HTML5 canvas is a great alternative to static bitmaps. If we add a black and white effect on the fly in JavaScript instead of relying on CSS sprites, the effects can be refreshed if you change the original image. Here in this tutorial, you will learn to add black & white effects with HTML5 canvas. First you need to import the bitmap image on canvas.
Then use the function getImageData() that store image in a variable imgd and you’ll be able to access every single pixel by storing the data array in the pix variable. Then you can use “for” statement to loop through each pixel, and through each value of a single pixel. Please see the specific markup here.
3. Original Hover Effects with CSS3
This tutorial will teach you how to exploit the enormous power of CSS3 in a very creative way. You are going to learn to create some thumbnail hover effects with CSS3 transitions.
The structure of markup is very simple in this tutorial. The first thing you need to do is create a container that will have your image and all the other information. Inside the “view”, you need to insert an element with the class “mask” that will be responsible for your effects driven by CSS3.
<div>
<img src=”image.gif” />
<div class=”mask”>
<h2>Title</h2>
<p>Your Text</p>
<a href=”#”>Read More</a>
</div>
</div>
Then you will learn to set the general rules for your class and then add a special class with the desired effect styles.
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}
Here are 10 examples of different styles to reveal some description of the thumbnail. For example, you can use the translate property along with the transition-timing-function to slide the content in from the left, or use two mask elements to slide them in from the bottom right and the top left.
Hope you find the above tutorials useful, and other three HTML5 or CSS3 image effects tutorials are to be continued in the following post of part two.
