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

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