HTML CSSResult Skip Results Iframe
EDIT ON
/* First we style the container element.  */
/* Check : https://alvarotrigo.com/blog/css-calendar/ */
.calendarPopup {
    margin: .25em 10px 10px 0;
    padding-top: 5px;
    float: left;
    width: 80px;
    background: #ededef;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc));
    background: -moz-linear-gradient(top, #ededef, #ccc);
    font: bold 30px/60px Arial Black, Arial, Helvetica, sans-serif;
    text-align: center;
    color: #000;
    text-shadow: #fff 0 1px 0;
    border-radius: 3px;
    position: relative;
    box-shadow: 0 2px 2px #888;
}

/* Em element is also styled, it contains the month’s name. */
.calendarPopup em {
    display: block;
    font: normal bold 11px/30px Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: #00365a 0 -1px 0;
    background: #04599a;
    background: -webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a));
    background: -moz-linear-gradient(top, #04599a, #00365a);
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top: 1px solid #00365a;
}

/* Now I am styling the pseudo elements. Container’s pseudo elements (:before and :after) are used to create thos circles, "holes in te paper". */
.calendarPopup:before, .calendarPopup:after {
    content: '';
    float: left;
    position: absolute;
    top: 5px;
    width: 8px;
    height: 8px;
    background: #111;
    z-index: 1;
    border-radius: 10px;
    box-shadow: 0 1px 1px #fff;
}

.calendarPopup:before {
    left: 11px;
}

.calendarPopup:after {
    right: 11px;
}

/*…and em’s pseudo elements are used to create the rings: */
.calendarPopup em:before, .calendarPopup em:after {
    content: '';
    float: left;
    position: absolute;
    top: -5px;
    width: 4px;
    height: 14px;
    background: #dadada;
    background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa));
    background: -moz-linear-gradient(top, #f1f1f1, #aaa);
    z-index: 2;
    border-radius: 2px;
}

.calendarPopup em:before {
    left: 13px;
}

.calendarPopup em:after {
    right: 13px;
}