Tuesday, July 26, 2011

How To Add CSS Shadow Box Effect For Blogger

This is a about CSS trick, This post will explain
how to add CSS shadow box to blogger.


1. Log in to your blogger account and Go to Design >> Edit HTML

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste one of  below code Before ]]></b:skin> tag

Outside shadow
#Shadow-Outside{
-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;
}

Inside shadow
#Shadow-inside {
-moz-box-shadow: inset 0 0 5px 5px #222;
-webkit-box-shadow: inset 0 0 5px 5px #222;
box-shadow: inset 0 0 5px 5px #222;
}

You can change color, with changing #222
Get your color code here

5. Now When you make the post, paste below code for get CSS shadow box
   
For Outside shadow
<div id="Shadow-Outside">
your text here....
</div>

For Inside shadow
<div id="Shadow-inside">
your text here....
</div>

Replace Blue color words with your text

8. You are done.

6 comments:

  1. this is cool trick, thankzz

    ReplyDelete
  2. Just sharing, this is CSS technique is browser dependent, there are some cases where in this would not be applied.

    ReplyDelete
  3. It's great stuff. I get it some new information through this blog. each and every day your blog having some new topic.

    ReplyDelete
  4. very useful information . its is very helpful to me
    such a great information


    make best blog

    ReplyDelete
  5. id="Shadow-inside" not working

    but when i change to class="Shadow-inside" its work

    ReplyDelete