Daftar postingan blog LearningjQuery.com memiliki tanggal keren di sebelah kiri, seperti ini:
Dari gambar terlihat bahwa "2009" disusun secara vertikal di sisi kanan. Gunakan Firebug untuk melihat elemen. Teks "2009" muncul di struktur html. Artikel ini memperkenalkan dua metode untuk mencapai efek ini.
1. Gunakan teknologi Sprite untuk mencapainya
Proses implementasinya telah diperkenalkan secara detail oleh Chris Coyier dalam artikel " Teknik Tampilan Tanggal dengan Sprite ". Berikut penjelasan singkat proses implementasinya. Tentunya kami tidak ingin menggunakan gambar terpisah untuk setiap tanggal, jadi kami mengintegrasikannya ke dalam satu gambar dan menyusun tahun, bulan, dan hari di area gambar yang berbeda, seperti yang ditunjukkan pada gambar:
1.Html
Struktur html pada halaman tersebut adalah sebagai berikut:
<div class="tanggal pasca">
<div class="bulan m-06">Jun</div>
<div class="hari h-30">30</div>
<div class="tahun y-2009">2009</div>
</div>
Wadah .postdate berisi tiga area, sesuai dengan tahun, bulan dan hari, yang menjamin integritas semantik.
Pada sistem CMS seperti wordpress, kode backendnya seperti ini:
<div class="tanggal pasca">
<div class="bulan m-<?php the_time('m') ?>"><?php the_time('M') ?></div>
<div class="hari h-<?php the_time('d') ?>"><?php the_time('d') ?></div>
<div class="tahun y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div>
</div>
2. CSS
CSS adalah tempat sprite benar-benar berperan, menggunakan atribut kelas yang ditentukan dalam HTML untuk memungkinkan gambar terkait ditampilkan.
Pertama, biarkan container dengan atribut kelas .postdate diposisikan secara relatif, sehingga ketiga area yang terdapat di dalamnya akan diposisikan secara absolut dan menggunakan gambar background yang sama. Atur lebar dan tinggi masing-masing, dan pindahkan teks ke luar untuk menampilkan gambar latar belakang.
Kemudian, tentukan posisi latar belakang tertentu untuk setiap bulan (12), setiap hari (31), dan setiap tahun (berdasarkan 10 tahun) untuk menampilkan gambar yang sesuai.
.tanggal pasca {
posisi: relatif;
lebar: 50 piksel;
tinggi: 50 piksel;
mengapung: kiri;
}
.bulan, .hari, .tahun {
posisi: mutlak;
indentasi teks: -1000em;
gambar latar belakang: url(/wp-content/themes/ljq/images/dates.png);
pengulangan latar belakang: tidak ada pengulangan;
}
.bulan { atas: 2 piksel; kiri: 0; lebar: 32 piksel;
.hari { atas: 25 piksel; kiri: 0; lebar: 32 piksel; tinggi: 25 piksel;}
.tahun { bawah: 0; kanan: 0; lebar: 17 piksel; tinggi: 48 piksel;}
.m-01 { posisi latar belakang: 0 4px;}
.m-02 { posisi latar belakang: 0 -28px;}
.m-03 { posisi latar belakang: 0 -57px;}
... lebih seperti ini ...
.d-01 { posisi latar belakang: -50px 0;}
.d-02 { posisi latar belakang: -50px -31px;}
.d-03 { posisi latar belakang: -50px -62px;}
... lebih seperti ini ...
.y-2006 { posisi latar belakang: -150px 0;}
.y-2007 { posisi latar belakang: -150px -50px;}
.y-2008 { posisi latar belakang: -150px -100px;}
... lebih seperti ini ...