Colourful calendar icons useful for web widgets and phoneGap mobile app list views

We needed to display list of holidays in a small web widget & Mobile list view as shown in the below screenshots which we created as html, css calendar icons in different colors for each day in a week. We could have used images but it demands multiple images or we could have used font-awesome/glyph icons but it has limited support for colours [gradient effects etc.]. HTML/CSS3 is simple and elegant.

imageScreenshot_2014-11-30-21-09-51   image

You can see the sample html & css code live in my jsFiddle. Alternatively the html & css snippets is kept in my Gist

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>colorful calendar icons</title>
<style type="text/css">
/*
Css gradient generated from http://www.colorzilla.com/gradient-editor/
Calendar HTML/Css source reference from http://line25.com/wp-content/uploads/2012/date-icon/demo/index.html
*/
.cal-container {
width: 30px;
}
.date {
background: #fefefe;
background: linear-gradient(top,#fcfcfc 0,#dad8d8 100%);
background: -moz-linear-gradient(top,#fcfcfc 0,#dad8d8 100%);
border-radius: 5px;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px;
box-shadow: 0 0 15px rgba(0,0,0,.1);
-moz-box-shadow: 0 0 15px rgba(0,0,0,.1);
-webkit-box-shadow: 0 0 15px rgba(0,0,0,.1);
margin-top: 5px;
}
.date p {
font-family: Helvetica,sans-serif;
font-size: 12px;
font-weight: 700;
text-align: center;
color: #9e9e9e;
vertical-align: middle;
padding: 2px 0;
}
.date p span {
font-size: 10px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
display: block;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
padding: 2px 0;
}
.date p span.mon {
background: #e5e696;
background: -moz-linear-gradient(left,rgba(229,230,150,1)0,rgba(209,211,96,1)100%);
background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(229,230,150,1)),color-stop(100%,rgba(209,211,96,1)));
background: -webkit-linear-gradient(left,rgba(229,230,150,1)0,rgba(209,211,96,1)100%);
background: -o-linear-gradient(left,rgba(229,230,150,1)0,rgba(209,211,96,1)100%);
background: -ms-linear-gradient(left,rgba(229,230,150,1)0,rgba(209,211,96,1)100%);
background: linear-gradient(to right,rgba(229,230,150,1)0,rgba(209,211,96,1)100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e696', endColorstr='#d1d360', GradientType=1);
}
.date p span.tue {
background: #ffa84c;
background: -moz-linear-gradient(left,rgba(255,168,76,1)0,rgba(255,123,13,1)100%);
background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,168,76,1)),color-stop(100%,rgba(255,123,13,1)));
background: -webkit-linear-gradient(left,rgba(255,168,76,1)0,rgba(255,123,13,1)100%);
background: -o-linear-gradient(left,rgba(255,168,76,1)0,rgba(255,123,13,1)100%);
background: -ms-linear-gradient(left,rgba(255,168,76,1)0,rgba(255,123,13,1)100%);
background: linear-gradient(to right,rgba(255,168,76,1)0,rgba(255,123,13,1)100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa84c', endColorstr='#ff7b0d', GradientType=1);
}
.date p span.wed {
background: #627d4d;
background: -moz-linear-gradient(left,rgba(98,125,77,1)0,rgba(31,59,8,1)100%);
background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(98,125,77,1)),color-stop(100%,rgba(31,59,8,1)));
background: -webkit-linear-gradient(left,rgba(98,125,77,1)0,rgba(31,59,8,1)100%);
background: -o-linear-gradient(left,rgba(98,125,77,1)0,rgba(31,59,8,1)100%);
background: -ms-linear-gradient(left,rgba(98,125,77,1)0,rgba(31,59,8,1)100%);
background: linear-gradient(to right,rgba(98,125,77,1)0,rgba(31,59,8,1)100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#627d4d', endColorstr='#1f3b08', GradientType=1);
}
.date p span.thu {
background: #b3dced;
background: -moz-linear-gradient(left,rgba(179,220,237,1)0,rgba(41,184,229,1)50%,rgba(188,224,238,1)100%);
background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(179,220,237,1)),color-stop(50%,rgba(41,184,229,1)),color-stop(100%,rgba(188,224,238,1)));
background: -webkit-linear-gradient(left,rgba(179,220,237,1)0,rgba(41,184,229,1)50%,rgba(188,224,238,1)100%);
background: -o-linear-gradient(left,rgba(179,220,237,1)0,rgba(41,184,229,1)50%,rgba(188,224,238,1)100%);
background: -ms-linear-gradient(left,rgba(179,220,237,1)0,rgba(41,184,229,1)50%,rgba(188,224,238,1)100%);
background: linear-gradient(to right,rgba(179,220,237,1)0,rgba(41,184,229,1)50%,rgba(188,224,238,1)100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=1);
}
.date p span.fri {
background: #6bba70;
background: -moz-linear-gradient(left,#6bba70 0,#6bba70 100%);
background: -webkit-gradient(linear,left top,right top,color-stop(0%,#6bba70),color-stop(100%,#6bba70));
background: -webkit-linear-gradient(left,#6bba70 0,#6bba70 100%);
background: -o-linear-gradient(left,#6bba70 0,#6bba70 100%);
background: -ms-linear-gradient(left,#6bba70 0,#6bba70 100%);
background: linear-gradient(to right,#6bba70 0,#6bba70 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6bba70', endColorstr='#6bba70', GradientType=1);
}
.date p span.sat {
background: #f2825b;
background: -moz-linear-gradient(left,#f2825b 0,#e55b2b 50%,#f07146 100%);
background: -webkit-gradient(linear,left top,right top,color-stop(0%,#f2825b),color-stop(50%,#e55b2b),color-stop(100%,#f07146));
background: -webkit-linear-gradient(left,#f2825b 0,#e55b2b 50%,#f07146 100%);
background: -o-linear-gradient(left,#f2825b 0,#e55b2b 50%,#f07146 100%);
background: -ms-linear-gradient(left,#f2825b 0,#e55b2b 50%,#f07146 100%);
background: linear-gradient(to right,#f2825b 0,#e55b2b 50%,#f07146 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2825b', endColorstr='#f07146', GradientType=1);
}
.date p span.sun {
background: #a90329;
background: -moz-linear-gradient(left,#a90329 0,#8f0222 44%,#6d0019 100%);
background: -webkit-gradient(linear,left top,right top,color-stop(0%,#a90329),color-stop(44%,#8f0222),color-stop(100%,#6d0019));
background: -webkit-linear-gradient(left,#a90329 0,#8f0222 44%,#6d0019 100%);
background: -o-linear-gradient(left,#a90329 0,#8f0222 44%,#6d0019 100%);
background: -ms-linear-gradient(left,#a90329 0,#8f0222 44%,#6d0019 100%);
background: linear-gradient(to right,#a90329 0,#8f0222 44%,#6d0019 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019', GradientType=1);
}
@-moz-document url-prefix() {
.date,.date p span {
padding: 5px 0;
}
}
</style>
</head>
<body>
<div class="cal-container">
<div class="date">
<p>17 <span class="mon">May</span></p>
</div>
</div>
<div class="cal-container">
<div class="date">
<p>18 <span class="tue">May</span></p>
</div>
</div>
<div class="cal-container">
<div class="date">
<p>19 <span class="wed">May</span></p>
</div>
</div>
<div class="cal-container">
<div class="date">
<p>20 <span class="thu">May</span></p>
</div>
</div>
<div class="cal-container">
<div class="date">
<p>21 <span class="fri">May</span></p>
</div>
</div>
<div class="cal-container">
<div class="date">
<p>22 <span class="sat">May</span></p>
</div>
</div>
<div class="cal-container">
<div class="date">
<p>23 <span class="sun">May</span></p>
</div>
</div>
</body></html>

view raw
Calendar-icons
hosted with ❤ by GitHub

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s