Ajax Loader
×

Paper Pile Effect v2

Few days ago, Peduarte posted Paper Pile Effect using :after and :before pseudo classes. It had some limitations that only 3 layers can be formed because CSS allows only two pseudo classes per element. So, I tried to do the same but with a different and better approach, i.e. using box-shadow property. It removes the 3 layer limit by giving us the ability to create as many layers as you want. Its just box-shadows, nothing else. It works in a simple way. Looking at the code, the first line in box shadow is 0 1px 1px rgba(0,0,0,0.3) which gives a 1px translucent black shadow to the main div. In the second line 0 6px 0 -3px #fff, we give the main box a white shadow which is 3px short from both the sides. Now, we can give as many layers as we want by using this approach. Just add more shadows in this alternate way and you'll get the required effect. In my example, I used 5 layers to demonstrate the flexibility of this method. Feel free to modify / use the code in any way you like.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Paper Pile Effect v2

    CSSDeck G+