prefixfree linear gradient test

dynamic css3 tabs with linear-gradient background assisted with Prefixfree, and patched for IE 7-9

by Scott Godin

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<!-- head -->
    <!--[if lt IE 9]>
    <style type="text/css">
        .tabrow li {
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d1d1d1',GradientType=0 );
        }
        .tabrow li.selected {
            filter: none;
        }
        .tabrow a:link { background-color: transparent; }
    </style>
    <![endif]-->
    <!--[if lt IE 8]>
    <style type="text/css">
        .tabrow li { display: table-cell; float: left;}
    </style>
    <![endif]-->
<!-- /head -->
    <div id="Container">
        <ul class="tabrow">
        </ul>
    </div>
</body>

CSS

html body { font-size: 76%; background: white; color: black; }
    #Container { font-size: 1em; margin : 2em auto;  width: 960px; }
    .tabrow {
        text-align: center;
        list-style: none;
        margin: 0.33em 0 0px;
        padding: 0;
        line-height: 24px;
        height: 26px;
        overflow: hidden;
        font-size: 0.75rem;
        letter-spacing: 0;
        font-family: verdana;
        position: relative;
    }
    .tabrow li {
        border: 1px solid #AAA;
        background-color: #D1D1D1;
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2VjZWNlYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMWQxZDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* IE 9 */
        background-image: linear-gradient(top, white, #ECECEC 50%, #D1D1D1 100%);
        background-image: linear-gradient(to bottom, white, #ECECEC 50%, #D1D1D1 100%);
        background-repeat: repeat-x;
        background-attachment: scroll;
        background-position: top left;
        display: inline-block;
        position: relative;
        z-index: 0;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
        text-shadow: 0 1px #FFF;
        margin: 0 -5px;
    }
    .tabrow a {
        color: black;
        text-decoration: none;
        padding: 0 20px;
    }
    .tabrow...

JavaScript

jQuery.noConflict();
jQuery(document).ready(function ($) {
    // simulate filling tabs dynamically
    var tabs = {
        '#main': 'Main',
        '#catphan_500': 'Catphan® 500',
        '#catphan_600': 'Catphan® 600',
        '#catphan_700': 'Catphan® 700',
        '#catphan_accessories': 'Catphan® Accessories',
        '#catphan_designfeatures': 'Catphan® Design Features'
    };
    var tabrow = $(".tabrow");
    var active = ' class="selected"'
    for ( var index in tabs  ) {
        tabrow.append('<li' + active + '><a href="' + index + '">' + tabs[index] + '</a></li>');
        active = '';
    }
    // selected tab functionality
    $(".tabrow li a").click( function (e) {
        e.preventDefault();
        $(".tabrow li").each( function () { $(this).removeClass("selected")});
        $(this).parent().addClass("selected");
        // do other things here as needed
    });
});