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

Post a Comment

Popular posts from this blog

IE9 Intranet compatibility mode in Intranet websites

So you have written an HTML5 site on your local intranet with some lovely CCS3 and run it up in Firefox and you feel smug, all your HTML and CSS are perfectly formed, but you run it up in IE9 and all the CSS3 goodness has gone away leaving your lack luster IE7 version of your site.   Why is IE9 running in IE7 compatibility mode? IE9 has a hidden setting that forces it to run in compatibility mode when it encounters any intranet websites. Microsoft have detailed this behaviour in a Blog about what they call Smart compatibility mode . You can easily switch off the compatibility mode for specific machines using the internet tools mentioned in the article above, but most of the time developers do not have the luxury of applying corporate wide settings of this nature. Avoiding Smart compatibility with X-UA-Compatible Luckily there is a single line of HTML you can that you can use to override this behaviour: <meta http-equiv="X-UA-Compatible" content="IE=edge,c
Read more

User Interface Usability Checklist Part 2

So you made it through part 1 of the usability check list, how about part 2? 21. Poor Label Alignment If you have been through design 101 you have probably heard of the wonderful acronym for the basic principles of design, C.R.A.P. This of course stands for Contrast, Repetition, Alignment and Proximity. Proximity is very important when identifying which label belongs to which input. Each different form of alignment has its advantages and disadvantages. Left Alignment The label appearing on the left of a box is a common practice. This often helps with vertical space and keeping all of the elements of a form on a single page, which can be beneficial in aiding the user in form completion and making them aware of all of the possible options they can, or made need to provide information for. It does however have a few disadvantages. Long labels cause short label's input boxes to be far away from the end of the label, this damages that basic principle of proximity. In extreme
Read more

Procedural VS Object Oriented

What is the correct way to write code? If you have worked with PHP long enough you may well have come across the website  PHP The Right Way . This website is dedicated to helping developers learn the industry best practices. Interestingly another site appeared afterwards called  PHP The Wrong Way . In essence this website is a rebuttal to the many of the recommendations made in PHP The Right Way. With any sphere of learning it is important to keep an open mind, to listen and critically evaluate the received wisdom and determine if it is indeed wisdom or opinion built on shaky ground. There is one part of the argument I would like to focus on and this is the argument for and against " Always use object-oriented Programming ". While PHP The Right Way does not appear to explicitly state that you should always use an object oriented approach it is implicit from the examples and the recommendations to use design patterns. While there are programming approaches available othe
Read more