Where developers come to connect, share, build and be inspired.

0

Building a nice one-sided CSS box

1156 views


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 : TopGravity.com

Comments

  • 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!

  • B69356f80b3334c3c299054e0764855a_normal

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

Add a comment