Recap, what is box-shadow?

Previously, I shared about how box-shadow can be used to attain certain effects we can make use of when we are working on the layout of our content. In that post, I explained in detail how box-shadow works, giving some description to what each variables do. If you are unsure what a box-shadow is, you can take a look at the intro before continuing on.

Lifted corner effect?

With this effect, one of the corners of the content will appear to have been lifted out, very much like the corner of a real page.

And how do we achieve that

Achieving this effect requires a small little trick. But as per the effect before, this effect it is purely css and requires no changes in the html document structure.

To create the effect, we make a content dom element for each “corner” we want to lift. So let’s say we want to lift the left corner of the box. We will create a :before child declaration and put in all the box-shadow details.

We will then shift the :before element into the right place - bottom left hand corner. And when it give it a tilt (using transform), we will have the corner “lifted”.

For each element, there is 2 “child content” that you can tie to it (:before and :after). This means that you can lift at most 2 corners. If you want to lift more corners, you will have to add different child element into your DOM structure.

You can view the code and try remove one of the lifted corners (by either :before or :after). If you have no idea how to do that, hide one of the shadows by applying a display:none declaration to it (example shown below).

#box:after{display:none;}

The End?

There is much more uses for this pseudo-element trick. Using this idea of having your style applied to either the :before or :after child of an element is a very widely used idea for creating different kind of effects.

By applying different kinds of CSS tranformations on these pseudo elements you can create very different effect. These elements given you sufficient control such that you can even produce different illustrations using only CSS.