Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS-only Calendar Conundrum πŸ“†πŸ€” | @keyframers 1.11.0

CSS-only Calendar Conundrum πŸ“†πŸ€” | @keyframers 1.11.0

Watch us code this live! https://youtu.be/_8OMGE87e2Q

Challenge Accepted!

David Khourshid and Stephen Shaw rise to the challenge raised on Twitter, recreating an amazing, if not improbable calender UI interaction using CSS only. Will they succeed or fail? Watch to find out!

Streamed live on June 18, 2018.

Shownotes:

A Pen by Shaw on CodePen.

License.

<a href="https://youtu.be/_8OMGE87e2Q" target="_blank" data-keyframers-credit style="color: #FFF"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
<form>
<input type="radio" name="day" id="day-1" />
<input type="radio" name="day" id="day-2" />
<input type="radio" name="day" id="day-3" />
<input type="radio" name="day" id="day-4" />
<input type="radio" name="day" id="day-5" />
<input type="radio" name="day" id="day-6" />
<input type="radio" name="day" id="day-7" />
<input type="radio" name="day" id="day-8" />
<input type="radio" name="day" id="day-9" />
<input type="radio" name="day" id="day-10" />
<input type="radio" name="day" id="day-11" />
<input type="radio" name="day" id="day-12" />
<input type="radio" name="day" id="day-13" />
<input type="radio" name="day" id="day-14" />
<input type="radio" name="day" id="day-15" />
<input type="radio" name="day" id="day-16" />
<input type="radio" name="day" id="day-17" />
<input type="radio" name="day" id="day-18" />
<input type="radio" name="day" id="day-19" />
<input type="radio" name="day" id="day-20" />
<input type="radio" name="day" id="day-21" />
<input type="radio" name="day" id="day-22" />
<input type="radio" name="day" id="day-23" />
<input type="radio" name="day" id="day-24" />
<input type="radio" name="day" id="day-25" />
<input type="radio" name="day" id="day-26" />
<input type="radio" name="day" id="day-27" />
<input type="radio" name="day" id="day-28" />
<input type="radio" name="day" id="day-29" />
<input type="radio" name="day" id="day-30" />
<input type="radio" name="day" id="day-31" />
<input type="radio" name="day" id="day-32" />
<input type="radio" name="day" id="day-33" />
<input type="radio" name="day" id="day-34" />
<input type="radio" name="day" id="day-35" />
<div class="ui-calendar" tabindex="0">
<div class="ui-bg"></div>
<header class="ui-header">
<span class="ui-text -empty">Pick your date</span>
<span class="ui-text -month-year">
November, 2018
</span>
</header>
<div class="ui-grid" style="--columns: 8; --rows: 6">
<div class="ui-row" style="--row: 1"></div>
<div class="ui-row" style="--row: 2"></div>
<div class="ui-row" style="--row: 3"></div>
<div class="ui-row" style="--row: 4"></div>
<div class="ui-row" style="--row: 5"></div>
<div class="ui-row" style="--row: 6"></div>
<div class="ui-column" style="--col: 1"></div>
<div class="ui-column" style="--col: 2"></div>
<div class="ui-column" style="--col: 3"></div>
<div class="ui-column" style="--col: 4"></div>
<div class="ui-column" style="--col: 5"></div>
<div class="ui-column" style="--col: 6"></div>
<div class="ui-column" style="--col: 7"></div>
<div class="ui-column" style="--col: 8"></div>
</div>
<!-- Dates go here -->
<label class="ui-day" for="day-1" data-day="1" style="--day: 1"></label>
<label class="ui-day" for="day-2" data-day="2" style="--day: 2"></label>
<label class="ui-day" for="day-3" data-day="3" style="--day: 3"></label>
<label class="ui-day" for="day-4" data-day="4" style="--day: 4"></label>
<label class="ui-day" for="day-5" data-day="5" style="--day: 5"></label>
<label class="ui-day" for="day-6" data-day="6" style="--day: 6"></label>
<label class="ui-day" for="day-7" data-day="7" style="--day: 7"></label>
<label class="ui-day" for="day-8" data-day="8" style="--day: 8"></label>
<label class="ui-day" for="day-9" data-day="9" style="--day: 9"></label>
<label class="ui-day" for="day-10" data-day="10" style="--day: 10"></label>
<label class="ui-day" for="day-11" data-day="11" style="--day: 11"></label>
<label class="ui-day" for="day-12" data-day="12" style="--day: 12"></label>
<label class="ui-day" for="day-13" data-day="13" style="--day: 13"></label>
<label class="ui-day" for="day-14" data-day="14" style="--day: 14"></label>
<label class="ui-day" for="day-15" data-day="15" style="--day: 15"></label>
<label class="ui-day" for="day-16" data-day="16" style="--day: 16"></label>
<label class="ui-day" for="day-17" data-day="17" style="--day: 17"></label>
<label class="ui-day" for="day-18" data-day="18" style="--day: 18"></label>
<label class="ui-day -current" for="day-19" data-day="19" style="--day: 19"></label>
<label class="ui-day" for="day-20" data-day="20" style="--day: 20"></label>
<label class="ui-day" for="day-21" data-day="21" style="--day: 21"></label>
<label class="ui-day" for="day-22" data-day="22" style="--day: 22"></label>
<label class="ui-day" for="day-23" data-day="23" style="--day: 23"></label>
<label class="ui-day" for="day-24" data-day="24" style="--day: 24"></label>
<label class="ui-day" for="day-25" data-day="25" style="--day: 25"></label>
<label class="ui-day" for="day-26" data-day="26" style="--day: 26"></label>
<label class="ui-day" for="day-27" data-day="27" style="--day: 27"></label>
<label class="ui-day" for="day-28" data-day="28" style="--day: 28"></label>
<label class="ui-day" for="day-29" data-day="29" style="--day: 29"></label>
<label class="ui-day" for="day-30" data-day="30" style="--day: 30"></label>
</div>
<button type="reset" class="ui-reset">reset</button>
</form>
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
$unit: 3vmin;
$day-width: $unit * 3;
$day-height: $day-width;
$width: $day-width * 2 + $day-width * 7;
$height-collapsed: $day-width;
$height-expanded: $day-width * 7;
$duration: 1.2s;
input[type="radio"] {
position: absolute;
opacity: 0;
}
.ui-calendar { position: relative; }
.ui-header {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
transform: translateX($unit);
width: 100%;
height: $day-width;
line-height: $day-width;
text-transform: uppercase;
> .ui-text {
position: absolute;
height: 100%;
transform: translateX(0);
display: flex;
justify-content: center;
align-items: center;
letter-spacing: inherit;
&.-month-year {
opacity: 0;
}
}
}
/* ---------------------------------- */
.ui-grid {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: $day-width;
z-index: 100;
pointer-events: none;
}
.ui-column,
.ui-row {
position: absolute;
border: solid 0px;
border-color: #797979;
transform-origin: top right;
transition-duration: #{$duration * 0.5};
transition-timing-function: cubic-bezier(.5,0,.55,1);
transition-property: transform, border-color;
}
.ui-row {
left: 0;
right: 0;
border-top-width: 1px;
}
.ui-column {
top: 0;
bottom: 0;
border-left-width: 1px;
}
$icon-scale: 0.75;
.ui-row {
transform:
translate(
#{$day-width * ($icon-scale)},
calc(
#{
$day-width * -1
+ ($day-width / 2 * $icon-scale / 2)
}
+ (var(--row) - 1)
* #{$day-width* $icon-scale}
/ var(--rows)
)
)
scaleX(#{ 0.13 * $icon-scale });
transition-delay: calc(var(--row) * 60ms);
}
.ui-column {
transform:
translate(
calc(
#{$day-width * (-1.25 * $icon-scale)}
+ ((var(--columns)) * #{$day-width})
+ (var(--col) - 1) * #{$day-width * $icon-scale}
/ var(--columns)
),
#{
$day-width * -1
+ ($day-width / 2 * $icon-scale / 2)
}
)
scaleY( #{0.17 * $icon-scale} );
transition-delay: calc( ( (var(--columns) - var(--col)) * 60ms ));
}
.ui-calendar:focus {
.ui-column,
.ui-row {
border-color: #E3E3E3
}
.ui-row {
transform:
translate(
0em,
calc(
(var(--row) - 1)
* #{$day-width }
)
)
scaleX(1);
transition-delay: calc(var(--row) * 40ms);
}
.ui-column {
transform:
translate(
calc(
(var(--col) - 1)
* #{$day-width}
), 0em
)
scaleY(1);
transition-delay: calc( ( (var(--columns) - var(--col)) * 40ms ));
}
}
/* ---------------------------------- */
.ui-text {
white-space: nowrap;
font-size: $unit;
&.-month-year {
&:before, &:after {
position: absolute;
content: '';
top: $unit;
height: $unit;
width: $unit;
border: 2px solid gray;
border-right: none;
border-bottom: none;
transition-duration: $duration * 2 / 3;
}
&:before {
transform: scale(1, 1) translateX(0) rotate(-45deg);
transition-delay: $duration * 1 / 3;
left: -$unit * 6;
}
&:after {
transform: scale(1, 1) translateX(0) rotate(135deg);
transition-delay: $duration * 2 / 3;
right: -$unit * 6;
}
}
}
@mixin range($min, $max) {
&:nth-of-type(n + #{$min}):nth-of-type(-n + #{$max}) {
@content;
}
}
.ui-day {
display: flex;
position: absolute;
height: $day-height;
width: $day-width;
justify-content: center;
align-items: center;
transform: translate(var(--x, 0), var(--y));
font-size: $unit;
cursor: pointer;
&:before {
content: attr(data-day);
transition-delay: calc(#{$duration * 0} + (30 - var(--day)) * 20ms);
transition-duration: $duration / 3;
transform: scale(0);
opacity: 0;
}
@for $i from 1 through 5 {
@include range(($i - 1) * 7 + 1, ($i - 1) * 7 + 7) {
--y: #{$day-width * $i};
}
}
@for $i from 1 through 7 {
&:nth-of-type(7n + #{$i}) {
--x: #{$day-width + ($i - 1) * $day-width};
}
}
}
@for $i from 1 through 30 {
#day-#{$i}:checked ~ .ui-calendar .ui-day[for="day-#{$i}"] {
transform: translate(0, 1px);
&:before {
transform: none;
opacity: 1;
}
}
}
.ui-reset {
// opacity: .5;
position: absolute;
appearance: none;
-webkit-appearance: none;
border: none;
background: none;
font: inherit;
font-size: 0.7em;
right: #{$day-width * 1.2} ;
top: 0;
height: $day-width;
padding: 0.25em 0.5em;
opacity: 0;
pointer-events: none;
}
input:checked ~ .ui-reset { opacity: 0.5; pointer-events: auto; }
.ui-calendar {
height: $height-expanded;
width: $width;
> .ui-bg {
transform: scaleY($height-collapsed / $height-expanded);
}
/* Fix for clickable items outside of collapsed height */
pointer-events: none;
.ui-header { pointer-events: auto; }
&:focus {
pointer-events: auto;
> .ui-header {
transform: translateX(50%);
> .ui-text {
transform: translateX(-50%);
&.-empty {
opacity: 0;
}
&.-month-year {
opacity: 1;
}
}
}
> .ui-bg {
transform: none;
transition-delay: 0s;
}
.ui-day:before {
transform: none;
opacity: 1;
transition-delay: calc(#{$duration * 0.5} + var(--day) * 20ms);
}
}
input:checked ~ & {
> .ui-header {
transform: translateX($day-width - $unit / 2);
> .ui-text {
transform: none;
&.-empty {
opacity: 0;
}
&.-month-year {
opacity: 1;
}
}
}
.ui-text.-month-year {
&:before, &:after {
opacity: 0;
transition-delay: 0s !important;
}
}
}
&:not(:focus) {
.ui-text.-month-year {
&:before {
transform: scale(2, 0) translateX(500%) rotate(-45deg) ;
}
&:after {
transform: scale(2, 0) translateX(-500%) rotate(135deg) ;
}
}
}
input:checked ~ &:not(:focus) {
.ui-day:before {
transition-delay: calc((30 - var(--day)) * 10ms);
}
}
}
/* ---------------------------------- */
.ui-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
transform-origin: top center;
box-shadow: 0 1rem 1rem rgba(black, 0.2);
transition-duration: #{$duration * 0.5};
transition-delay: #{$duration * 0.4};
overflow: hidden;
}
body {
background-color: #649EAA;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: 1px;
overflow: hidden;
color: #242424;
}
*:focus {
outline: none;
}
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
*, *:before, *:after {
transition-property: transform, opacity;
transition-duration: $duration;
transition-timing-function: cubic-bezier(.5, 0, .5, 1);
box-sizing: border-box;
position: relative;
}
body, html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
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.