Reflections: Part 1


In this video, you'll start learning about WebKit reflections. This is a non-standard CSS3 property that allows you to create literal reflections of elements on a web page.

Video Transcript

  • 0:00

    [?mellow guitar music?]

  • 0:03

    Think Vitamin Membership - Est. 2010

  • 0:07

    CSS3 Typography - Reflections: Part 1 with Nick Pettit

  • 0:13

    In the previous videos in this chapter,

  • 0:15

    we learned about text shadows and text strokes.

  • 0:19

    Now let's take a look at reflections.

  • 0:21

    Reflections are a little bit different than some of the other properties in this chapter,

  • 0:26

    and you'll learn why over the course of this video.

  • 0:30

    First, however, I'd like to emphasize that reflections are different from text shadows

  • 0:37

    and text stroke in that they're not limited to text.

  • 0:40

    You can actually apply reflections to any page elements,

  • 0:43

    so they're not actually a typographic effect.

  • 0:46

    I'm just including them here, though, because they are still nonetheless

  • 0:50

    more of a flashy effect, and they don't really fit very nicely into any of the other chapters.

  • 0:55

    Anyway, without further adieu, let's first try them out on some text

  • 1:00

    and then get into other elements.

  • 1:02

    So here we have a blank page, as usual, and if we switch over to our text editor,

  • 1:08

    we'll just go ahead and add in an <h1> here and we'll call this Text Reflection.

  • 1:18

    And now we're ready to move on to our styling.

  • 1:22

    Again, as usual, just some basic styling here to bootstrap the page.

  • 1:26

    We need to first style our <h1> just so that we can see it a little bit better.

  • 1:34

    We'll align it center and we'll give it a font-size of 4em--

  • 1:40

    and there we go.

  • 1:42

    Now, first we're going to create the most basic reflection that we possibly can,

  • 1:47

    so on this <h1> here, we're going to add a webkit-box-reflect,

  • 1:55

    which is the name of the property,

  • 1:57

    and I'm going to type below, which we'll get to in a second.

  • 2:01

    So when we save that out and refresh,

  • 2:04

    you can see that we now have reflected text--

  • 2:07

    it's a perfect reflection of what we have right up here.

  • 2:11

    So let's switch back to the code and take a look at this.

  • 2:15

    This first argument is what's called direction.

  • 2:18

    This can be set to the constants above, below, left, or right.

  • 2:24

    So, let's try making this reflect above instead of below.

  • 2:31

    So when I switch back and refresh,

  • 2:34

    you can see that we now have a perfect reflection above our text instead of below it.

  • 2:40

    Pretty nifty.

  • 2:42

    So let's just go ahead and change that back to below--there we go.

  • 2:47

    And now, the next argument is the offset.

  • 2:52

    The offset determines how far away the reflection is relative to the element.

  • 2:57

    Now, all reflection, by default, is actually pretty far away from our text,

  • 3:02

    so let's actually try starting out with a negative value on the offset

  • 3:07

    so that we can draw it in closer to our text.

  • 3:10

    So right after below here, we'll go ahead and put -22px,

  • 3:16

    which is going to put us right up against the text.

  • 3:19

    So when we refresh there, you can see that our reflection is right up against our text,

  • 3:26

    with no space in between.

  • 3:28


  • 3:29

    Now our reflection is touching the text, and again, this offset is an optional argument.

  • 3:35

    There's one more argument called the mask box image,

  • 3:39

    and this is probably the most complex part of reflections.

  • 3:43

    We can use the alpha channel of transparent images

  • 3:47

    to determine the shape of our reflection.

  • 3:51

    So let's go ahead and add an image mask.

  • 3:54

    So I'll switch back to the text editor,

  • 3:57

    and we do have an images directory here that's above the CSS directory

  • 4:02

    so I'll just go ahead and type the url function here,

  • 4:06

    and we'll jump out of our CSS directory and dive into the images directory

  • 4:13

    and I have an image of the Safari logo, which we'll see a little bit later.

  • 4:20

    I'm going to type 0 and round.

  • 4:25

    So here we have the path to the image,

  • 4:29

    the image offset,

  • 4:31

    and the repeat style, which in this case I'm setting to round,

  • 4:35

    so when we switch back, you can see that we now have

  • 4:38

    kind of a funky looking reflection here,

  • 4:41

    and that's actually the Safari logo shining through,

  • 4:45

    so we'll see that image come up a little bit later.

  • 4:48

    We've created a basic reflection, but there's still more to learn.

  • 4:51

    In the next video, we'll try a few other things with Reflections.

  • 4:56

    [?mellow guitar music?]

  • 4:59

    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.