CSS 3 Box Shadow

How to make Box Shadow using CSS 3

Excess CSS3 is able to make something that can not be done by CSS2, which usually only be done by using javascript or jQuery assistance with writing complex code. but CSS3 able to turn it into a simple form. Like the way I made following the how to create a Box shadow using the CSS3.

Example for css3 box shadow:

<html>
<head>
<title>How to make Box Shadow using CSS 3</title>
<style type="text/css">
.boxShadow {
          box-shadow: 5px 5px 2px black;
          -moz-box-shadow: 5px 5px 2px black;
          -webkit-box-shadow: 5px 5px 2px black;
          width:200px;
          padding:5px;
          text-align:center;
          background:#dddddd;
          border:solid 1px #666666;
          }
</style>
</head>
<body>
   <div>
      <h2>How to make Box Shadow using CSS 3</h2>
   </div>
</body>
</html>

The Result:

How to make Box Shadow using CSS 3

Note: This tutorial applies only to modern browsers such as Mozilla v 3.5.3 and above, safari, Google chrome

  • Welcome to CSS Syntax [dot] com
    Welcome to our Website ... CSS Syntax com is a website that explains about anything related to web...
    www.csssyntax.com
  • CSS 3 Background Color Opacity
    Everyone knows what RGB stands for (red, green, blue), but what does the A stand for?
    www.csssyntax.com
  • CSS 3 Text Shadow
    Using CSS3, we can create shadow effects on text with very simple syntax
    www.csssyntax.com
  • CSS 3 Box Shadow
    Excess CSS3 is able to make something that can not be done by CSS2
    www.csssyntax.com