CSS TINGKAT LANJUT DENGAN CSS3
4.3 BACKGROUND CSS3
CSS3 menyediakan dua properti baru: background-clip dan background-origin. Di antara mereka, kita dapat menentukan di mana latar belakang harus dimulai dalam sebuah elemen, dan cara memotong latar belakang sehingga tidak muncul di bagian model kotak yang tidak kita inginkan. Untuk mencapai ini, kedua properti mendukung nilai-nilai berikut: border- box Mengacu ke tepi luar dari border padding-box Mengacu ke tepi luar dari kotak isi area padding Mengacu pada tepi luar dari area konten.
Properti Background-clip
Properti background-clip menentukan apakah latar belakang harus diabaikan (terpotong) jika muncul di dalam batas atau area padding elemen. Misalnya, deklarasi berikut menyatakan bahwa latar belakang dapat ditampilkan di semua bagian elemen, sampai ke tepi luar batas:
background-clip:border-box;
Agar latar belakang tidak muncul di dalam area batas elemen, kita dapat membatasinya hanya pada bagian elemen di dalam tepi luar area paddingnya, seperti ini:
background-clip:padding-box;
Atau untuk membatasi latar belakang agar hanya ditampilkan di dalam area konten suatu elemen, kita akan menggunakan deklarasi ini:
background-clip:content-box;
Gambar 4.1 menunjukkan tiga baris elemen yang ditampilkan di browser web Safari, di mana baris pertama menggunakan kotak batas untuk properti klip latar, baris kedua menggunakan kotak pengisi, dan baris ketiga menggunakan kotak konten. Di baris pertama, kotak dalam (file gambar yang telah dimuat ke kiri atas elemen, dengan pengulangan dinonaktifkan) diizinkan untuk ditampilkan di mana saja di elemen. kita juga dapat melihatnya dengan jelas ditampilkan di area border kotak pertama karena border telah disetel ke titik-titik.
Pada baris kedua, baik gambar latar belakang maupun bayangan latar belakang tidak ditampilkan di area border, karena mereka telah dijepitkan ke area padding dengan nilai properti background-clip dari padding-box. Kemudian, di baris ketiga, bayangan latar belakang dan gambar telah dipotong untuk ditampilkan hanya di dalam area konten dalam setiap elemen (ditampilkan di dalam kotak putus-putus berwarna terang), menggunakan properti klip latar belakang kotak konten.
Gambar 4-1 Berbagai cara menggabungkan properti latar belakang CSS3 Properti Background-origin
Dengan properti background-origin, kita dapat mengontrol lokasi gambar latar belakang dengan menentukan di mana kiri atas gambar harus dimulai. Misalnya, deklarasi berikut menyatakan bahwa asal gambar latar belakang harus berada di sudut kiri atas tepi luar batas:
background-origin:border-box;
Untuk mengatur asal gambar ke pojok kiri atas area padding, kita akan menggunakan deklarasi ini:
background-origin:padding-box;
Atau untuk menyetel asal gambar ke sudut kiri atas bagian konten dalam elemen, kita akan menggunakan deklarasi ini:
background-origin:content-box;
Melihat lagi pada Gambar 20-1, kita dapat melihat di setiap baris kotak pertama menggunakan properti background-origin dari border-box, yang kedua menggunakan padding-box, dan yang ketiga menggunakan content-box. Akibatnya, di setiap baris kotak dalam yang lebih kecil ditampilkan di kiri atas border di kotak pertama, kiri atas padding di kotak kedua, dan kiri atas konten di kotak ketiga.
Properti ukuran latar belakang
Dengan cara yang sama seperti kita dapat menentukan lebar dan tinggi gambar saat digunakan dalam tag <img>, kini kita juga dapat melakukannya untuk gambar latar di versi terbaru semua browser. kita menerapkan properti sebagai berikut (di mana ww adalah lebar dan hh adalah tinggi):
background-size:wwpx hhpx;
Jika mau, kita hanya dapat menggunakan satu argumen, lalu kedua dimensi akan disetel ke nilai tersebut. Juga, jika kita menerapkan properti ini ke elemen level blok seperti <div> (bukan yang sebaris seperti <span>), kita dapat menentukan lebar dan/atau tinggi sebagai persentase, alih-alih a nilai tetap. Jika kita ingin menskalakan hanya satu dimensi dari gambar latar belakang, dan kemudian membuat yang lain menskalakan secara otomatis untuk mempertahankan proporsi yang sama, kita dapat menggunakan nilai otomatis untuk dimensi lain, seperti ini:
background-size:100px auto;
Ini menetapkan lebar ke 100 piksel, dan tinggi ke nilai yang sebanding dengan penambahan atau pengurangan lebar.
Beberapa Latar Belakang
Dengan CSS3 kita sekarang dapat melampirkan beberapa latar belakang ke sebuah elemen, yang masing-masing dapat menggunakan properti latar belakang CSS3 yang telah dibahas sebelumnya. Gambar 20-2 menunjukkan contohnya; delapan gambar berbeda telah ditetapkan ke latar belakang, untuk membuat empat sudut dan empat tepi batas sertifikat.
Gambar 4.2 Latar belakang dibuat dengan banyak gambar
Untuk menampilkan beberapa gambar latar belakang dalam satu deklarasi CSS, pisahkan dengan koma. Contoh 1 menunjukkan HTML dan CSS yang digunakan untuk membuat latar belakang pada Gambar 4.2.
Contoh 1 Menggunakan banyak gambar di latar belakang
<!DOCTYPE html>
<html> <!-- backgroundimages.html -->
<head>
<title>CSS3 Multiple Backgrounds Example</title>
<style>
.border {
font-family:'Times New Roman';
font-style :italic;
font-size :170%;
text-align :center;
padding :60px;
width :350px;
height :500px;
background :url('b1.gif') top left no-repeat, url('b2.gif') top right no-repeat,
url('b3.gif') bottom left no-repeat, url('b4.gif') bottom right no-repeat, url('ba.gif') top repeat-x,
url('bb.gif') left repeaty, url('bc.gif') right repeaty, url('bd.gif') bottom repeat-x }
</style>
</head>
<body>
<div class='border'>
<h1>Employee of the month</h1>
<h2>Awarded To:</h2>
<h3>__________________</h3>
<h2>Date:</h2>
<h3>___/___/_____</h3>
</div>
</body>
</html>
Melihat bagian CSS, kita melihat bahwa empat baris pertama dari deklarasi latar belakang menempatkan gambar sudut ke dalam empat sudut elemen, dan empat terakhir menempatkan gambar tepi, yang ditangani terakhir karena urutan prioritas untuk gambar latar pergi dari tinggi ke rendah. Dengan kata lain, di mana mereka tumpang tindih, gambar latar belakang tambahan akan muncul di belakang gambar yang sudah ditempatkan. Jika GIF berada dalam urutan terbalik, gambar tepi berulang akan ditampilkan di atas sudut, yang akan salah.