Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fluent Design Calendar UI
<header>
<h1>Fluent Design Calendar</h1>
<p>
The upcoming Windows 10 Spring Creators Update features some cool new fluid design elements. One of my favorites is the calendar in the notification area with a cool hover effect.
</p>
</header>
<table class="calendar" cellpadding="0" cellspacing="0">
<tbody>
<thead>
<th>Su</th>
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
</thead>
<tr>
<td><a href="#">1</a></td>
<td><a href="#">2</a></td>
<td><a href="#">3</a></td>
<td><a href="#">4</a></td>
<td><a href="#">5</a></td>
<td><a href="#">6</a></td>
<td><a href="#">7</a></td>
</tr>
<tr>
<td><a href="#">8</a></td>
<td><a href="#">9</a></td>
<td><a href="#" class="current active">10</a></td>
<td><a href="#">11</a></td>
<td><a href="#">12</a></td>
<td><a href="#">13</a></td>
<td><a href="#">14</a></td>
</tr>
<tr>
<td><a href="#">15</a></td>
<td><a href="#">16</a></td>
<td><a href="#">17</a></td>
<td><a href="#">18</a></td>
<td><a href="#">19</a></td>
<td><a href="#">20</a></td>
<td><a href="#">21</a></td>
</tr>
<tr>
<td><a href="#">22</a></td>
<td><a href="#">23</a></td>
<td><a href="#">24</a></td>
<td><a href="#">25</a></td>
<td><a href="#">26</a></td>
<td><a href="#">27</a></td>
<td><a href="#">28</a></td>
</tr>
<tr>
<td><a href="#">29</a></td>
<td><a href="#">30</a></td>
<td><a href="#" class="disabled">1</a></td>
<td><a href="#" class="disabled">2</a></td>
<td><a href="#" class="disabled">3</a></td>
<td><a href="#" class="disabled">4</a></td>
<td><a href="#" class="disabled">5</a></td>
</tr>
<tr>
<td><a href="#" class="disabled">6</a></td>
<td><a href="#" class="disabled">7</a></td>
<td><a href="#" class="disabled">8</a></td>
<td><a href="#" class="disabled">9</a></td>
<td><a href="#" class="disabled">10</a></td>
<td><a href="#" class="disabled">11</a></td>
<td><a href="#" class="disabled">12</a></td>
</tr>
</tbody>
</table>
<footer>
<p>
This pen recreates that hover effect using a radial gradient background image on the containing table, positioned dynamically using a bit of JavaScript. The effect is completed by applying an opaque border to the table and cells, then using transparent borders on the &lt;a&gt; tags within the cells.
</p>
</footer>
$(function(){
var $calendar = $(".calendar");
var bgColor = $calendar.css("background-color");
$('body').mousemove(function(e) {
var x = e.pageX - $calendar[0].offsetLeft;
var y = e.pageY - $calendar[0].offsetTop;
var pos = x + "px " + y + "px";
var gradient = "radial-gradient(circle 70px at " + pos + ", #939393, " + bgColor + ")"
$calendar.css({ background: gradient });
});
$(".calendar a").click(function(e) {
e.preventDefault();
$(".calendar a").removeClass("active");
$(this).addClass("active");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$color__white: #fff;
$color__black: #000;
$color__blue: #0078d7;
$color__charcoal: #464646;
$color__gray: lighten($color__charcoal, 30%);
$table__border: 2px solid $color__charcoal;
html {
font-size: 62.5%;
}
body {
margin: 0;
padding: 2rem;
width: 100%;
min-height: 100vh;
font-size: 1.6rem;
background: $color__charcoal;
color: $color__white;
font-family: 'Segoe UI', sans-serif;
line-height: 1.6;
box-sizing: border-box;
}
header {
max-width: 30em;
margin: 0 auto 6rem auto;
}
footer {
max-width: 30em;
margin: 6rem auto 0 auto;
}
h1 {
font-weight: 300;
font-size: 4rem;
margin: 0;
}
p {
margin: 0 0 2rem 0;
}
.calendar {
margin: 2rem auto;
width: 30rem;
border-collapse: separate;
border: $table__border;
border-right: none;
border-bottom: none;
line-height: 1;
}
th {
margin: 0;
padding: .8rem 1rem;
text-align: center;
font-weight: normal;
font-size: 1.2rem;
background: $color__charcoal;
border: $table__border;
border-top: none;
border-left: none;
}
td {
margin: 0;
text-align: center;
border: $table__border;
border-top: none;
border-left: none;
a {
display: block;
margin: 0;
padding: .8rem 1rem;
background: $color__charcoal;
background-clip: padding-box;
border: 2px solid transparent;
color: $color__white;
text-decoration: none;
&:hover {
border-color: $color__gray;
background: lighten($color__charcoal, 5%);
}
&.current {
background: $color__blue;
color: $color__white;
&:hover {
background: $color__blue;
border-color: lighten($color__blue, 20%);
}
}
&.active {
border-color: $color__blue;
&:hover {
border-color: darken($color__blue, 5%);
}
}
&.current.active {
box-shadow: inset 0 0 0 2px $color__black;
&:hover {
border-color: lighten($color__blue, 20%);
}
}
&.disabled {
color: $color__gray;
&:hover {
background: $color__charcoal;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.