Layered Paper Look with Pure CSS

[⚡JFarrow⌁]

I've written plenty on CSS for your Ning network before, but today I'm going to show you something simple.   I'll show you how to give a layered paper look behind any aspect of your site that you like.  To start simple, let's try adding it to a text box.

FIRST:  Add this block of code to your Advanced CSS box and publish

.layered-paper { background: #eee; box-shadow: 0 1px 1px rgba(0,0,0,0.15), /* The top layer shadow */ 0 10px 0 -5px #eee, /* The second layer */ 0 10px 1px -4px rgba(0,0,0,0.15), /* The second layer shadow */ 0 20px 0 -10px #eee, /* The third layer */ 0 20px 1px -9px rgba(0,0,0,0.15); /* The third layer shadow */ }




Next go to any text box which has something in it that you'd like to give the layered paper look to, switch to HTML view
and add this before and after the block of HTML code:

<div class="layered-paper"> Whatever you want to sit on top of the layered background (in this case, "Howdy") </div>

Reference URL

The Result:

View the demo live here on my site

[Emmanuel Ace]

This is real nice

[classic]

[Josh Hall]

Is this CSS3 technique? Not compatible for IE?

[⚡JFarrow⌁]

who uses that?

[⚡JFarrow⌁]

yes

[⚡JFarrow⌁]

yes

[xmem12]

de  hecho   el editor nuebo es una molestia . 

no funcionan bastantes codigos  .  y tiene limite de codigos 

[⚡JFarrow⌁]

it may be browser specific...

[⚡JFarrow⌁]

it may be browser specific...

[Kos]

Yay!  This "layered paper" look works in 3.0!  Thank you JFarrow.

[⚡JFarrow⌁]

SCHWEET! think i may layer something too..! you're welcome Kos..