Blog Post Calendar Icon With CSS

by Taqi_Shah

HTML

<h1>Drawing Blog Post Calendar Icon With CSS</h1>
    

	<div class="post">
    	<p class="calendar">17<em>January</em></p>
    	<p><strong>This is a large calendar icon!</strong> <a href="02.html">Click here</a> for the small one!<br />
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id pellentesque felis. Fusce lectus felis, blandit et porta at, viverra eget enim. In eu elit velit, nec volutpat nunc. Fusce vestibulum accumsan tortor. Cras lobortis ornare augue, vitae congue libero pharetra non. Curabitur molestie eros ac eros tincidunt ut dictum nisl semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed fermentum, justo in ullamcorper elementum, mi mauris ultricies odio, quis rutrum urna nisi at purus. Aenean tempor odio at orci scelerisque id cursus sem cursus. </p>      
    </div>

CSS

body {
	margin:0;
	padding:20px 40px;
	background:#fff;
	font:80% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
}
h1, h2, h3{
	font-weight:normal;
	margin:1em 0;
	}
h1{font-size:180%;}
h2{font-size:160%;}	
h3{font-size:140%;}	
pre{
	display:block;
	font:12px "Courier New", Courier, monospace;
	padding:10px;
	border:1px solid #bae2f0;
	background:#e3f4f9;	
	margin:.5em 0;
	width:500px;
	}		
.clear{
	clear:both;
	}	
img{border:none;}

.post{width:600px;}

/* Pure CSS Calendar Icon */

.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;
	}
.calendar em{
	display:block;
	font:normal bold 11px/30px Arial, Helvetica, sans-serif;
	color:#fff;
	text-shadow:#00365a 0 -1px 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;
	}	
.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...