Reflections: Part 2


In this video, you'll learn how to apply CSS3 gradients to the mask-box-image argument of the -webkit-box-reflect property.

Video Transcript

  • 0:00

    [?mellow guitar music?]

  • 0:03

    Think Vitamin Membership - Est. 2010

  • 0:07

    CSS Typography - Reflections: Part 2 with Nick Pettit

  • 0:13

    In the previous video, we created a basic reflection.

  • 0:17

    Now, using gradients, we're going to do something a little bit more advanced.

  • 0:21

    This mask box image is actually a really interesting argument,

  • 0:26

    because we don't necessarily have to use images here.

  • 0:29

    We can also use gradients, so let's go ahead and try using a linear gradient.

  • 0:36

    Now, this is going to be a little bit more complicated.

  • 0:40

    We'll type webkit-gradient and we're going to put our parentheses here,

  • 0:48

    and just for the sake of clarity, we're going to include a little bit of formatting here,

  • 0:53

    so I'll drop that down to the next line.

  • 0:56

    Our first argument will be linear, because we want a linear gradient,

  • 1:04

    and we want left top, left bottom,

  • 1:08

    and we'll start with transparent,

  • 1:13

    and we want a color-stop in between there at about (0.2)

  • 1:20

    We also want that to be transparent.

  • 1:27

    We're actually going to end this on an rgba color,

  • 1:31

    which is going to be completely white,

  • 1:35

    but also very transparent,

  • 1:38

    with a value of 0.2.

  • 1:40

    So when we switch back and refresh,

  • 1:43

    you can see that we now have this nice, really subtle-looking reflection.

  • 1:48

    It kind of starts out bright at the top and then fades away into basically nothing.

  • 1:56

    From an aesthetic perspective,

  • 1:57

    reflections can be a bit cheesy,

  • 2:00

    but they're a really nice way of adding depth.

  • 2:02

    They also update in real time as the content updates,

  • 2:06

    so if you were to add a reflection to an HTML 5 video element,

  • 2:11

    the video would reflect in real time.

  • 2:14

    This is also a good time to mention that reflections are not technically CSS3.

  • 2:20

    They're not a part of the W3C standard,

  • 2:23

    which is why they only currently work in webkit.

  • 2:26

    Proprietary CSS properties like this aren't anything new.

  • 2:30

    In fact, you might be surprised by how many common CSS properties

  • 2:35

    didn't start out as W3C standards.

  • 2:38

    However, browsers and standards have always worked this way,

  • 2:40

    and when browsers add features like this,

  • 2:43

    they're often introduced as standards later on.

  • 2:46

    Anyway, before we finish up with reflections,

  • 2:49

    let's just try this same reflection on an image instead of text.

  • 2:53

    I'm going to use my Safari image that we used earlier in our markup.

  • 3:00

    So I'm going to delete this <h1> here,

  • 3:03

    and I'm going to change it to an "image" and we need to go into our images directory,

  • 3:11

    and we'll use the Safari image.

  • 3:15

    We need to add some alt text, and this is the "Safari logo"

  • 3:19

    and we'll just close that there.

  • 3:21

    So when we switch back and refresh,

  • 3:24

    you can see that this image is a bit large for our screen,

  • 3:28

    but I just want to show you here that there is no reflection currently present,

  • 3:33

    so let's go ahead and add one in.

  • 3:35

    So, I'll switch back to our CSS and first we need to change this selector to an image.

  • 3:44

    We're going to actually add some margin to the bottom of our image,

  • 3:51

    because reflections only take up overflow;

  • 3:54

    they don't actually take up any kind of real space.

  • 3:58

    Lastly, we're going to just bump up the opacity a little bit

  • 4:03

    on this gradient so that we can see our image a little bit better.

  • 4:07

    So when we switch back and refresh the page,

  • 4:12

    there we have it--you can see that we now have

  • 4:15

    this nice reflected image right below our actual image.

  • 4:20

    Reflections are unique to webkit, but remember,

  • 4:22

    webkit is what's used in Safari on IOS, so everything I've just shown you

  • 4:28

    is available on Apple's many popular mobile devices.

  • 4:32

    [?mellow guitar music?]

  • 4:34

    Think Vitamin Membership - Est. 2010

Show full transcript


You have to sign up for Treehouse in order to create workspaces.

Sign up


You have to sign up for Treehouse in order to download course videos.

Sign up


  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.