Home » Snippets » Mini Calendar in CSS Mini Calendar in CSS - Snippet --- jQuery jQuery UI Bootstrap Angular Backbone D3 Ember GreenSock TweenMax Handlebars Lodash Modernizr Polymer React React DOM Snap.svg Three.js Underscore Zepto ZingChart --- Bootstrap Foundation Animate.css 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; } Tutorials Palace 17 December, 2018 No Comments 122 Views Mini Calendar in CSS CSS Layouts CSS Layouts Download Mini Calendar in CSS Code Fullscreen Tutor Play Walkthrough Related Snippets Box Shadow Editor Canvas Particles Emission Dripping Paint CSS3 Animation National flag of Mongolia Particles Emission Based on Mouse Moves Custom Cursor Images with CSS Particle System Leaving Trails CSS3 LT Form Particles Gravity Effect Leave a Reply Cancel replyYour email address will not be published. Required fields are marked *Name * Email * Website Notify me of new posts by email.