Play with CSS - CSS BOX SHADOW

CSS comes with a good box pattern called "Box Shadow" of your tag. For more details on Box shadow tutorials refer here  http://css-tricks.com/snippets/css/css-box-shadow/


We can set the floating of our tags (DIV, P etc) by setting the Box shadow style.

The box-shadow property sets one or more drop-shadows to the tags.

Sometime you need this http://www.w3schools.com/cssref/playit.asp?filename=playcss_box-shadow&preval=50px%2050px%205px%20black

Through this box shadow pattern i did some CSS image styling, please refer my below screenshot

.myclass{
box-shadow: 1em 0 0 0 red,
0 1em 0 0 red,
-1em 0 0 0 red,
0 -1em 0 0 red,
-1em -2em 0 0 red,
1em -2em 0 0 red,
-1em 2em 0 0 red,
1em 2em 0 0 red,
2em 1em 0 0 red,
2em -1em 0 0 red,
-2em 1em 0 0 red,
-2em -1em 0 0 red,
3em 0 0 0 red,
-3em 0 0 0 red,
0 3em 0 0 red,
0 -3em 0 0 red;
background: black;
width: 1em;
height: 1em;
overflow: hidden;
margin: 50px 0 70px 65px;
}

At some point we can avoid using the image and we can reduce the load time of the site. I didt diked any online tutorials, but this is what i got while working practically


1em 0 0 0 red  (Creates a box to the right of your tag (for me it is a div tag)

so what if 2em 0 0 0 red (Creates a box to the right of your tag with space like below (for me it is a div tag)