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. }
  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. }
  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. }
  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;
  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. }
  67. </style>
  68. </head>
  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!