vnagoq
Last Updated: February 25, 2016
·
1.557K
· gta5cheatsps3
B69356f80b3334c3c299054e0764855a normal

Building a nice one-sided CSS box

with CC3, the advancements in web development has gone much towards perfect imagination. CSS drop-shadow is a beautiful effect with box, for text and other usage.

here is the html part:

<div id="beauty-boxes">Some example text</div>

CSS Code

   #beauty-boxes{
     transition: all 0.5s ease;
     position:relative;
     float:left;
     width:45%;
     padding:2px;
     margin:3px;
     background:#fff;
     -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0), 0 0 40px rgba(0, 0, 0, 0) inset;
     -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0) inset;
     box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0) inset;
     -moz-border-radius:4px;
     border-radius:4px;
     } 
    #beauty-boxes:before,
    #beauty-boxes:after {
     content:"";
     position:absolute;
     z-index:-3;
     bottom:15px;
     left:12px;
     width:50%;
     height:20%;
     max-width:350px;
     max-height:90px;
     -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);
      }


 #beauty-boxes:after {
     right:10px;
     left:auto;
     -webkit-transform:rotate(3deg);
     -moz-transform:rotate(3deg);
     -ms-transform:rotate(3deg);
     -o-transform:rotate(3deg);
     transform:rotate(3deg);
 }

.beauty-boxes p {
     font-size:16px;
     font-weight:bold;
 }


   #beauty-boxes:hover{
    background-color:#161616;
   color:#fff;
    }

Source : <a href="http://www.topgravity.com">TopGravity.com</a>

2 Responses
Add your response

14825
6084a6f1ac8a31caebbfcc9777948823

there were a few problems with your example code. There are classes and ids used in the css as well as nothing to see when you test the example. I put something up on jsFiddle ( http://jsfiddle.net/Vwacx/ )that works with a few tweaks if anyone is interested. Other than those things great effect and thank for sharing!

over 1 year ago ·
14867
B69356f80b3334c3c299054e0764855a normal

thanks to mention, i have made changes now, which you told, and also included some random text inside for example purpose.

over 1 year ago ·