Tuesday, February 2, 2010

CSS Sprite Dalam Web Design

CSS sprites bukanlah barang baru bahkan CSS sprites adalah cara lama yang ampuh dan sudah menjadi hal yang biasa dalam web development. Meskipun CSS sprites bukanlah hal yang penting tetapi dalam situasi tertentu CSS sprites ini dapat memberikan manfaat dan keuntungan yang nyata, terutama apabila beban server menjadi salah satu pertimbangan dalam mendesign sebuah website.

Kata sprite ini berasal dari kosa kata komputer graphic yang berarti sebuah obyek grafis yang digabungkan kedalam 2d atau 3d animasi melalui prosesor graphic. Sprite ini dikembangkan karena ranah video games yang makin kompleks dan memerlukan cara pengolahan gambar berkualitas tinggi yang cerdas tanpa mengganggu pola alur permainan itu sendiri.

Seiring dengan berjalannya waktu, pada era tahun 2000-an banyak web designer yang progresif dan futuristic mulai mencari cara alternatif untuk menampilkan design menu yang menarik tanpa memakai JavaScripts, ketika inilah sprites mulai memasuki ranah web design dan development. Dengan masuknya CSS dalam arus utama web design pemakaian sprites dalam web design dimungkinkan dan semakin mudah, handal, cepat serta sederhana daripada memakai tehnik JavaScripts yang mulai ketinggalan zaman.

Pemakaian sprites dalam pendekatan CSS pada web design juga memakai metoda yang telah melegenda dalam dunia video games, dimana banyak gambar dipakai disemua website yang dijadikan satu melalui dengan apa yang disebut “master image”. Pemakaian sprite dalam mendesing web berbasis CSS hanya tinggal mengatur posisi tampilan dengan properti yang terdapat dalam CSS, begitu juga dengan penampilan hover, active atau focus. Semuanya menjadi sangat mudah melalui sprites ini.

Ketika sebuah halaman web diload, gambar tidak ditampilkan satu persatu akan tetapi seluruh master image. Sekilas hal ini tidak terlihat perbaikan apapun yang nyata, akan tetapi apabila dilihat lebih mendalam efek JavaScripts mouse rollover memerlukan dua kali HTTP request dimana akan menyebabkan terjadi kedipan pada gambar atau bahkan tidak ada gambar sama sekali apabila koneksi internet sedang buruk. Memakai tehnik CSS sprite dalam web design ini tidak akan ada sama sekali kedipan karena semua gambar telah diload ketika mengupload master image.

Salah satu cara populer adalah dengan mengembangkan design master yang kemudian dikeluarkan secara selektif ketika dibutuhkan oleh sebuah code yang dipetakan kedalam posisi unik dari masing-masing design untuk kemudian ditampilkan dalam layar. Sprites ini banyak digunakan untuk gambar statis maupun dinamis dimana posisi dari masing-masing gambar design ditentukan oleh hardware controller. Contoh gambar dibawah ini adalah design sprites untuk Pokemon.

Pelajari Lebih Jauh: CSS Sprite dalam Web Design

  ©Blogspot Design By Pensil Warna Design.

TOPO