Post
Ask Question

Creating Reusable and Scalable Calendar Icon in HTML5 and CSS3

Introduction

 
This article explains how to create a calendar icon for your blog or website, and yes, it is scalable, so you can resize it to any ratio and it will not be blurred just by changing a font-size. 
 
 
You’re free to change the color/size of the text or an icon or anything as you prefer. I’m going to show you how.
 
 
Figure 1: Template Div
 
The following is the template that I will be modifying to get the desired output. It contains the main wrapper Div and three elements inside for Day, Month and Date respectively. I had the option to put all the three in a span but just to reduce the complexity of the CSS I put them in separate tags.
 
And here’s the style for this icon wrapper, you can change the size of the icon in just one go by changing the wrapper’s font-size attribute.
 
 
Figure 2: Icon Wrapper style
 
Here’s the complete HTML and CSS:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.         <title>Reusable Calendar Icon</title>    
  5.   <style type="text/css">    
  6.         Body    
  7.         {    
  8.           font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;    
  9.           font-size: 100%;    
  10.           margin: 10px;    
  11.           color: #333;    
  12.           background-color: #cecece;    
  13.         }    
  14.   
  15.         div.calendarDate{    
  16.                     font-size:1em; /*change calendarIcon size */    
  17.                     display: block;    
  18.                     position: relative;    
  19.                     width: 7em;    
  20.                     height: 7em;    
  21.                     background-color: #fff;                  
  22.                     border-radius: 0.7em;    
  23.                     -moz-border-radius: 0.7em;                        
  24.                     box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd,    
  25.                                                         0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;    
  26.                     overflow: hidden;    
  27.         }    
  28.   
  29.         div.calendarDate *    
  30.         {    
  31.           display: block;    
  32.           width: 100%;    
  33.           font-size: 1em;    
  34.           font-weight: bold;    
  35.           font-style: normal;    
  36.           text-align: center;    
  37.         }    
  38.   
  39.         div.calendarDate strong    
  40.         {    
  41.           position: absolute;    
  42.           top: 0;    
  43.           padding: 0.4em 0;    
  44.           color: #fff;    
  45.           background-color: #19aaaa;    
  46.           border-bottom: 1px dashed #ddd;    
  47.           box-shadow: 0 2px 0 #19aaaa;    
  48.         }    
  49.         div.calendarDate em    
  50.         {    
  51.           position: absolute;    
  52.           bottom: 0em;    
  53.           color: #fff;    
  54.           padding-top:.2em;    
  55.           height: 1.6em;    
  56.           background-color: #19aaaa;    
  57.   
  58.         }    
  59.         div.calendarDate span    
  60.         {    
  61.           font-size: 2.8em;    
  62.           letter-spacing: -0.05em;    
  63.           padding-top: 0.65em;    
  64.           color: #2f2f2f;    
  65.         }    
  66.   
  67.  </style>    
  68. </head>    
  69.   
  70. <body>   
     
     
  71.         <div class="calendarDate">    
  72.                     <em>Saturday</em>    
  73.                     <strong>December</strong>    
  74.                     <span>21</span>    
  75.         </div>    
  76. </body>    
  77. </html>   
Just in case you may want to fiddle around, see: http://jsfiddle.net/sunnykumar08/ZqcrA/
 
Thanks for reading this article, I hope you find this article useful. Feedback and comments are highly appreciated!


Similar Articles