I have created a basic HTML and somewhat fancy (in my opinion) calendar that I styled with CSS and uses hover enlarge to expand the days of the week when you mouseover them! Below I have them demo for you to try out! After that I have the HTML and CSS code. Let me know your thoughts on this by leaving a comment below and feel free to make improvements on this code!
*Note that this calendar does not work correctly in Safari. I have some bugs to work out.
The Demo:
| DECEMBER 2016 | ||||||
|---|---|---|---|---|---|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
HTML:
<table align="center" class="tableMainHov">
<tr>
<th colspan="7" class="thmain"><font face="verdana">DECEMBER 2016</font></th>
</tr>
<tr>
<th class="th1">Su</th>
<th class="th1">Mo</th>
<th class="th1">Tu</th>
<th class="th1">We</th>
<th class="th1">Th</th>
<th class="th1">Fr</th>
<th class="th1">Sa</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="tdhov1">1</td>
<td class="tdhov1">2</td>
<td class="tdhov1">3</td>
</tr>
<tr>
<td class="tdhov1">4</td>
<td class="tdhov1">5</td>
<td class="tdhov1">6</td>
<td class="tdhov1">7</td>
<td class="tdhov1">8</td>
<td class="tdhov1">9</td>
<td class="tdhov1">10</td>
</tr>
<tr>
<td class="tdhov1">11</td>
<td class="tdhov1">12</td>
<td class="tdhov1">13</td>
<td class="tdhov1">14</td>
<td class="tdhov1">15</td>
<td class="tdhov1">16</td>
<td class="tdhov1">17</td>
</tr>
<tr>
<td class="tdhov1">18</td>
<td class="tdhov1">19</td>
<td class="tdhov1">20</td>
<td class="tdhov1">21</td>
<td class="tdhov1">22</td>
<td class="tdhov1">23</td>
<td class="tdhov1">24</td>
</tr>
<tr>
<td class="tdhov1">25</td>
<td class="tdhov1">26</td>
<td class="tdhov1">27</td>
<td class="tdhov1">28</td>
<td class="tdhov1">29</td>
<td class="tdhov1">30</td>
<td class="tdhov1">31</td>
</tr>
</table>
CSS:
<style>
.tableMainHov {
width:350px;
height:350px;
padding:5px;
-webkit-border-radius: 7px;
border-radius: 7px;
background:#404854;
border-collapse:collapse;
-webkit-box-shadow: 0 0 0 3px #212732;
box-shadow: 0 0 0 3px #212732;
}
.tdhov1 {
border-top: 2px solid #293038;
text-align: center;
color:#94c3c6;
text-shadow: 1px 1px 5px #000000;
-moz-transition:-moz-transform 0.3s ease-in;
-webkit-transition:-webkit-transform 0.3s ease-in;
-o-transition:-o-transform 0.3s ease-in;
}
.th1 {
border-bottom: 3px solid #212732;
}
.th1 {
background:#293038;
font-size:20px;
color:#19b164;
text-shadow: 1px 1px 5px #000000;
}
.thmain {
text-shadow: 1px 1px 5px #000000;
font-size:25px;
color:#94c3c6;
}
.tdhov1:hover {
color:#ffffff;
background:#293038;
text-shadow: 1px 1px 5px #ffffff;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transform:scale(2);
-webkit-transform:scale(2);
-o-transform:scale(2);
}
</style>
If you enjoy creating HTML calendars or want to make one yourself, view another calendar I created with a tutorial: How To Create A Smooth HTML Calendar Styled With CSS!
No comments:
Post a Comment