Tuesday, 5 July 2011

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.

No comments: