CSS3 Reflections
1 post
Page 1 of 1
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.
If we wanted to we could actually move the reflection down a bit using...
So in your CSS if you add this code...
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.
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
We're going to be having our reflection be directed on the bottom.-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;
If we wanted to we could actually move the reflection down a bit using...
Code: Select all
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.
-webkit-box-reflect: below 10px;
Code: Select all
NOTE: If you wanna expand/reduce the gradient just change the percentage here. (The bigger the percent, the smaller the reflection)
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(white));
Code: Select all
It's really that simple.color-stop(50%, transparent)
So in your CSS if you add this code...
Code: Select all
All images with the id reflect will have the reflection.img#reflect {
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
}
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.
You do not have the required permissions to view the files attached to this post.
1 post
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023