Matrix view

by stot

HTML

<div data-role="page" id="page1">
    <div data-role="header">
        
        <h1>World rules</h1>

    </div>
    <div data-role="content">
        <table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive table-stroke">
            <thead>
                <tr>
                    <th data-priority="1">&#8658;</th>
                    <th data-priority="persist">Magic</th>
                    <th data-priority="2">Melee</th>
                    <th data-priority="3">Ranged</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Magic</th>
                    <td class="matrix-equal">&#8658;</td>
                    <td class="matrix-down">&#8659;</td>
                    <td class="matrix-up">&#8657;</td>
                </tr>
                <tr>
                    <th>Melee</th>
                    <td class="matrix-up">&#8657;</td>
                    <td class="matrix-equal">&#8658;</td>
                    <td class="matrix-down">&#8659;</td>
                </tr>
                <tr>
                    <th>Ranged</th>
                    <td class="matrix-down">&#8659;</td>
                    <td class="matrix-up">&#8657;</td>
                    <td class="matrix-equal">&#8658;</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

.matrix-down {
    background: #ff3019;
    background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404));
    background: -webkit-linear-gradient(top, #ff3019 0%, #cf0404 100%);
    background: -o-linear-gradient(top, #ff3019 0%, #cf0404 100%);
    background: -ms-linear-gradient(top, #ff3019 0%, #cf0404 100%);
    background: linear-gradient(to bottom, #ff3019 0%, #cf0404 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0);
}
.matrix-up {
    background: #c9de96;
    background: -moz-linear-gradient(top, #c9de96 0%, #8ab66b 44%, #398235 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9de96), color-stop(44%, #8ab66b), color-stop(100%, #398235));
    background: -webkit-linear-gradient(top, #c9de96 0%, #8ab66b 44%, #398235 100%);
    background: -o-linear-gradient(top, #c9de96 0%, #8ab66b 44%, #398235 100%);
    background: -ms-linear-gradient(top, #c9de96 0%, #8ab66b 44%, #398235 100%);
    background: linear-gradient(to bottom, #c9de96 0%, #8ab66b 44%, #398235 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9de96', endColorstr='#398235', GradientType=0);
}
.matrix-equal {
    background: #fefcea;
    /* Old browsers */
    background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefcea), color-stop(100%, #f1da36));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fefcea 0%, #f1da36 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fefcea 0%, #f1da36 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fefcea 0%, #f1da36 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #fefcea 0%, #f1da36 100%);
    /* W3C */
   ...