Create a calendar icon with pure CSS code

Today I'm introducing a CSS-only way to create a calendar icon that you can use in blog posts or elsewhere. I also learned, but the effect is picture-level. The title of the title, not dazzle technology, emphasis on the reference. The final effect is as follows:

As before, look at the demo:

The HTML code used in this calendar icon is exceptionally simple, as follows:

7 February

We need to use a peripheral element, where the P element is used (or the new element in the HTML5--time). In this peripheral element we also need an element that contains the month.

Implementation principle:

Now, we have two elements that we can manipulate, and we have to create two pseudo elements for each true element, so that we have a total of 6 elements that we can manipulate, so that we can decorate the calendar with these elements. Take a look at the picture below and you'll see.

Implementation process:

First we define the perimeter elements. You may have noticed that I used Box-shadow, Border-radius, and CSS gradients. Not all browsers support these properties, but at least they are becoming more popular. Note that we do not define a fixed height, all of which are controlled by the Line-height attribute of the peripheral element and the EM element in it.

. calendar{margin:.25em 10px 10px 0; padding-top:5px float:left; width:80px; background: #ededef; background:- Webkit-gradient (linear, left top, left bottom, from (#ededef), to (#ccc)); Background:-moz-linear-gradient (top, #ededef, #ccc); Font:bold 30px/60px Arial Black, Arial, Helvetica, Sans-serif; Text-align:center; Color: #000; Text-shadow: #fff 0 1px 0; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; position:relative; -moz-box-shadow:0 2px 2px #888; -webkit-box-shadow:0 2px 2px #888; box-shadow:0 2px 2px #888; }

The EM element contains the name of the month, and its CSS is defined as follows:

. Calendar em{display:block font:normal bold 11px/30px Arial, Helvetica, sans-serif; color: #fff; Text-shadow: #00365a 0-1 PX 0; Background: #04599a; Background:-webkit-gradient (linear, left top, left bottom, from (#04599a), to (#00365a)); Background:-moz-linear-gradient (Top, #04599a, #00365a); -moz-border-radius-bottomright:3px; -webkit-border-bottom-right-radius:3px; border-bottom-right-radius:3px; -moz-border-radius-bottomleft:3px; -webkit-border-bottom-left-radius:3px; border-bottom-left-radius:3px; border-top:1px solid #00365a; }

Now we're going to define the pseudo element. The pseudo elements of the perimeter element (: Before and: After) are used to create two round holes.

Calendar:before,. calendar:after{content: '; float:left; position:absolute; top:5px; width:8px; height:8px; Background: #111; Z-index:1; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -moz-box-shadow:0 1px 1px #fff; -webkit-box-shadow:0 1px 1px #fff; box-shadow:0 1px 1px #fff; }. calendar:before{left:11px; calendar:after{right:11px;}

And the pseudo elements of EM are used to create two rings.

. calendar em:before,. Calendar em:after{content: '; float:left; position:absolute; top:-5px; width:4px; height:14px; Background: #dadada; Background:-webkit-gradient (linear, left top, left bottom, from (#f1f1f1), to (#aaa)); Background:-moz-linear-gradient (Top, #f1f1f1, #aaa); Z-index:2; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }. calendar em:before{left:13px; calendar em:after{right:13px;

Done....

Note : More wonderful articles please pay attention to the triple web Design tutorial section.