2012-04-21

CSS3 box shadows fun

“inset” box shadow makes the shadow go inside the box. All other parameters are the same. Here's a example.

inset shadow

Here's the CSS code:

div {
width:100px;height:60px;
padding:1ex;
border:solid thin blue;
box-shadow: inset 3px 3px red
}

Inset Shadow Example 2

inset shadow
div {width:100px;height:60px;
padding:1ex;
box-shadow: inset 0px 0px 20px 5px red}

multiple Shadow with Inset

in/out shadow
div {
width:100px;height:60px;
padding:1ex;
box-shadow:
inset 0px 0px 4px 3px red,
      0px 0px 4px 3px red;
}

Multiple Box Shadows

multi box lunch




Here's the CSS code:

div {
display:table;
border-radius:9px;
padding:0.5ex;
margin:5ex;
box-shadow:
8px 6px 13px 8px hsl(1, 100%, 50%),
-16px 12px 20px 16px hsl(60, 100%, 50%),
48px 36px 71px 28px hsl(180, 100%, 50%);
}

more examples at http://xahlee.org/js/css_box_shadow.html