FREELessons: 20Length: 1.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.3 Create a Layered Paper Effect

In this lesson, I'll show you a really cool technique for adding a layered paper effect to an element. In the past, I've tried doing this by using the before and after pseudo elements, but the result was not exactly perfect. Recently though, I found another technique that uses multiple shadows to achieve the same effect. It's made by James Coaster and I'm gonna give you a step-by-step explanation. So, in our document, I have a simple div with a class of paper with some text inside it. So, let's do this, paper. First, we'll apply a background-color. Let's do #fafafa. So, this is a very simple gray color. Let's add a border. Let's do one pixel solid. Let's do an f2f2f3. Okay, so it's slightly darker, and then let's do a padding of 1em, and let's align the text to the center. Okay, so far so good, now here's where the clever bit comes. Box-shadow, we're gonna apply five different shadows. The first one, let's do one on a separate line. The first one is the top layer shadow. So it's the shadow that comes right under this main layer. So it's gonna be 0 for x, 1 pixel for the y axis, 1 pixel for blur. And then the color is gonna be in a black, so rgba 0, 0, 0, and .15 for opacity, and there is our shadow. Let's actually remove the border-bottom from this so you can see it a bit better. All right, the next shadow represents the second layer, so we'll start again. 0 x, this time 10 pixels for the y axis, 0 for blur, and we'll do -5 pixels for spread, and the color, eee. Save, and that right there is the second layer. Now notice we have a tiny bit of offset on the left and right and that's caused by this value right here, -5 pixels. If I change this to -15, we don't see it at all. If we change it to 15 pixels, it's now incredibly big. If we change it to 5, it's closer. So by giving it a negative value, we make sure it is offset on the sides. All right, next step is the second layer shadow, so 0, 10 pixels. We'll do 1 pixel for blur, and then -4 pixels for spread. So it's 1 pixel bigger than the actual layer, and the color, the same rgba, the same black with a 15% opacity. Save, and there it is. Now we have a small shadow applied under the second layer, so let's add another layer. So we'll do 0, this time 20 pixels, because it's actually 10 pixels higher than the previous layer. 0 for blur, -10 pixels for spread, same color. Okay, there it is. And finally, the shadow for this third layer. 0, 20 pixel, 1 pixel blur, -9 pixels for spread, and rgba. .15, and that's it. And there you have it, a layered paper effect. It's a really simple technique, really clever. Big thanks to James Coaster for this snippet. So just a small recap. We start with a shadow for the first layer, right? It's a 1 pixel shadow. Next, we create the second layer. By setting the blur to 0, we make sure that that shadow is a solid color. Next, we create the shadow for the second layer with a 1 pixel blur. Next is the third layer and then the third layer's shadow. This technique will only work in browsers supporting the box shadow property and currently all the major ones do, except IE8.

Back to the top