12/11/2014

How To Create A Fancy HTML Calendar Styled With CSS That Uses Hover Enlarge To Expand The Days Of The Week On Mouseover

How To Create A Fancy HTML Calendar Styled With CSS That Uses Hover Enlarge To Expand The Days Of The Week On Mouseover

Overview:

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!

Previous Post
Next Post

I'm a creative individual that makes a living from the dynamics of digital technology.

Related Posts

0 comments: