PHP Javascript Ajax jQuery Tutorial Indonesia

Desrizal
Mencoba berbagi ilmu yang sedikit dimiliki ini...

| | | | |

Apa itu CSS Sprite dan Contohnya

15:46 29 Oct 2011 @CSS

Istilah "sprite" muncul sebenarnya untuk istilah pemograman game zaman dulu, mereka meloading banyak image dalam 1 file, kemudian dengan memanfaatkan pengaturan background position gambar yang ditampilkan berubah-ubah, hal ini guna menghemat memori dan supaya tidak sering loading. Nah dalam teknik desain website kita juga bisa mengimplementasikan hal ini, namanya CSS sprite. Biasa CSS sprite dibuat untuk tombol atau gambar animasi yang jika mousenya berada di atas, maka gambar tombol akan berubah. Dengan teknik CSS biasa, biasanya kita membuat 2 buah file image, yang dengan bantuan javascript kita ubah source gambarnya jika pointer mouse berada di atas objek. Tapi dengan CSS sprite cukup 1 file image

Contoh CSS Sprite

Mungkin anda pernah melihat website menu atau tombol suatu website yang berubah jika kita taruh pointer mouse di atas, tetapi ketika kita save page as gambar-gambar tombolnya hanya berada dalam 1 file, seperti situs apple, facebook dan lainnya (contoh file image menu apple.com).

Untuk lebih mengerti perhatikan contoh sederharna CSS sprite berikut:

Jika anda taruh pointer mouse di atas, maka gambarnya akan berubah. Nah jika menggunakan teknik CSS sprite, kita cukup membutuhkan 1 file image seperti di bawah:

Kemudian dengan CSS kita atur supaya pas mouse di atas yang ditampilkan berubah. CSS yang digunakan adalah:

background-image: url(bg.gif);
background-position: [horizontal position] [vertical position];

Kode CSS Sprite

Berikut adalah kode untuk contoh kode CSS sprite di atas

<style>
#menu-desrizal{
    width:91px;
    height:25px;
    text-decoration:none;
    display:block;
    background-image:url(gambar/desrizal-css-sprite.jpg);
    background-position:0 0;
}
#menu-desrizal:hover{ background-position:0 -25; }
</style>

<a id="menu-desrizal" href="http://www.desrizal.com"></a>

Penjelasan:
Kita punya tombol menu link, kita atur tombolnya berukuran 91x 25 pixel, kemudian kita beri latar belakang gambar.
Jika hover (pointer mouse berada di atas) mala kita atur posisi backgroundnya untuk menampilkan tulisan desrizal bagian bawah.

Tags: css belajar css untuk pemula belajar css style belajar css dasar belajar css dan html

About Desrizal

Tulisan Lainnya

Komentar

#1	Dari : Nur Rachmat (16:16 29 Oct 2011) Web : http://teknikinformatika-stmikmdp.tk/ CSS sprite digunakan agar loading website kita lebih cepat. bukan begitu mas? :)
#2	Dari : Desrizal (17:33 29 Oct 2011) Web : http://blog.codingwear.com Bisa jadi, karena lebih simpel
#3	Dari : mkhuda (04:32 30 Oct 2011) Web : - ouwh ternyata .. css sprite namanya..
#4	Dari : izar (16:19 31 Oct 2011) Web : - wah penjelasannya gamblang banget.... thanks berat bro
#5	Dari : lenterak (11:19 04 Nov 2011) Web : http://lenterakecil.com contoh sederhana, tapi kalo gambarnya banyak, pegaturan nggak tepat wajah situs malah amburadul... Pusing mikir css sprite...tapi trus belajar
#6	Dari : Amrimm (13:02 04 Nov 2011) Web : http://amri166.blogdetik.com Kueeerreeennnn!!!,, haha, baru tau bisa kayak gini.. walaupun masih berantakannn... tetep pake konsep looping,, kalo syaratnya belum terpenuhi,, lakukan terus! hahaha
#7	Dari : Suseno (19:39 09 Nov 2011) Web : http://newbieitindonesia.blogspot.com mantap gan,,,, gan minta tutor YUI dong,,,, ane ngulik banyak sprite'a juga,,,
#8	Dari : Hendra Kurniawan (11:44 08 Jan 2012) Web : http://hendra-mwb.mywapblog.com thks sob, ilmu baru lagi nih.
#9	Dari : abe (09:28 18 Jan 2012) Web : http://endoabe.blogspot.com ilmu bau, sederhana namun sangat mengena...trim mas
#10	Dari : dwi setiawan (16:21 23 Feb 2012) Web : - om rizal saya sudah praktekan koding cssnya tapi hovernya tidak berfungsi ya,tetapi image tampil
#11	Dari : pulung (15:52 28 Feb 2012) Web : http://ilham.blog.narotama.ac.id ilmu baru ni harus di coba
#12	Dari : mr (09:48 02 Apr 2012) Web : http://1990ku.blogspot.com mantap, sangat berguna buat q yang masih nyubi
#13	Dari : edi purwanto (15:33 18 Apr 2012) Web : ehttp://go.if.web.id/5172 makasih pak kodenya
#14	Dari : Aini Sastra (08:15 03 May 2012) Web : http://www.ainisastra.com/2012/04/menjadi-teknisi-komputer-yang-terampil.html saya sangat senang mengoprek CSS...
#15	Dari : jual baju online (09:29 09 Jun 2012) Web : http://bestcafeshops.com/jaketonline/jual-baju-online keren kk ilmu nya , siap untuk di coba neeeeh . makasih yaaaah :)
#16	Dari : puisi dan pendidikan (20:05 23 Jun 2012) Web : http://trimudareog.blogspot.com tutorialnya mantap banget kang. ijin simak
#17	Dari : tempat wisata di bandung (19:38 25 Jun 2012) Web : http://www.tempatwisatadibandung.org met malem juragan, blog saya ini "tempat wisata di Bandung" kalau di check di google speed skornya 90, tapi tetap saja yang bermasalah java script-nya dan css nya yang harus di gambar, belum lagi gambarnya. katanya harus pake css sprite, tapi saya masih belum faham juragan. Sebagai contoh di sidebarnya ada feed, facebook dan twetter, itu bagaimana nyatuin gambarnya tapi link nya berbeda?
#18	Dari : Abdul Rohman (12:45 09 May 2013) Web : http://mdf-blog.blogspot.com owhh... jadi 2 gambar itu.. cuma waktu hover kita nentuin posisi backgroundnya biar berubah.. yaaya paham saya... tq bang infonya..