Box-Shadow: Rise From Page CSS Effect

<article>

I saw this effect while searching through a site looking at some code snippets. Pretty neat, right?

Then I thought, I’d really like that effect for my code snippets…

So, let’s figure out how they did it!

The Structure

<pre>
    <code>// Your code here</code>
</pre>

Our markup is extremely simple. A <pre> element wrapped around the <code> element is all we need. Of course, whatever code you want to put inside the <code> element as well.

That’s all we need for structure.

CSS Pseudo Elements

Instead of adding more HTML elements to our markup, we are going to use the :before and :after pseudo elements. This makes sense since this is strictly a styling preference, and offers nothing to the markup.

pre {
    position: relative;
}
pre:before, pre:after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 10px;
    z-index: -1;
    width: 40%;
    height: 40px;
}
pre:after {
    left: auto;
    right: 10px;
}

Here we set our parent <pre> element to have a relative position, that way our pseudo elements position themselves based off it, instead of a parent higher up in the hierarchy.

Then, we add some basic styling to both the :before and :after elements. The content property is required for these, so we make that blank. Other than that, it’s absolutely positioned from the bottom, and a little bit off each side.

The z-index is important here as we want to make sure that the elements appear behind the parent element. It would look a little silly if it was on top of it and wouldn’t give off the desired effect.

We give the pseudo elements a percentage width, that way they can adjust with the width of the parent. We also want to make sure that there is plenty of space in the middle, which is why there is 20% of space leftover. This will make the center seem as if it’s “pressed against” the page.

Box-Shadow and Rotate

Now that we have it positioned where we want, it’s time to add in the magical ingredients: box-shadow and transform: rotate.

pre:before, pre:after {
    // Previous code...
    box-shadow: 0px 13px 8px #979797;
    transform: rotate(-2deg);
}
pre:after {
    // Previous code...
    transform: rotate(2deg);
}

A little box shadow added the effect that we want, and the transform rotates the elements to give off the effect that the edges are “farther away” from the page than at the center.

You can mess around with the positioning, shadow, and even rotation until you have it how you want. I know I spent a good half hour playing with the values to get it where I wanted it on this site.

One recommendation I would have would be to disable on mobile or when the element being applied to goes full screen. It can look a little weird if that happens.

Simple and Beautiful

See the Pen Pure CSS Box-Shadow Rise From Page Effect by Kyle Hawk (@Krazyhawk) on CodePen.

I really love this effect, especially for the code snippets.

It’s a simple way to make a normally bland looking element stick out on a page. There isn’t a whole lot that you have to worry about in terms of browser support (if you are worried, prefix fixes the majority).

If you have any problems, feel free to let me know!

Thanks for nerding out with me.

</article>