What are moz-box-shadows The Easy WayClasses for moz-box-shadows
Let us show you here some examples, to give you an idea what you could gain by using a-moz-box-shadow to enhance your web design. And don’t spend too much time on the details, in the next 2 pages we will show you how you can easily make it work straight out of the box.

Drag and Drop for Drop Shadow

One of jb’s core qualities are its easy to use open source API’s. By this we have access to millions of scripts, like these css -moz-box-shadow here. The cool thing with this is that you can still use later on jb’s drag and drop technology to resize them and place them into your page where ever you want. You may take a closer look at the Video below or just check out our other pages to get a better idea as to how this works, more drag and drop Videos.

Demo Code for css -moz-box-shadows 

.HoverShadow {
position: relative;
}

.HoverShadow:after {
content: '';
position: absolute;
z-index: -1;
bottom: 0;
height: 20px;
}

.HoverShadow.safari:after {
-webkit-box-shadow: none;
box-shadow: none;
}

.HoverShadow.safari .after {
position: absolute;
z-index: -1;
bottom: 0;
height: 20px;
}
demo-CSS-Fold Shadow
demo-CSS-Fold Shadow

right BottomShadow BLarge BDark

demo-CSS-Fold Shadow

LeftCurlShadow LCLarge LCNormal

.LeftCurlShadow {
position: relative;
}

.LeftCurlShadow:before {
content: '';
position: absolute;
z-index: -1;
top: 55px;
left: 58px;
width: 50px;
-moz-transform: rotate(-4deg) skew(4deg);
-webkit-transform: rotate(-4deg) skew(4deg);
-o-transform: rotate(-4deg) skew(4deg);
transform: rotate(-4deg) skew(4deg);
}

.BottomShadow {
position: relative;
}

.BottomShadow:before, .BottomShadow:after {
content: '';
position: absolute;
z-index: -1;
bottom: 0;
width: 30px;
height: 50px;
}

.BottomShadow:before {
-moz-transform: skew(40deg);
-webkit-transform: skew(40deg);
-o-transform: skew(40deg);
transform: skew(40deg);
}

.BottomShadow:after {
-moz-transform: skew(-40deg);
-webkit-transform: skew(-40deg);
-o-transform: skew(-40deg);
transform: skew(-40deg);
}

demo-CSS-Fold Shadow

left FoldShadow FLarge FDark

demo-CSS-Fold Shadow

left HoverShadow HLarge HDark

.FoldShadow {
    position: relative;
}

.FoldShadow:after {
content: '';
position: absolute;
z-index: -2;
left: 2%;
width: 96%;
height: 60px;
-moz-border-radius: 48%/30px;
-webkit-border-radius: 48%/30px;
border-radius: 48%/30px;
}

.FoldShadow:before {
content: '';
position: absolute;
z-index: -1;
left: 30%;
width: 40%;
height: 60px;
-moz-border-radius: 15%/30px;
-webkit-border-radius: 15%/30px;
border-radius: 15%/30px;
}

.FoldShadow.safari:before, .FoldShadow.safari:after {
display: none;
}

.FoldShadow.safari .after {
position: absolute;
z-index: -2;
left: 2%;
width: 96%;
height: 60px;
}

.FoldShadow.safari .before {
position: absolute;
z-index: -1;
left: 30%;
width: 40%;
height: 60px;
}
.HoverShadow {
position: relative;
}

.HoverShadow:after {
content: '';
position: absolute;
z-index: -1;
bottom: 0;
height: 20px;
}

.HoverShadow.safari:after {
-webkit-box-shadow: none;
box-shadow: none;
}

.HoverShadow.safari .after {
position: absolute;
z-index: -1;
bottom: 0;
height: 20px;
}
demo-CSS-Fold Shadow

right LeftWarpShadow LWLarge LWDark

demo-CSS-Fold Shadow

LeftCurlShadow LCLarge LCNormal

.LeftWarpShadow {
position: relative;
-moz-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
}

.LeftWarpShadow:before, .LeftWarpShadow:after {
content: '';
position: absolute;
z-index: -1;
-moz-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
}

.LeftWarpShadow:before {
 right: 10px;
 bottom: 20px;
 -moz-transform: rotate(4deg) skew(4deg);
 -webkit-transform: rotate(4deg) skew(4deg);
 -o-transform: rotate(4deg) skew(4deg);
 transform: rotate(4deg) skew(4deg);    
}
.LeftCurlShadow {
position: relative;
}

.LeftCurlShadow:before {
content: '';
position: absolute;
z-index: -1;
top: 55px;
left: 58px;
width: 50px;
-moz-transform: rotate(-4deg) skew(4deg);
-webkit-transform: rotate(-4deg) skew(4deg);
-o-transform: rotate(-4deg) skew(4deg);
transform: rotate(-4deg) skew(4deg);
}

