Tutorial | Membuat Icon Kalender Menggunakan CSS3

Salah satu kunci web yang powerful adalah meminimalisir penggunaan gambar untuk desainnya (entah itu menggunakan slice image atau berbagai macam icon). Nah di sini saya akan kasih tutorial tentang bagaimana membuat icon/badge berbentuk kalender memanfaatkan beberapa trik pada CSS3. Perlu diketahui bahwa dalam pembuatan icon ini tanpa menggunakan gambar satu pun, dan hasilnya pun menarik meski kelihatannya cukup simple.

Hasilnya kurang lebih akan seperti pada foto di bawah ini

HTML
Seperti yang saya tuliskan tadi, untuk membuat icon kalender html yg kita gunakan sangatlah simpel.

<p class="calendar">7 <em>April</em></p>

Di sini saya menggunakan tag p untuk containernya, anda juga bisa menggunakan div atau tag HTML5 misalnya section. Di dalam cocntainer tersebut kita kasih elemen lagi sebagai container yang nantinya akan menampung nama bulan. Nantinya pada icon kalender ini akan kita buat lubang dan ring buatan menggunakan efek CSS sehingga akan mirip seperti kalender beneran.

Pertama-tama, kita akan mengubah tampilan containernya. Di bawah ini saya menggunakan beberapa efek seperti box-shadow, border-radius dan CSS gradients. Meskipun tidak semua browser support dengan efek2 tadi, namun trik ini cukup efektif untuk mempercantik layout.

.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;
 }

Selanjutnya kita akan mengubah bagian bulan, pada tag em.

.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;
 }

Berikutnya, kita menggunakan pseudo class before dan after untuk membuat lubang pada kalender kita. Berikut ini triknya :

.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;}

Selanjutnya, juga dengan menggunakan pseudo class before dan after, kita akan memoles em tadi menjadi semacam ring seperti pada kalender dinding pada umumnya :D

.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;} 

Selesai! Itu tadi tutorial cara Membuat Icon Kalender Menggunakan CSS3.Semoga tutorial ini bermanfaat :D

Demo-nya bisa anda buka pada link di bawah ini :
http://omdjin.com/demo/kalender_css/