Mini Calendar in CSS - Snippet

Preview
HTML
CSS
JS

<header>
  <h1>Mini Calendar</h1>
  <p>A mini calendar designed using CSS3 and minimal HTML.</p>
</header>

<!-- Calendar -->
<table>
  <thead>
    <tr>
      <th class="arrow"><a href="">◀</a></th>
      <th colspan="5">
        October 2011
      </th>
      <th class="arrow"><a href="">▶</a></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
      <th>Sat</th>
      <th>Sun</th>
    </tr>
    <tr>
      <td class="off">26</td>
      <td class="off">27</td>
      <td class="off">28</td>
      <td class="off">29</td>
      <td class="off">30</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
    </tr>
    <tr>
      <td>17</td>
      <td class="last-week">18</td>
      <td>19</td>
      <td>20</td>
      <td>21</td>
      <td>22</td>
      <td>23</td>
    </tr>
    <tr>
      <td>24</td>
      <td class="today">25</td>
      <td class="tomorrow">26</td>
      <td>27</td>
      <td class="event">28</td>
      <td>29</td>
      <td>30</td>
    </tr>
    <tr>
      <td>31</td>
      <td class="off">1</td>
      <td class="off">2</td>
      <td class="off">3</td>
      <td class="off">4</td>
      <td class="off">5</td>
      <td class="off">6</td>
    </tr>
  </tbody>
</table>

body {
    background-color: #f4f4f4;
    font-family: 'Helvetica Neue';
}

header { text-align: center }

header h1 {
    color: #444444;
    font-size: 3em;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
    margin: 0.5em 0 0 0;
}

header p {
    color: #444444;
    font-size: 1.5em;
    margin: 0;
}

a { text-decoration: none }

table {
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    border-spacing: 0;
    margin: 2em auto;
    position: relative;
    width: 239px;
}

table:before {
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0px;
    left: 2px;
    background: #ffffff;
    content: " ";
    display: block;
    height: 230px;
    width: 236px;
    z-index: -1;
}

table:after {
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 2px;
    left: 4px;
    background: #ffffff;
    content: " ";
    display: block;
    height: 230px;
    width: 232px;
    z-index: -2;
}