demo-CSS-Fold Shadow

right LeftWarpShadow LWLarge LWDark

.WarpShadow {
    position: relative;
-moz-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
}

.WarpShadow:before, .WarpShadow:after {
content: '';
position: absolute;
z-index: -1;
bottom: 15px;
-moz-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
}

.WarpShadow:before {
 right: 10px;
 -moz-transform: rotate(4deg) skew(4deg);
 -webkit-transform: rotate(4deg) skew(4deg);
 -o-transform: rotate(4deg) skew(4deg);
 transform: rotate(4deg) skew(4deg);    
}

/**  'smallBox' class for boxes with width between 150px - 350px  **/
.smallBox.WarpShadow:before {
 -moz-transform: rotate(8deg) skew(4deg);
 -webkit-transform: rotate(8deg) skew(4deg);
 -o-transform: rotate(8deg) skew(4deg);
 transform: rotate(8deg) skew(4deg);    
}
.WarpShadow:after {
 left: 10px;
 -moz-transform: rotate(-4deg) skew(-4deg);
 -webkit-transform: rotate(-4deg) skew(-4deg);
 -o-transform: rotate(-4deg) skew(-4deg);
 transform: rotate(-4deg) skew(-4deg);
}

.smallBox.WarpShadow:after {
 -moz-transform: rotate(-8deg) skew(-4deg);
 -webkit-transform: rotate(-8deg) skew(-4deg);
 -o-transform: rotate(-8deg) skew(-4deg);
 transform: rotate(-8deg) skew(-4deg);
}

/****** RIGHT SIDE WARP SHADOW ******/

.RightWarpShadow {
position: relative;
-moz-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
}

.RightWarpShadow:before, .RightWarpShadow:after {
content: '';
position: absolute;
z-index: -1;
-moz-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
}

.RightWarpShadow:before {
 right: 10px;
 bottom: 15px;
 -moz-transform: rotate(4deg) skew(4deg);
 -webkit-transform: rotate(4deg) skew(4deg);
 -o-transform: rotate(4deg) skew(4deg);
 transform: rotate(4deg) skew(4deg);    
}

/**  'smallBox' class for boxes with width between 150px - 350px  **/
.smallBox.RightWarpShadow:before {
 -moz-transform: rotate(8deg) skew(4deg);
 -webkit-transform: rotate(8deg) skew(4deg);
 -o-transform: rotate(8deg) skew(4deg);
 transform: rotate(8deg) skew(4deg);    
}

.RightWarpShadow:after {
 left: 10px;
 bottom: 20px;
 -moz-transform: rotate(-4deg) skew(-4deg);
 -webkit-transform: rotate(-4deg) skew(-4deg);
 -o-transform: rotate(-4deg) skew(-4deg);
 transform: rotate(-4deg) skew(-4deg);
}

.smallBox.RightWarpShadow:after {
 -moz-transform: rotate(-8deg) skew(-4deg);
 -webkit-transform: rotate(-8deg) skew(-4deg);
 -o-transform: rotate(-8deg) skew(-4deg);
 transform: rotate(-8deg) skew(-4deg);
}

/****** LEFT SIDE WARP SHADOW ******/

.LeftWarpShadow {
position: relative;
-moz-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
}

.LeftWarpShadow:before, .LeftWarpShadow:after {
content: '';
position: absolute;
z-index: -1;
-moz-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
}

.LeftWarpShadow:before {
 right: 10px;
 bottom: 20px;
 -moz-transform: rotate(4deg) skew(4deg);
 -webkit-transform: rotate(4deg) skew(4deg);
 -o-transform: rotate(4deg) skew(4deg);
 transform: rotate(4deg) skew(4deg);    
}

/**  'smallBox' class for boxes with width between 150px - 350px  **/
.smallBox.LeftWarpShadow:before {
 -moz-transform: rotate(8deg) skew(4deg);
 -webkit-transform: rotate(8deg) skew(4deg);
 -o-transform: rotate(8deg) skew(4deg);
 transform: rotate(8deg) skew(4deg);    
}


.LeftWarpShadow:after {
 left: 10px;
 bottom: 15px;
 -moz-transform: rotate(-4deg) skew(-4deg);
 -webkit-transform: rotate(-4deg) skew(-4deg);
 -o-transform: rotate(-4deg) skew(-4deg);
 transform: rotate(-4deg) skew(-4deg);
}

.smallBox.LeftWarpShadow:after {
 -moz-transform: rotate(-8deg) skew(-4deg);
 -webkit-transform: rotate(-8deg) skew(-4deg);
 -o-transform: rotate(-8deg) skew(-4deg);
 transform: rotate(-8deg) skew(-4deg);
}


CSS-Drop Shadow Experiments

Frankly speaking, using a css -moz-box-shadows is not trivial, but let me give you here a very easy way out to make this work in less than a minute. For this all you have to do is repeat the 2 parts which I am about to show you.

