To follow on, you need to make an html page, a CSS file, and few pictures. drive your own favorite pics.
HTML CODE:
<div class="image-block"> <img src="image" alt="" /> <div class="reflection"> <img src="images" alt="" /> <div class="overlay"></div> </div></div>
Each image needs an additional block that contains a copy of the image for reflection and a div with category "overlay" that we will use for adding fading gradient.
I have sorted each image and div into a container div with class "reflection". Let’s call this reflection block for referring it.
Now each original image and reflection block is wrapped into a div with class "image-block". Let’s call this image block. you'll have any numbers of image blocks in your code if needed, and that’s why I actually have used classes for CSS instead if IDs.
Ok, this code is straightforward enough to know (I guess), thus let’s pass on to CSS.
CSS CODE:.image-block { width:78px; margin:0px 10px; float:left; }
.reflection { position:relative; }
.reflection img {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
filter: flipv; opacity:0.20;
filter: alpha(opacity='20');
}
.overlay { position:absolute; top:0px; left:0px; width:78px; height:120px;
background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%);
background-image: -o-linear-gradient( rgba(255,255,255,0) 25%, rgb(255,255,255) 40%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0)));
filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff);
}
Let’s go through the code step by step.
.image-block { width:78px; margin:0px 10px; float:left; }
.reflection { position:relative; }
Now we have our stage ready, so let’s begin the magic with CSS3
.reflection img {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
filter: flipv;
opacity:0.20;
filter: alpha(opacity='20');
}
This block of CSS code uses CSS3 and that is filters to flip the image vertically and add transparency to the image.
Because transform property isn't fully enforced by all browsers, we want to add browser prefixes to create it operating in every browser engine.
We have used transform: scaleY(-1); to easily flip the image vertically. Same effect is achieved in web explorer by adding filter: flipv;
Last 2 lines opacity:0.20; and filter: alpha(opacity='20'); adds transparency to the image.
Now we only got to add a gradient to add fading effect to the image, we've CSS3 gradients handy for this. Some facts regarding CSS3 gradients:
- CSS3 Gradient property is enforced differently in all browsers.
- CSS3 Gradient property isn't supported by ie as well as IE9.
- Gradient in CSS is just supported on background pictures.
.overlay { position:absolute; top:0px; left:0px; width:78px; height:120px;
background-image: -moz-linear-gradient( center bottom, rgb(255,25 5,255) 60%, rgba(255,255,255,0) 75%);
background-image: -o-linear-gradient( rgba(255,255,255,0) 25%, rgb(255,255,255) 40%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(25 5,255,255,0)));
filter: progid:DXImageTransform.Microsoft.Gradient( gradientType= 0, startColor=0, EndColorStr=#ffffff);
}
Because CSS3 gradient property is merely supported on background pictures, we cannot add it directly on our reflection image.
I have additional a div with class "overlay" for this purpose. I actually have positioned this div higher than reflection image, with position absolute. And additional a width and height equaling to image.
At last I actually have added CSS3 gradient property to the current overlay div, that has additional a fading impact to the image.
I’m looking forward to your comments and many thanks for reading!
No comments:
Post a Comment