4 Cool CSS3 Shadow box to use

Posted on December 16, 2014 by 
4 Cool CSS3 Shadow box to use
After publishing 5 superb CSS3 effect for images, I thought about to publish something like text box/content box or just empty div container what you can easily use on your web project. CSS3 made web designing very easy, and styling something with CSS3 is very flexible. So here 4 CSS3 empty container I publishing what you can use on your web designing very easily. And even you don’t have any project indented you can just use these boxes for highlighting text, phrase, codes (like-Blockquote). Let’s see how they look like and how to use

Curled border CSS3 shadow box

Curled border CSS3 shadow box

CSS

/*crawlist.net css starts*/
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
.ks-dropshadow {
    position:relative;
    float:left;
    width:40%;   
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.ks-dropshadow:before,
.ks-dropshadow:after {
    content:"";
    position:absolute;
    z-index:-2;
}
.ks-dropshadow p {
    font-size:16px;
    font-weight:100;
    font-family: 'Droid Serif', serif;
    line-height:1.4;
    padding:5px 5px;
}
.ks-curled {
    border:1px solid #efefef;
    -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;   
         border-radius:0 0 120px 120px / 0 0 6px 6px;
}
.ks-curled:before,
.ks-curled:after {
    bottom:12px;
    left:10px;
    width:50%;
    height:55%;
    max-width:200px;
    -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
       -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
            box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
    -webkit-transform:skew(-8deg) rotate(-3deg);
       -moz-transform:skew(-8deg) rotate(-3deg);
        -ms-transform:skew(-8deg) rotate(-3deg);
         -o-transform:skew(-8deg) rotate(-3deg);
            transform:skew(-8deg) rotate(-3deg);
}
.ks-curled:after {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);    
        -ms-transform:skew(8deg) rotate(3deg);    
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}
/*crawlist.net css ends*/


HTML

<!--crawlist.net shadow starts-->
<div class="ks-dropshadow ks-curled" style="width:70%;height:200px;">
      <p>
 Paste/type Your Text
      </p>
    </div>
<!--crawlist.net shadow ends-->

 

Lifted border CSS3 shadow box

Lifted border CSS3 shadow box

CSS

/*crawlist.net css starts*/
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
.ks-dropshadow {
    position:relative;
    float:left;
    width:40%;   
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.ks-dropshadow:before,
.ks-dropshadow:after {
    content:"";
    position:absolute;
    z-index:-2;
}
.ks-dropshadow p {
    font-size:16px;
    font-weight:100;
    font-family: 'Droid Serif', serif;
    line-height:1.4;
    padding:5px 5px;
}
.ks-lifted {
    -moz-border-radius:4px;
         border-radius:4px;
}
.ks-lifted:before,
.ks-lifted:after {
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);  
       -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);   
       -moz-transform:rotate(-3deg);  
        -ms-transform:rotate(-3deg);  
         -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
}
.ks-lifted:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);  
       -moz-transform:rotate(3deg); 
        -ms-transform:rotate(3deg); 
         -o-transform:rotate(3deg);
            transform:rotate(3deg);
}
/*crawlist.net css ends*/


HTML

<!--crawlist.net shadow starts-->
<div class="ks-dropshadow ks-lifted" style="width:70%;height:200px;">
      <p>
 Paste/type Your Text
      </p>
    </div>
<!--crawlist.net shadow ends-->

 

Raised border CSS3 shadow box

Raised border CSS3 shadow box

CSS

/*crawlist.net css starts*/
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
.ks-dropshadow {
    position:relative;
    float:left;
    width:40%;   
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.ks-dropshadow:before,
.ks-dropshadow:after {
    content:"";
    position:absolute;
    z-index:-2;
}
.ks-dropshadow p {
    font-size:16px;
    font-weight:100;
    font-family: 'Droid Serif', serif;
    line-height:1.4;
    padding:5px 5px;
}
.ks-raised {
    -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
/*crawlist.net css ends*/


HTML

<!--crawlist.net shadow starts-->
<div class="ks-dropshadow ks-raised" style="width:70%;height:200px;">
      <p>
 Paste/type Your Text
      </p>
    </div>
<!--crawlist.net shadow ends-->

 

Vertical curve border CSS3 shadow box

Vertical curve border CSS3 shadow box

CSS

/*crawlist.net css starts*/
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
.ks-dropshadow {
    position:relative;
    float:left;
    width:40%;   
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.ks-dropshadow:before,
.ks-dropshadow:after {
    content:"";
    position:absolute;
    z-index:-2;
}
.ks-dropshadow p {
    font-size:16px;
    font-weight:100;
    font-family: 'Droid Serif', serif;
    line-height:1.4;
    padding:5px 5px;
}
.ks-curved:before {
    top:10px;
    bottom:10px;
    left:0;
    right:50%;
    -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
    -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
    box-shadow:0 0 15px rgba(0,0,0,0.6);
    -moz-border-radius:10px / 100px;
    border-radius:10px / 100px;
}
/*crawlist.net css ends*/


HTML

<!--crawlist.net shadow starts-->
<div class="ks-dropshadow ks-curved" style="width:70%;height:200px;">
      <p>
 Paste/type Your Text
      </p>
    </div>
<!--crawlist.net shadow ends-->


How to use
Copy and paste the CSS part into your stylesheet.css and copy and paste HTML part where you want to show these container boxes on your webpage

How to configure
  • Add text to a box, at HTML part’s <p> and </p> tag, inside of <p> and </p> tag paste/type your texts
  • To change the height and width of the box at HTML part’s change the value of width:70%;height:200px;
  • Change the font family, remove @import…..; line from CSS part, and paste your own font-family,
  • Change the line-height (space between two line) as you want default is 1.4, Change font size 16px to any px you want.

Compatibility
These codes are optimize for providing maximum support on every web browser, old browser and IE may not support these effects.

Last words, don’t forget to mention your feedback, stay touch more CSS3 border I’ll publish soon, until than chill…