Make these moz-box-shadows easily work

1.    Just copy this code into the <Header>  of your website:
<link rel="stylesheet" href="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/drop-shadows/shadows.css" />
<!--[if IE 8]>
<link rel="stylesheet" href="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/drop-shadows/shadows-for-ie/shadows-ie.css" />
<![endif]-->
<!--[if IE 8]>
               <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<script src="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/drop-shadows/shadows-for-ie/jquery.transform-0.9.3.min.js"></script>
<script src="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/drop-shadows/shadows-for-ie/shadows-ie.js"></script>
<![endif]-->

2. And copy this code into the body  of your website
<div style="height: 300px; width: 402px;">
<div class="right BottomShadow BSmall BDark"><img width="402" height="300" src="http://002-jbwp.jb-webs.com/01-admin/external/ajaxGallery/pictures/35-tesla-roadster-2.jpg" alt="demo-CSS-Fold Shadow"></div>

</div> 

  • Save the page, check the result in your browser, you see? It works, so far.
  • Let us now make some customisations, to give you full control over your moz-box-shadow, for this you have to make 3 more simple steps. 

  • Replace the image URL by chossing an image from your host http://002-jbwp.jb-webs.com/01-admin/external/ajaxGallery/pictures/35-tesla-roadster-2.jpg 
  • Keep an eye on image side what is in our demo it is currently height="300" width="402" - very likely you will have to modify this to the size of the image you would like to use.
  • And don’t forget to resize the container <div style="height: 300px; width: 402px;"> here you need same width and height that you used for image.

Part 1 - copy -moz-box-shadow Code Examples 

Part 2 - Customise -moz-box-shadow Code Examples

The latest trick to give your -moz-box-shadows a special kick

That was easy, wasn’t it? Well, let us put one more trick on the top to make it work out standing, for this open the next page, css -moz-box-shadows classes-
Congratulations, by reading this you have so far made a css -moz-box-shadow work in your page, now the time is right to discover the others to give you more flexibility. For this you have to work like this:
  • Find this code line: "<div class="right BottomShadow BSmall BDark">"
  • And replace it through one of these code lines:

The css-moz-box-shadows classes

Bottom
<div class="left BottomShadow BSmall BLight">
<div class="right BottomShadow BSmall BNormal">
<div class="left BottomShadow BSmall BDark">
<div class="right BottomShadow BSmall BDark">

Curl
  <div id="box1" class="LeftCurlShadow LCLarge LCNormal">
<div id="box2" class="LeftCurlShadow LCMedium LCNormal">
<div id="box3" class="LeftCurlShadow LCSmall LCNormal">
<div id="box4" class="RightCurlShadow RCLarge RCNormal">
<div id="box5" class="RightCurlShadow RCMedium RCNormal">
<div id="box6" class="RightCurlShadow RCSmall RCNormal">
Fold
<div class="left FoldShadow FSmall FLight">
<div class="right FoldShadow FMedium FNormal">
<div class="left FoldShadow FLarge FDark">
<div class="right FoldShadow FSmall FDark">

Hover
               <div class="left HoverShadow HSmall HLight">
<div class="right HoverShadow HMedium HNormal">
<div class="left HoverShadow HLarge HDark">
<div class="right HoverShadow HSmall HDark">

Perspective
     <div id="box1" class="LeftPerspectiveShadow LPLarge LPNormal">
     <div id="box2" class="LeftPerspectiveShadow LPMedium LPNormal">
     <div id="box3" class="LeftPerspectiveShadow LPSmall LPNormal">
     <div id="box4" class="RightPerspectiveShadow RPLarge RPNormal">
     <div id="box5" class="RightPerspectiveShadow RPMedium RPNormal">
    <div id="box6" class="RightPerspectiveShadow RPSmall RPNormal">

Stand
        <div class="left StandShadow SSmall SLight">
<div class="right StandShadow SMedium SNormal">
<div class="left StandShadow SLarge SDark">
<div class="right StandShadow SSmall SDark">

Warp
       <div class="left RightWarpShadow RWLarge RWNormal">
<div class="right LeftWarpShadow LWLarge LWNormal">
<div class="left RightWarpShadow RWLarge RWDark">

CSS -moz-box-shadows classes Hosting

Hey, does it work? It surly does, but by the way, take a look to our amazing Hosting packages, which start as low as 6$ per year. Beyond that we provide an open source website builder, with which you can use these scripts and combine them with teweening animations, image and text effects and much more.
*    Please note, this offer is only valid in conjunction with 1 Software licence for jb-websiteBuilder and REAL.
**  Please note, this offer is only valid in conjunction with 2 Software licences for jb-websiteBuilder and REAL.
 *** Please note, this offer is only valid in conjunction with 3 Software licences for jb-websiteBuilder and REAL.