table thead th {
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow: inset 0 1px 0 0 #e88486;
    -moz-box-shadow: inset 0 1px 0 0 #e88486;
    -ms-box-shadow: inset 0 1px 0 0 #e88486;
    -o-box-shadow: inset 0 1px 0 0 #e88486;
    box-shadow: inset 0 1px 0 0 #e88486;
    background-color: #e56568;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e56568), color-stop(100%, #bd3f41));
    background-image: -webkit-linear-gradient(top, #e56568, #bd3f41);
    background-image: -moz-linear-gradient(top, #e56568, #bd3f41);
    background-image: -ms-linear-gradient(top, #e56568, #bd3f41);
    background-image: -o-linear-gradient(top, #e56568, #bd3f41);
    background-image: linear-gradient(top, #e56568, #bd3f41);
    border-bottom: 1px solid #ac2826;
    border-top: 1px solid #ac2826;
    color: white;
    font-size: 13pt;
    font-weight: bold;
    padding: 8px 0;
    text-align: center;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
}

table thead th.arrow:first-child {
    border-left: 1px solid #ac2826;
    text-align: right;
}

table thead th.arrow:last-child {
    border-right: 1px solid #ac2826;
    text-align: left;
}

table thead th.arrow a {
    color: white;
    font-family: 'MS Gothic';
}

table thead th.arrow a:hover { color: #333333 }

table tbody th {
    -webkit-box-shadow: inset 0 1px 0 0 white;
    -moz-box-shadow: inset 0 1px 0 0 white;
    -ms-box-shadow: inset 0 1px 0 0 white;
    -o-box-shadow: inset 0 1px 0 0 white;
    box-shadow: inset 0 1px 0 0 white;
    background-color: #f5f5f5;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #e8e8e8));
    background-image: -webkit-linear-gradient(top, #f5f5f5, #e8e8e8);
    background-image: -moz-linear-gradient(top, #f5f5f5, #e8e8e8);
    background-image: -ms-linear-gradient(top, #f5f5f5, #e8e8e8);
    background-image: -o-linear-gradient(top, #f5f5f5, #e8e8e8);
    background-image: linear-gradient(top, #f5f5f5, #e8e8e8);
    border-bottom: 1px solid #d4d4d4;
    color: #666666;
    font-size: 7.5pt;
    font-weight: normal;
    padding: 4px 0;
    text-align: center;
    text-shadow: 0 1px 0 #ffffff;
    text-transform: uppercase;
    width: 34px;
}

table tbody th:first-child { border-left: 1px solid #abb6bf }

table tbody th:last-child { border-right: 1px solid #abb6bf }

table tbody td {
    background-color: #fcfdfd;
    border-bottom: 1px solid #e2e2e2;
    border-left: 1px solid #e2e2e2;
    color: #444444;
    font-size: 11pt;
    font-weight: bold;
    height: 27px !important;
    padding: 0;
    text-align: center;
    width: 34px;
}

table tbody td.today {
    background-color: #f5f5f5;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #e8e8e8));
    background-image: -webkit-linear-gradient(top, #f5f5f5, #e8e8e8);
    background-image: -moz-linear-gradient(top, #f5f5f5, #e8e8e8);
    background-image: -ms-linear-gradient(top, #f5f5f5, #e8e8e8);
    background-image: -o-linear-gradient(top, #f5f5f5, #e8e8e8);
    background-image: linear-gradient(top, #f5f5f5, #e8e8e8);
    border-left: 1px solid #c4c4c2;
    border-bottom: 1px solid #c4c4c2;
}

table tbody td.last-week { border-bottom: 1px solid #c4c4c2 }

table tbody td.tomorrow { border-left: 1px solid #c4c4c2 }

table tbody td.off { color: #d8dbde }

table tbody td:last-child { border-right: 1px solid #abb6bf }

table tbody td:first-child { border-left: 1px solid #abb6bf }

table tbody td:not(:last-child) {
    -webkit-box-shadow: inset -1px 0 0 0 #eeefef;
    -moz-box-shadow: inset -1px 0 0 0 #eeefef;
    -ms-box-shadow: inset -1px 0 0 0 #eeefef;
    -o-box-shadow: inset -1px 0 0 0 #eeefef;
    box-shadow: inset -1px 0 0 0 #eeefef;
}

table tbody td:not(:last-child).today {
    -webkit-box-shadow: inset -1px 0 0 0 #d8d8d7;
    -moz-box-shadow: inset -1px 0 0 0 #d8d8d7;
    -ms-box-shadow: inset -1px 0 0 0 #d8d8d7;
    -o-box-shadow: inset -1px 0 0 0 #d8d8d7;
    box-shadow: inset -1px 0 0 0 #d8d8d7;
}

table tbody td.event { position: relative }

table tbody td.event:after {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 1px 0 0 #e88486;
    -moz-box-shadow: inset 0 1px 0 0 #e88486;
    -ms-box-shadow: inset 0 1px 0 0 #e88486;
    -o-box-shadow: inset 0 1px 0 0 #e88486;
    box-shadow: inset 0 1px 0 0 #e88486;
    background-color: #e56568;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e56568), color-stop(100%, #bd3f41));
    background-image: -webkit-linear-gradient(top, #e56568, #bd3f41);
    background-image: -moz-linear-gradient(top, #e56568, #bd3f41);
    background-image: -ms-linear-gradient(top, #e56568, #bd3f41);
    background-image: -o-linear-gradient(top, #e56568, #bd3f41);
    background-image: linear-gradient(top, #e56568, #bd3f41);
    position: absolute;
    right: 2px;
    bottom: 2px;
    border: 1px solid #ac2826;
    content: " ";
    display: block;
    height: 4px;
    width: 4px;
}