How to add Drop shadow to Elements | Using CSS

CSS provides the box-shadow property which allows us to add drop shadows effects to any elements ,



Here is an example:

HTML Code:
<body>
<div id="shadowBox">
<p>FAQ Web-Development is a blog that intends to share tutorial on HTML,CSS and Jquery.FAQ Web-Development is a blog that intends to share tutorial on HTML,CSS and Jquery.FAQ Web-Development is a blog that intends to share tutorial on HTML,CSS and Jquery.FAQ Web-Development is a blog that intends to share tutorial on HTML,CSS and Jquery.FAQ Web-Development is a blog that intends to share tutorial on HTML,CSS and Jquery.FAQ Web-Development is a blog that intends to share tutorial on HTML,CSS and Jquery.FAQ Web-Development is a blog that intends to share tutorial on HTML,CSS and Jquery.FAQ Web-Development is a blog that intends to share tutorial on HTML,CSS and Jquery.</p>
</div>
</body>


CSS Code:
<style>
             #shadowBox{
width:350px;
height:300px;
margin-left:auto;
margin-right:auto;
border:2px solid #666;
text-align:center;
box-shadow:4px 4px 17px 7px #999;
margin-top:10%;
          }
</style>



    

Comments

  1. thanks Harus
    would appreciate if you can like our Facebook page
    cheers,

    ReplyDelete
  2. Hi, I went through your this post and found

    really interesting. I landed this page through

    internet search and found
    this page very good.I am a web designer and

    works in a web design

    company

    as a designer I liked the color of your blog

    also.

    Thanks,
    hena

    ReplyDelete

Post a Comment

Thanks for Visiting for any questions or suggestions please comment below
Cheers,

Check out

CSS Sprites | What are They?

Login form | Using CSS3

Remove Scrollbars from syntaxhighlighter

Adding a button in HTML | styling a button

HTML5 Semantic Tags | What do they mean

How to remove plus and minus characters from input type number

HTML5 | LocalStorage

How CSS3 Works

jQuery Resources | Support and tutorial help