Tesmond's Useful Design

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-s...

Just discovered a nice way to achieve all of those lovely CSS3 features on IE6-8.  Previously I had generally used an IE specific CSS and images (Yeah I know nasty right?).  CSS3 Pie uses a bit of JavaScript to "fix" the missing border shadow and linear gradient CSS properties in IE6-8. Now if we are fair IE7-8 can perform Linear gradients with a directX filter, e.g. progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd); But this is not perfect* and does not cover IE6.  If only everyone was on IE9, FF or Safari. *Anti-alias text issues, click behaviour can be effected etc.