-->

K.E ^_~ Yang lagi galau ini penawarnya link

Berkenalan dengan CSS sprite

CSS image sprite begitulah w3schools menyebut teknik ini. Banyak juga yang menyapa dengan sebutan CSS sprite. Web-web besar seperti facebook, google etc juga menggunakan teknik CSS ini dalam memanage gambar-gambar yang digunakan.

Kita semua tahu bahwa sebuah halaman website yang memiliki banyak gambar akan membutuhkan waktu loading lebih lama dibandingkan yang hanya mempunyai beberapa gambar saja. Disinilah CSS sprite berperan untuk memangkas waktu muat halaman web yang memanggil banyak gambar, karena gambar-gambar kecil dijadikan satu dalam sebuah file gambar.

Teknik ini biasanya digunakan untuk animasi halaman web pada menu maupun image, saat pointer mouse melewati sebuah menu, atau saat sebuah menu dikenakan event seperti klik dan lain lain. 

Smiley facebook yang sering digunakan dalam chat maupun komentar juga mengadopsi css sprite. Perhatikan gambar smiley ini


Sebenarnya smiley yang sering kita gunakan pada chat adalah sebuah gambar yang nampak seperti di atas. Tapi kenapa ketikaa kita menggunakan smiley ini yang ditampilkan hanyalah salah satu smiley yang sesuai dengan kode yang kita ketik saja?. Inilah kehebatan CSS sprite.


Trus gimana sih penerapan nyata CSS sprite itu?. 
Sederhana sekali, kita hanya memerlukan property width, height, background-image  dan background-position serta satu pseudo class yaitu hover untuk membuat animasi sederhana menggunakan CSS sprite ini.

Contoh gambar yang saya gunakan. 


Kita buat CSSnya seperti ini


.ganteng {
 width: 212px;
 height: 53px;
 display: block;
 background-image: url('http://1.bp.blogspot.com/-zdYN-sn3Ntk/UHyBV_V4BeI/AAAAAAAABb8/DSfyVzMw6Og/s1600/ttsoke-logo-jempols.png');
 background-position: 0 0;
}

.ganteng:hover {
 background-position: 0px 53px;
}



Buat html-nya singkat aja


<a href="/" class="ganteng"></a>



Hasilnya akan menampilkan sebuah gambar yang akan berubah saat pointer mouse melewatinya



Penjelasan script di atas:
  • Width: untuk mengatur lebar gambar yang ingin ditampilkan, pada contoh lebarnya adalah 212 piksel
  • height: tinggi gambar yang akan tampil
  • display: menampilkan gambar dalam blok (jika display: block; ini dihilangkan maka gambar juga tidak akan ditampilkan)
  • background-image: Memanggil gambar yang akan di gunakan dan menjadikannya sebagai background
  • background-position:Nah disini pengaturan utamanya, atur posisinya agar sesuai dengan peraturan lebar dan tinggi yang telah kita buat di atasnya. Nilai sebelah kiri untuk horisontal dan kanan untuk vertikal

comment 3 komentar

  1. ada aplikasinya gk gan klo ngebuat css???

    BalasHapus
    Balasan
    1. ada, kebanyakan aplikasi untuk web designer pasti bisa digunakan untuk bermain-main dengan CSS juga, ex: notepad++, dan dreamweaver.

      Namun sebenarnya kita cuma butuh notepad trus di save dengan ekstensi .html, ga butuh aplikasi tambahan lain

      Hapus
  2. woohh begini to :D

    simpen dulu deh mas \o/

    BalasHapus

Catatan:
Seluruh komentar yang masuk akan dimoderasi terlebih dahulu. Komentar yang berbau spam, kasar, menghina, seluruhnya yang bersifat menghancurkan bukan membangun tidak akan ditampilkan. Silahkan bertanya dan memberi pendapat dengan sopan dan sesuai aturan.

Anda diperbolehkan mempublikasikan ulang artikel ini, dengan syarat:
1. Mintalah izin dengan cara berkomentar di bawah artikel ini
2. Wajib menyertakan link ke artikel ini dan menyertakan nama penulis

 
© Klikedukasi 2008 - 2013 | Design by Panembahan Satyapradana | 170p3x