CSS3 Exciting Shadows

, , Leave a comment

My Previous post I have explain CSS 3 Border features(CSS3 Exciting Border Functions and Features). Today I’m going to explain CSS3 shadows. Now only the modern browsers currently support these effects, it’s still fun to see what’s around the corner!

1. box shadow

box-shadow accepts four parameters

  • x-offset
  • y-offset
  • blur
  • shadow color

In my example

  • x-offset: 4px
  • y-offset: 4px
  • blur: 6px
  • shadow color: #006

HTML Code

{code}
<body>
<div class=”box”></div>
</body>
{/code}
CSS Code
{code}
.box
{
/*DIV*/
background-color:#00C;
width:300px;
height:300px;
/* The Shadow*/
-webkit-box-shadow: 4px 4px 6px #006;
-moz-box-shadow: 4px 4px 6px #006;
box-shadow: 4px 4px 6px #006;
}
{/code}

Final Result

2. Box Shadow with Negative Value

CSS Code

{code}

-webkit-box-shadow: -4px -4px 6px #006;

-moz-box-shadow: -4px -4px 6px #006;

box-shadow: -4px -4px 6px #006;

{/code}

Final Result


3. Multiple Box Shadow

CSS Code

 

{code}
.box
{
-webkit-box-shadow: 4px 4px 6px #006, -2px -2px 6px  #F00;
-moz-box-shadow: 4px 4px 6px #006,-2px -2px 6px  #F00;
box-shadow: 4px 4px 6px #006, -4px -4px 6px  #F00;
}
{/code}
Final Result
Share this: