Salam Sobat Jaco.. Hem, Teman2 Udah Pada Yang Tahu Gak Apa Itu CSS SPRITE..?? Mungkin Bagi Yang Masih Awam Dengan Css Pasti Penasaran Donk Apa Itu Css Sprite.. langsung Kita Bahas d sekalian dengan Contohnya..
CSS SPRITE : teknik menampilkan gambar dihalaman web atau blog dengan cara mengkombinasikan beberapa gambar kemudian memanggilnya dengan css dengan cara memanggil nilai posisiX dan nilai posisY sesuai Gambar yang di buat.
Css image juga bisa mengurangi http request image agar tidak berat ketika blog atau web kita saat di load.
Bagaimana Cara Membuat Css sprite..??
Pertama tama teman siapin dulu beberapa gambar yang udah disatukan menjadi 1 file, jika belum ada teman2 bisa memakai gambar di link dibawah ini berikut sebagai bahan percobaan..
lh5.googleusercontent.com/-FrdCcLEo9Lc/UjKdaoqktXI/AAAAAAAAADU/qolyLCGstEk/h70/Angry+Bird+copy.png
Masing Gambar diatas berukuran 38px sehingga kalau ditotal lebar gambarnya 190px.. loh Tahu dari mana..!!??
Gini d untuk lebih jelasnya klik kanan gambar hasil donlod tadi kemudian klik kanan pilih properties pada baian properties pilih tab details maka terlihat sepeti ini
trus, bagaimana jika ingin memanggilnya satu persatu. nuka notepad teman2 kemudian ketikkan kode CSS dibawah ini.
<style type="text/css">
.img-1,.img-2,.img-3,.img-4,.img-5{
width: 38px; height: 38px;
}
.img-1 {
background: url('Angry Bird copy.png') no-repeat 0px 0px;
}
.img-2 {
background: url('Angry Bird copy.png') no-repeat -35px 0px;
}
.img-3 {
background: url('Angry Bird copy.png') no-repeat -72px 0px;
}
.img-4 {
background: url('Angry Bird copy.png') no-repeat -109px 0px;
}
.img-5 {
background: url('Angry Bird copy.png') no-repeat -146px 0px;
}
</style>
Kode diatas berfungsi untuk memanggil gambar yang kita pakai tadi kearah kanan. perhatikan tag
.img-2{background:url('Angry Bird copy') no-repeat -35px 0px;
Semakin Besar nilai negatif yang kita berikan maka gambar akan bergeser kekanan. berhubung gambar
yang kita pakai memanjang horizontal maka script diatas cocok untuk css image sprite horizontal..
lanjut lagi untuk memanggil gambarnya maka kita pakai kode HTML dibawah ini di tag <body>
<body> <div class="img-1"></div> <div class="img-2"></div> <div class="img-3"></div> <div class="img-4"></div> <div class="img-5"></div> </body>
Coba Save hasil ketikan teman dengan nama Sprite CSS.html kemudian simpan 1 folder bersama dengan gambar karena,
kalau tidak maka hasil css spritenya tidak terlihat karena gambarnya tidak ada.. Jika berhasil Maka hasil seperti dibawah ini:
Ok D sekian dulu buat tutor bila teman2 masih belum paham bisa ajukan pertanyaan dan komen dibawah.. Salam Sobat Jaco
Semoga bermanfaat ya...!!!
