Sometimes things seem to work

Just a little CSS3 example I quite like.  Using the "alpha" layer in the box-shadow allows a more universal reusable style as the background and border colours can easily be altered but the overall style remains the same.

    .info {
        background-color: Khaki;
        border: 1px solid DarkKhaki;
        border-radius: 4px 4px 4px 4px;
        margin-bottom: 2em;
        margin-top: 1em;
        padding: 0.5em 2em;
        width:20em;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -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;       
    }  

<div class="info">
   Something slightly important here
</div>



Just posting this to remind me of some simple options to create nice shadows regardless of the internal colours.

Comments

Popular posts from this blog

IE9 Intranet compatibility mode in Intranet websites

User Interface Usability Checklist Part 2

Procedural VS Object Oriented