Calendar icon option 2

CSS based calendar to use in blog posts. This is an awesome solution that allows resizing based on one single property.

by Alexandre Simoes

HTML

<h1>A Scalable Calendar Icon in HTML5 and CSS3</h1>

<p>This is a reproduction of <a href="http://www.sitepoint.com/calendar-app-icon-photoshop/">Simone Sala's Photoshop icon</a> in HTML5 and CSS3.</p>
<p>Please use as you wish and say "hi" to me <a href="http://twitter.com/craigbuckler">@craigbuckler</a>.</p>
<!-- the icon as a time element -->

<time datetime="2014-09-20" class="icon"> 
    <em>Saturday</em>
    <strong>September</strong>
    <span>20</span>
</time>

<p>Refer to <a href="http://www.sitepoint.com/calendar-icon-css3/">SitePoint.com for more information&hellip;</a>
</p>

SCSS

body {
    font-family:"Helvetica Neue Bold", arial, helvetica, sans-serif;
    font-size: 100%;
    margin: 10px;
    color: #333;
    background-color: #cecece;
}
h1 {
    margin: 0;
    font-weight: normal;
}


time.icon {
    font-size: .5em;
    /* change icon size */
    display: block;
    position: relative;
    width: 7em;
    height: 7em;
    background-color: #fff;
    margin: 2em auto;
    border-radius: 0.6em;
    box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(0deg) skewY(0deg);
    -webkit-transform-origin: 50% 10%;
    transform-origin: 50% 10%;
    
    * {
        display: block;
        width: 100%;
        font-size: 1em;
        font-weight: bold;
        font-style: normal;
        text-align: center;
    }
    
    strong {
        position: absolute;
        top: 0;
        padding: 0.4em 0;
        color: #fff;
        background-color: #fd9f1b;
        border-bottom: 1px dashed #f37302;
        box-shadow: 0 2px 0 #fd9f1b;
    }   

    em {
        position: absolute;
        bottom: 0.3em;
        color: #fd9f1b;
    }

    span {
        width: 100%;
        font-size: 2.8em;
        letter-spacing: -0.05em;
        padding-top: 0.8em;
        color: #2f2f2f;
    }

    &:hover, time.icon:focus {
        -webkit-animation: swing 0.6s ease-out;
        animation: swing 0.6s ease-out;
    }        
}

@-webkit-keyframes swing {
    0% { -webkit-transform: rotate(0deg) skewY(0deg); }
    20% { -webkit-transform: rotate(12deg) skewY(4deg); }
    60% { -webkit-transform: rotate(-9deg) skewY(-3deg); }
    80% { -webkit-transform: rotate(6deg) skewY(-2deg); }
    100% { -webkit-transform: rotate(0deg) skewY(0deg); }
}
@keyframes swing {
    0% { transform: rotate(0deg) skewY(0deg); }
    20% { transform: rotate(12deg) skewY(4deg); }
    60% { transform: rotate(-9deg) skewY(-3deg); }
   ...