Specifications¶

How to define...¶

This section aims to specify how to implement certain features and correct fallback solutions.

Every definition has to contain a paragraph containing the verified browsers and the author(s) of the snippet.

box-shadow: inset (SUGGESTION!)¶

/**
 * Shadow for my-div.
 *
 */
#my-div-with-box-shadow-inset {
    -moz-box-shadow: inset HORIZONTALpx VERTICALpx BLURpx #color;
    -ms-box-shadow: inset HORIZONTALpx VERTICALpx BLURpx #color;
    -webkit-box-shadow: inset HORIZONTALpx VERTICALpx BLURpx #color;
    box-shadow: inset HORIZONTALpx VERTICALpx BLURpx #color;
}

/**
 * Shadow for my-div, fallback for missing box-shadow support.
 *
 * @see modernizr.js
 */
.no-boxshadow #my-div-with-box-shadow-inset {
    background-image: url("data:image/png;base64,THE-BASE64-ENCODED-IMAGE");
    /* star-hack targets IE6+7 */
    *background-image: url("path/to/shadow/graphics.png");
    background-position: POSITION;
    background-repeat: repeat-DIRECTION; 
}

Browsers verified: IE6-9, Firefox 3.6, Opera 10.6, Chrome 7
Author: Steffen Gebert
Last change: Nov 2010