Breadcrumbs

[mikethedj4]

For this tutorial we're going to be using the image I created in this tutorial for the reflection.

Now there's a couple ways on how you'd achieve this effect.
1) Using the webkit-box-reflect property for Chrome, and Safari.
2) You could place your image in a div, or whatever, and in another div you would rotate it using the transform property, and then add a gradient onto it.
3) Use JavaScript/JQuery
4) Embed the image in a div, but add another image of a gradient for the reflection.
5) Cheat using an image editor for the whole reflection.

Well we're going to be using the webkit-box-refect property in this tutorial. Which means to see this effect you must be either a chrome, or safari user.

Now with that being said, say you've embeded your image. You would place the reflection above, left, right, etc: with this code.

Code: Select all

-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;

We're going to be having our reflection be directed on the bottom.

If we wanted to we could actually move the reflection down a bit using...

Code: Select all

-webkit-box-reflect: below 10px;

Now it's time to add our reflection. We're going to just use a liner gradient, cause it looks nice, and it's simple.

Code: Select all

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(white));

NOTE: If you wanna expand/reduce the gradient just change the percentage here. (The bigger the percent, the smaller the reflection)

Code: Select all

color-stop(50%, transparent)

It's really that simple.

So in your CSS if you add this code...

Code: Select all

img#reflect {
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
}

All images with the id reflect will have the reflection.

If you wanna learn more about CSS3 reflections, as well as CSS3 Image Masking. You should really checkout this tutorial.

Feel free to download the source below, if you need any help.