Its good to learn - Pretty Shadow effects with just one DIV!

Wow the internet has come a long way, I remember when all the top designers were using 4-5 divs just to create rounded corners around a single page element.  Now with the magic of CSS3 you can create a beautiful "up-turned corners" with only one div!

The basis of the up-turned corner is 3 angled shadow effects.  Now doing this with an image can be fairly effective, but not only is that "cheating", it is not the cleanest, simplest low bandwidth method.  With just a minor CSS trick you can have such an effect without images and all the extra bandwidth, late loading, etc issues that can occur.

So how do you get 3 different shadow angles on a single DIV?

The answer is to apply two classes to the DIV.  This way you can use the :before and :after selectors along with the content attribute to create 3 distinct shadows.  You can then use the transform property to rotate the before and after DIVs to create a lovely shadow on any CSS3 compliant browser.

So our HTML is incredible simple


<div> class="FancyCorners DropShadow">

  Wow aren't these up-turned corners pretty?</div>


Our CSS is a little more complex, but where would the sense of achievement be if it wasn't ;)


        .FancyCorners
        {
            -moz-border-radius: 4px;
            border-radius: 4px;
        }
     
        .FancyCorners:before, .FancyCorners:after
        {
            bottom: 15px;
            left: 10px;
            width: 50%;
            height: 20%;
            -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(-5deg);
            -moz-transform: rotate(-5deg);
            -ms-transform: rotate(-5deg);
            -o-transform: rotate(-5deg);
            transform: rotate(-5deg);
        }
     
        .FancyCorners:after
        {
            right: 10px;
            left: auto;
            -webkit-transform: rotate(5deg);
            -moz-transform: rotate(5deg);
            -ms-transform: rotate(5deg);
            -o-transform: rotate(5deg);
            transform: rotate(5deg);
        }
     
        .DropShadow
        {
            border:1px solid rgb(236,224,0);
            position: relative;
            padding: 1em;
            width: 250px;
            background: rgb(255,242,0);
            -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;
        }
     
        .DropShadow:before, .DropShadow:after
        {
            content: "";
            position: absolute;
            z-index: -2;
        }

Comments

Popular posts from this blog

IE9 Intranet compatibility mode in Intranet websites

User Interface Usability Checklist Part 2

Procedural VS Object Oriented