Saya baru tahu kalau HTML5 sudah memiliki logo. Menurut saya logo baru ini terlihat futuristik banget. Blog ini juga sudah memakai markah HTML5 lho ;)
Wajah Blog Saya Selama 7 Bulan
Peringatan: Posting ini terdiri dari beberapa gambar berukuran besar, pertimbangkan kondisi akses internet dulu sebelum membacanya.
Sejak blog ini mulai aktif sekitar 7 bulan yang lalu, tepatnya tanggal 15 April 2010 berbarengan dengan ulang tahun saya :), blog ini telah berganti wajah beberapa kali. 4 kali saya mengganti desain blog ini secara menyeluruh (mengganti theme). Untuk pengubahan minor saya lupa menghitungnya karena terlalu sering :D. Sayang sekali saya tidak menyimpan semua file theme blog yang lama.
1. Cekerholic V1
Desain pertama blog ini, tampilannya cukup grunge dan kata Stovila mirip desain blognya Donny Verdian (sekarang sudah ganti juga). Desain ini juga memakan bandwith yang cukup besar karena banyak menggunakan grafik. Oh ya desain ini juga pernah dimuat di HTML Gallery.
Berikut tampilannya, klik gambar untuk melihat dalam ukuran penuh :
Membuat Sosial Media Sharing Button dengan Efek Rollover
Kemarin saya menulis tentang CSS Sprites dan contoh penggunaannya. Nah kali ini saya akan mengajak anda untuk membuat sebuah Sosial Media Sharing Button/Menu dengan menggunakan teknik CSS Sprites.
Preview
Inilah hasil akhir dari tutorial ini, klik gambar untuk melihat live-demo
Mengenal CSS Sprites
Dalam tutorial theme WordPress kemarin, saya menggunakan teknik CSS Sprites untuk membuat efek rollover pada logo blog. Nah, kali ini saya akan menjelaskan tentang CSS Sprites dan penggunaannya.
Konsep CSS Sprites kira-kira seperti ini:
- Beberapa gambar yang berbeda digabungkan menjadi satu gambar dengan software pengolah gambar, atau istilahnya membuat gambar master.
- Gambar master itu ditampilkan dalam beberapa elemen HTML pada suatu halaman web dengan posisi atau ukuran yang berbeda dengan menggeser posisi gambar menggunakan CSS
Untuk lebih jelasnya silakan lihat ilustrasi berikut ini:
Mengapa Menggunakan CSS Sprites?
Kelebihan utama CSS Sprites adalah mengurangi HTTP Request dari sebuah halaman web. Misalnya saja kita ingin menampilkan 5 buah ikon sosial media di blog kita, anggaplah 1 ikon ukurannya 2 KB, jadi total ukurannya 10 KB. Kemudian 5 ikon itu kita gabungkan dengan photoshop dan ukurannya menjadi 8 KB, ada penghematan 2 KB kan? Dengan menggunakan CSS Sprites selain mengurangi ukuran file juga mengurangi HTTP Request, dari 5 menjadi hanya 1. Bagi situs sekelas Yahoo atau Google yang mempunyai pengunjung ratusan juta, pengurangan sekecil itu adalah sebuah efisiensi yang sangat besar.
Salah satu contoh blog Indonesia yang menggunakan CSS Sprites adalah Navinot. Di blog ini hampir semua gambar dalam CSS dikombinasikan dalam sebuah gambar master berukuran besar, jumlahnya kurang lebih ada 20! Saya perkirakan nilai efisiensinya mencapai 50%.
Elemen yang dilingkari menggunakan CSS Sprites
Gambar yang digunakan untuk CSS Sprites
Bagaimana cara menggunakan CSS Sprites?
Pada prinsipnya CSS Sprites adalah menggeser koordinat X dan Y suatu gambar dengan CSS. Lihat baris kode berikut:
h1 a {
background-image:url(images/logo.png);
background-position:0 0;
height:86px;
text-indent:-9999px;
width:334px;
}
h1 a:hover{background-position:0 86px;}
Penjelasannya begini:
CSS mengatur agar elemen anchor (link) pada h1 menampilkan sebuah gambar (logo.png) dengan koordinat X dan Y masing-masing 0. Kemudian CSS mengatur agar ketika elemen anchor(link) pada h1 di-hover koordinat Y berpindah ke posisi 86px. Jadi CSS Sprites itu sebenarnya cuma memindah-mindah posisi gambar pada suatu elemen.
Anda masih bingung? Jika iya silakan baca-baca tulisan tentang CSS Sprites berikut :
Konversi Desain dari Photoshop ke Theme WordPress
Tutorial ini adalah kelanjutan dari 2 tutorial sebelumnya di situs Desain Digital, yaitu Mendesain Blog Elegan dengan Photoshop dan dilanjutkan dengan memotong PSD atau slicing. Di tutorial ini kita akan mengubah hasil desain menjadi theme WordPress. Kita akan berkenalan dengan HTML5 dan beberapa efek CSS3 seperti box shadow, text shadow, dan rounded corner.
Preview
Di bawah adalah hasil akhir tutorial. Sedikit berbeda dengan mockup PSD awal karena ada penambahan widget di bagian footer. Klik gambar untuk melihat live demo-nya.
