use box-shadow to shadow the div --
this is box-shadow:15px 15px 0 gray
text-shadow: horizontal Vertical blur colour
This is text-shadow: 0px 5px 0 red
This is text-shadow: 0px 10px 2px red
This is text-shadow: 5px 10px 10px red
use box-shadow to shadow the div --
this is box-shadow:15px -15px 4px gray
text-shadow: horizontal Vertical blur colour
This is text-shadow: 0px -5px 0 red
This is text-shadow: 10px -10px 2px red
This is text-shadow: 5px -10px 10px red
You can even make some text look like its pressed in to the screen
by using shadowing effects eg...
EXAMPLE OF PRESSED TEXT
.pressed {
font-size: 3em;
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
-background-clip: text;
color:transparent;
text-shadow: 0px 3px 3px rgba(255, 255, 255, 0.7);
}
Lets play with an image
...This will make a .png image
(an image with transparencies in it)
show up with a shadow of the image - not the box
using: -webkit-filter: drop-shadow(15px 25px 2px rgba(0, 0, 255, 0.25));
