1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS3 Reflections

Discussion in 'Gimp Tips & Tutorials' started by mikethedj4, Jul 17, 2011.

  1. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
    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:
    -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:
    -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:
    -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:
    color-stop(50%, transparent)
    It's really that simple.

    So in your CSS if you add this code...
    Code:
    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.
     

    Attached Files:

  2. sagteck

    sagteck Member

    Joined:
    Jun 16, 2010
    Messages:
    225
    Likes Received:
    0
    Trophy Points:
    16
    Home Page:
    dead link
     
  3. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
    I forgot about this post, but I deleted the post on GimpPimp, as I'm merging GimpPimp, and BlenderPimp into 1 site. (I posted it on both of their FaceBook Fanpages, as well as explained it.)

    After I finish Alternative Apps, and my YouTube Channel's redirection I'll be working on other updates as well. (All the updates are in this article)

    I haven't had time to post a video on YouTube about my channel redirection yet, and I'm waiting to redirect until I do have time.
     

Share This Page