Reflections: Part 2

4:37

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

  • 0:00

    [?mellow guitar music?]

  • 0:03

    Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com

  • 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 membership.thinkvitamin.com

Show full transcript