Tuesday, May 14, 2013

CSS3 box shadow, border radius and rotate



CSS3 box shadow syntax:
box-shadow:inset x-offset y-offset blur-radius spread-radius color
This is for Firefox4.0+, Google Chrome 10.0+, Opera10.5+ and IE9
For Safari and Google Chrom10.0-, which used webkit core -webkit, i.e.we use
-webkit-box-shadow
For Firefox 4.0-, which used Mozilla core -moz, i,e we use:
-moz-box-shadow
Example code for shadow box: here I also use CSS3 transform to rotate the box,
use  border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius for box corner radius.
<html>
    <head>
       <style>
      .demo1 {
      /*box-shadow:inset x-offset y-offset blur-radius spread-radius color*/
      /*Safari and Google Chrom10.0-*/
          -webkit-box-shadow: 3px 3px 3px;
     /*Firefox 4.0-*/
        -moz-box-shadow: 3px 3px 3px;
       /*Firefox4.0+, Google Chrome 10.0+, Opera10.5+ and IE9*/
     box-shadow: 3px 3px 3px;
       width: 50%;
        height:200px;
       background-color:lightblue; 
      transform:rotate(-5deg); 
       border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
   border-bottom-left-radius: 10px;

      }            
        </style>
    </head>
    <body>
    <h1>CSS3 box shadow</h1>   
        <div class="demo1">test</div>   
    </body>   
</html>

Demo result:


test

No comments:

Post a Comment