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
For Firefox 4.0-, which used Mozilla core -moz, i,e we use:
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.
      .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%;
       border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
   border-bottom-left-radius: 10px;

    <h1>CSS3 box shadow</h1>   
        <div class="demo1">test</div>   

Demo result:


No comments:

Post a Comment