Transparent radial-gradient Browser Test

Transparent, Radial-Gradient css3 solution that works in all browsers, vendor-prefix-free, AND works in IE7-9 with no huhu.

by Scott Godin

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<!doctype html>
<html lang="en-US">
    <head>
        <title>Test</title>
        <meta charset="utf-8">
        <!--[if gte IE 9]> 
        <style type="text/css"> h2 { filter: none; }</style>
        <![endif]-->
        <!--[if lte IE 7]>
        <style type="text/css"> #Container .top-text { margin: 0; padding: 5.5em 1.8em 1.8em; }</style>
        <![endif]-->
    </head>
    <body>
        <div id="Container">
            <h2>Comprehensive CT Performance Measurements</h2>
            <p class="top-text">A full range of Catphan® Phantoms are offered for measuring the maximum obtainable performance of axial, spiral, multislice, conebeam, and volume CT scanners.</p>
        </div>
    </body>
</html>

CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);  
body { 
    font-size: 76%; 
    background: gray; 
    color: ivory; 
    font-family: "pt sans", Verdana, sans-serif;
}   
#Container {         
    background: transparent url('http://devel.phantomlab.com/images/tabheaders/Catphan_Main.jpg') scroll no-repeat 100% 100%;        
    font-size: 1.5em;      
    position: relative;       
    border: 1px solid black;       
    overflow: hidden;       
    border-radius: 12px;       
    width: 926px;       
    margin: 1em;       
    height: 375px;      
}  
h2{     
    margin: 0;      
    border-top-left-radius: 12px;      
    border-top-right-radius: 12px;         
    padding: 50px 0 0 0.8em;     
    /*background: rgba(255,255,255,0.5) url(/images/artwork/topheader_spotlight2.png) scroll no-repeat 0 15% ; */     
    background-color: transparent;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyYWRpYWxHcmFkaWVudCBpZD0iZyI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuNCIgLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC43IiAvPjwvcmFkaWFsR3JhZGllbnQ+PHJlY3QgeD0iMCUiIHk9IjAlIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJibGFjayIgb3BhY2l0eT0iMC43IiAvPjxyZWN0IHg9Ii0xMDAlIiB5PSIwJSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgZmlsbD0idXJsKCNnKSIgLz48L3N2Zz4=);     
    background-image: radial-gradient(left bottom, farthest-side, rgba(225,225,225,0.4) 0%, rgba(0,0,0,0.7) 100%);
    background-image: radial-gradient(farthest-side at left bottom, rgba(225,225,225,0.4) 0%, rgba(0,0,0,0.7) 100%);      
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66e1e1e1', endColorstr='#b3000000', GradientType=1);
    position: absolute;     
    top: 0; left: 0;     
    width: 910px; /* strange number */          
    font-size: 1.3em;     
    font-weight: normal;     
    letter-spacing: 0.08em;          
    color: white;    ...