Calendar Widgets (CSS)

by Reusablecode

HTML

<div class="holder">
    <div class="month red">
        <p>October</p>
    </div>
    <div class="day">
        <p>22</p>
    </div>
</div>

<div class="holder">
    <div class="month green">
        <p>September</p>
    </div>
    <div class="day">
        <p>19</p>
    </div>
</div>

<div class="holder">
    <div class="month blue">
        <p>May</p>
    </div>
    <div class="day">
        <p>04</p>
    </div>
</div>

<div class="holder">
    <div class="month yellow">
        <p>Decenber</p>
    </div>
    <div class="day">
        <p>24</p>
    </div>
</div>

CSS

body {
    background: url(http://subtlepatterns.com/patterns/light_wool.png);
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    Simple CSS Calendar Icon - Based on http://365psd.com/day/2-330/ 
    2013 - Bartos Lazarski / Mediumidee.de 
/*##########################*/
/* feel free to copy */
/*-------------------------*/
/* Need a Dribbble invite :) 
http://dribbble.com/Bartos_Lazarski */
/*##########################
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 

.holder {
    width: 82px;
    height: 94px;
    position: relative;
    margin: 20px;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    float: left;
}
.month {
    width: 80px;
    height: 25px;
    border: 1px solid rgba(0,0,0,0.25);
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,0.4);
}
.month p {
    text-align: center;
    color: white;
    font-size: 11px;
    font-weight: 600;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.40);
    margin: 5px 0 0 0;
    border-bottom: 1px dashed rgba(0,0,0,0.30);
    margin: 5px 8px 0px 8px;
    padding: 0 0 1px 0;
}
.day {
    width: 80px;
    height: 60px;
    border: 1px solid rgba(0,0,0,0.25);
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    background: white;
    background:...