Tips Dan Trik Membuat CSS Sprite Sederhana Online

Sprite adalah gabungan sejumlah gambar menjadi 1 gambar; CSS (cascading style sheet) adalah kode pendukung HTML untuk mengatur tampilan blog. Tujuan membuat sprite, memperpendek waktu loading situs.

Mau belajar buat sprite sederhana, bisalah, ‘kan sederhana. Meskipun wordpress.com tidak menyediakan sarana CSS tidak berarti tidak bisa. Belajar lewat online ..tidak ada akar, rotan pun jadi (‘eh?).

Membuat CSS sprite terdengar canggih dan sedikit menakutkan. Bikin kita minder. Kalau begitu anggap saja permainan baru yang mengasyikkan dan benar memang fun! Sungguh. Jangan percaya, ayo kita buktikan bareng-bareng.
 

Trik membuat CSS sprite sederhana online

Kita belum mengerti sprite, belum mengerti CSS, ..#halah masih bodoh ‘gitu, repot amat! Buat apa program online segudang, pasti ada di sana. Pantas disebut bodoh kalau kita tidak memanfaatkannya.

Gambar — oke, ambil 6 gambar zodiak untuk eksperimen: Scorpio, Sagitarius, Capricornus, bintang yang sedang berjalan sekarang sampai tahun depan. Unduh 6 gambar ini dan simpan di komputer (klik kanan).
  scorpio 23-oktober 21-novembersagitarius 22-november 21-desembercapricornus 22-desember 19-januari      scorpio 23-oktober 21-november warnasagitarius 22-november 21-desember warnacapricornus 22-desember 19-januari warna

Program CSS Sprite Generatoronline, free (klik). Unggah 3 gambar zodiak polos yang sudah di .zip ke program. Ada sederet dialog, biarkan kecuali ‘Build Direction: horizontal‘, ‘Horizontal offset: 5‘, ‘Vertical offset: 5‘. Klik [Create sprite & CSS]. Jadi! Gambar ada, kode CSS juga ada. Unduh dan simpan spritenya saja. Beri nama baru. Cepat sekali 3 gambar jadi 1.

zodiak scorpio-sagita-capriGambar sprite — ulangi untuk 3 gambar zodiak warna (.zip). Jadi. Unduh gambar spritenya saja, simpan. Beri nama baru.

Ulangi untuk terakhir kali, menggabungkan kedua sprite polos dan warna tadi yang sudah di .zip. Ganti ‘Build Direction:’ sekarang dengan vertical. Lainnya tetap. Kalau betul, hasil seharusnya seperti gambar samping. Cocok? Siip!

Unduh sprite terakhir, dan CSS. Simpan sprite dengan nama baru.

Tips: (1) Urutan gambar terbalik-balik karena proses diatur program mengikuti abjad. Sudah terlanjur keliru. Usul perbaikan, imbuhkan ‘angka’ agar gambar di sprite berurutan, (2) segera unggah sprite ke pustaka media blog untuk dimainkan di posting berikutnya. Beri nama baru.

Gambar sprite selesai. Cuma segitu? Iya.

Kode CSS — program juga memperlihatkan kode CSS seperti ini,

#container li {
    background: url(csg-509c11469ad36.png) no-repeat top left;
}
.sprite-scor-sagita-capri-awhite{ background-position: 0 0; width: 160px; height: 50px; } 
.sprite-scor-sagita-capri-color{ background-position: 0 -55px; width: 160px; height: 50px; }

Program menawarkan gagasan menerapkan kode CSS sprite. Artinya? He.he.. entah tetapi baris pertama ‘li’ sepertinya (menebak-nebak), mendefinisikan sprite sebagai ‘background’. Lalu ‘top’ (dan) ‘left’ memposisikan background sprite di paling atas layar dan kiri layar. Belum faham tidak apa-apa, ‘nggak usah dipikirin. Tetapi ‘no repeat’ jelas ‘kan.

Dua baris berikutnya sepertinya menjelaskan kandungan background. Ada 2 gambar sprite di dalamnya, sprite polos dan sprite warna. Masing-masing diikuti 2 keterangan: posisi dinyatakan dalam koordinat (X,Y) dan dimensi (width height).

CSS selesai. Lho sudah? ‘Ndak susah ternyata.

Horee! Akhirnya kita bisa juga membuat CSS sprite sederhana online. Sekarang faham sedikit sprite dan CSS. Kita lanjutkan di posting berikutnya pemanfaatan informasi CSS di atas untuk mengatur sprite warna menimpa sprite polos.
 
😀  (hebatnya program online, terbukti)
 

Tagged with: , , , , ,
Ditulis dalam Blog Tips dan Trik, Blogging, Tutorial
4 comments on “Tips Dan Trik Membuat CSS Sprite Sederhana Online
  1. sikkabolas berkata:

    benar-benar buta mas… padahal pingin sekali…

  2. Adjie berkata:

    Kunjungan balik nih,,, tehnik ini menghemat banyak resource dan http request, perlu banget bwt webmaster

  3. Kang Nemo berkata:

    tips yang sangat bermanfaat sekali..

Silakan komentar, 'like' juga oke

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: