Images Sprites
Dalam CSS, kita mengenal yang namanya Images Sprites, sebenarnya apa itu Images Sprites tersebut?
Kegunaan dari CSS Images Sprites adalah kumpulan gambar-gambar yang disatukan dalam sebuah gambar, dengan kata lain adalah satu gambar yang memuat banyak gambar di dalamnya.
Sebuah web dengan banyak gambar akan memerlukan waktu lama untuk loading, jika dengan menggunakan images sprites akan mengurangi angka request ke server.
Sekarang kita akan mencontohkan images sprites yang sederhana, misalnya jika kita ingin membuat gambar untuk icon home, left, dan right, maka kita tidak perlu menggunakan tiga foto yang berbeda, kita cukup menggunakan 1 foto yang memuat ketiga icon tersebut seperti foto berikut
Dengan CSS Images Sprites, kita bisa menentukan bagian mana dari foto tersebut yang ingin kita tunjukkan, codingannya adalah sebagai berikut
Maka hasilnya adalah sebagai berikut
angka 0 0 menunjukkan posisi gambar (kiri 0px, atas 0px), ini adalah cara tergampang untuk menggunakan images sprites.
Attribute Selector
Dalam CSS, kita juga mengenal yang namanya attribute selector, kegunaan attribute selector ini adalah untuk memilih elemen dengan attribute tertentu, contoh dibawah adalah untuk memilih elemen <a> sebagai target
hasilnya adalah sebagai berikut
bagian a[target] maksudnya adalah element a yang mempunyai target, itulah mengapa warna background link w3schools.com tidak menjadi warna kuning.
bagian a[target] dapat diubah sesuai dengan elemen dan attribute yang kita inginkan.
No comments:
Post a Comment