Menggambar Ikon Kalender Dengan CSS3

Selain dengan Gambar Latar belakang, untuk membuat ikon kalender, kita dapat menggunakan beberapa trik CSS, yang dapat kita gunakan untuk membuat tanggal posting blog atau sesuatu yang serupa.

Dalam hal ini kita tidak lagi membutuhkan background gambar dan murni hanya menggunakan CSS. Sangat sederhana dan mudah untuk membuatnya.

Hasilnya akan tampak seperti berikut ini:

27 Agustus

27 Agustus

Lihat LIVE DEMO

Implementasi:

HTML

<p class="calendar">27 <em>Agustus</em></p>

CSS

<style type="text/css">

.calendar{
margin:.25em 10px 10px 0;
padding-top:5px;
float:left;
width:50px;
background:#ededef;
background: -webkit-gradientundefinedlinear, left top, left bottom, fromundefined#ededef), toundefined#ccc));
background: -moz-linear-gradientundefinedtop, #ededef, #ccc);
font:bold 20px/40px 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/20px Arial, Helvetica, sans-serif;
text-transform:uppercase;
color:#fff;
text-shadow:#00365a 0 -1px 0;
background:#04599a;
background:-webkit-gradientundefinedlinear, left top, left bottom, fromundefined#04599a), toundefined#00365a));
background:-moz-linear-gradientundefinedtop, #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:4px;
width:6px;
height:6px;
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:7px;}
.calendar:after{right:7px;}
.calendar em:before, .calendar em:after{
content:'';
float:left;
position:absolute;
top:-3px;
width:2px;
height:10px;
background:#dadada;
background:-webkit-gradientundefinedlinear, left top, left bottom, fromundefined#f1f1f1), toundefined#aaa));
background:-moz-linear-gradientundefinedtop, #f1f1f1, #aaa);
z-index:2;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.calendar em:before{left:9px;}
.calendar em:after{right:9px;}

</style>

Agar Ikon kalender ini dapat terintegrasi dengan posting blog, kita hanya perlu memasukan TimeStamp kedalam class="calendar" dan membungkus bulan posting dengan tag <em>. Lihat Cara Mengganti Tanggal Posting Dengan Ikon Kalender

ENJOYED..!!!