CSS Brunang penjelasan Pak Sam Guru SMKN 1 Gending

CSS Brunang cara ini adalah mengumpulkan berbagai gambar pada satu gambar tunggal. halaman web dengan berbagai gambar kecil, meski kecil tapi bayak akan menyebabkan permintaan yang banyak ke server. Jadi menggabungkan nya menjadi satu gambar akan mengurangi permintaan ke server Seperti gambar dibawah :

paksamgif Dari pada ketika memakai tiga gambar berbeda kita jadikan satu saja manjadi satu gambar ("paksam.gif") Dengan CSS kita bisa menampilkannya hanya sebagian saja dari gambar tersebut. Pada contoh berikut contoh CSS yang menspesifikasikan bagian mana dari "paksam.gif" yang perlu di tampilkan :

#home {
    width: 46px;
    height: 44px;
    background: url(paksam.gif) 0 0;
}

Penjelasan :

  • <img iimg id="home" src="/gambardotgif> mendefiniskan gambar transparan yang sangat kecil karena src atribut tidak boleh kosong
  • width: 46px; height: 44px; - Mendefinisikan bagian gambar yang hendak kita pakai.
  • background: url(paksam.gif) 0 0; - Mendefinisan back ground gambar dan posisi (left 0px, top 0px)

Membuat daftar Navigasi :

Jika kita hendak menggunakan "paksam.gif" untuk membuat list navigasi, kita akan memakai HTML list karena bisa menjadi link dan juga men suport gambar back ground Contoh :

#navlist {
    position: relative;
}

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

#navlist li, #navlist a {
    height: 44px;
    display: block;
}

#home {
    left: 0px;
    width: 46px;
    background: url('paksam.gif') 0 0;
}

#prev {
    left: 63px;
    width: 43px;
    background: url('paksam.gif') -47px 0;
}

#next {
    left: 129px;
    width: 43px;
    background: url('paksam.gif') -91px 0;
}

 

Nilai butir ini
(0 pemilihan)

Berikan komentar

Pastikan anda memasukkan semua informasi wajib, yang bertanda bintang (*). Kode HTML tidak diizinkan.

kembali ke atas