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.

  • 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