Embed Size (px)
Citation preview
BackgroundBackground, atau yang dikenal dengan latar belakang, merupakan salah satu komponen desain yang cukup penting. Background terutama digunakan untuk memberikan dekorasi visual terhadap sebuah elemen, yang akan mengakibatkan peningkatan kemudahan nalar atau pengertian akan sebuah konten. Background memiliki pengaruh yang sangat besar terhadap keseluruhan desain dari sebuah website karena hal ini.
Penambahan latar belakang ke sebuah elemen dapat dilakukan dengan banyak cara, mulai dari penambahan warna (yang telah dilakukan berkali-kali pada bab sebelumnya), penambahan gambar, ataupun penggabungan dari keduanya. CSS memberikan kita kemampuan penuh untuk mengatur bagaimana penampilan dari latar belakang sebuah elemen, sehingga kita dapat dengan mudah meningkatkan keindahan visual dari elemen tersebut.
Untuk lebih jelasnya, kita mari kita lihat langsung properti CSS yang berhubungan dengan hal ini!
Warna Latar Belakang
Salah satu cara termudah untuk memberikan latar belakang terhadap sebuah elemen ialah dengan memberikan warna pada latar belakang elemen tersebut. Penambahan warna ini dilakukan dengan menggunakan properti background atau background-color. Kedua properti ini dapat digunakan secara bebas, meskipun properti background dapat digunakan juga untuk memberikan gambar (yang akan dibahas pada bagian selanjutnya). Pemilihan properti yang digunakan sendiri tidak memiliki batasan, selain preferensi dari pengguna.
div { background: #F00; background-color: #F00; /* efek yang sama */}
Sama seperti Warna Teks, pengisian nilai dari properti ini dapat menggunakan beberapa cara, yaitu kode heksa, rgb, rgba, hsl, maupun hsla.
div { background: #F00; background: rgb(255, 0, 0); background: rgba(255, 0, 0, 1); background: hsl(0, 50, 100); background: hsla(0, 50, 100, 1);}
Tentunya pemilihan nilai yang diisikan juga hanya dibatasi oleh preferensi pengguna.
Gambar Latar Belakang
Seperti penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan menggunakan dua properti, yaitu background dan background-image. Nilai yang diisikan untuk properti ini ialah url dari gambar, relatif terhadap file CSS, sama seperti pada penambahan font.
div { background: url('latar.png'); background-image: url('latar.png');}
Sayangnya, penambahan gambar dengan cara di atas akan memberikan masalah ketika ukuran gambar tidak sama dengan ukuran elemen. Gambar akan ditampilkan berulangkali, secara horizontal maupun vertikal, jika ukuran elemen lebih besar dari ukuran gambar.
Untuk dapat melihat bagaimana kesalahan tersebut bekerja, simpan dan jalankan kode berikut, dan lihat hasilnya:
<!DOCTYPE html><html> <head> <title>Background Image Goes Wrong</title> <style type="text/css"> #main { background-image: url('twitter-logo.png'); height: 600px; width: 800px; } </style> </head>
<body> <div id="main"> </div> </body></html>
Gambar yang digunakan ialah gambar berikut:
Logo Twitter Berukuran 80x80 px
Hasil dari eksekusi kode di atas ialah sebagai berikut:
Penampilan Gambar Latar Berulang pada Kedua Buah Sumbu
Perhatikan bagaimana logo twitter ditampilkan berulangkali, secara vertikal maupun horizontal. Hal ini disebabkan oleh ukuran dari logo twitter yang hanya 80 x 80 px, sementara ukuran dari elemen div#main adalah 800 x 600 px.
Perulangan Gambar Latar
Meskipun terkadang hasil seperti ini memang diinginkan, seringkali hasil perulangan otomatis ini tidak diinginkan. Kita dapat menggunakan properti background-repeat untuk mengatur bagaimana perulangan kode ingin dilakukan.
Terdapat empat nilai yang dapat diisikan pada properti background-repeat, yaitu repeat, no-repeat, repeat-x, dan repeat-y. Seperti namanya, no-repeat menghilangkan perulangan, repeat-x memberikan perulangan hanya pada sumbu x (horizontal), dan repeat-y memberikan perulangan hanya pada sumbu y (vertikal). Tentunya, seperti yang dapat dideduksi dari kode sebelumnya, repeat merupakan nilai standar, yang memberikan perulangan pada sumbu x dan sumbu y.
Kode CSS di bawah akan menghilangkan perulangan pada sumbu x dan sumbu y, sehingga logo twitter hanya akan ditampilkan satu kali:
#main { background-image: url('twitter-logo.png'); background-repeat: no-repeat; height: 600px; width: 800px;}
Posisi Gambar Latar
Selain memberikan kontrol terhadap perulangan gambar latar, CSS juga memberikan kontrol terhadap posisi dari gambar latar itu sendiri. Hal ini tentunya sangat berguna, terutama untuk mengatur posisi pasti dari gambar latar pada elemen yang sangat besar, seperti penampung dari seluruh elemen dalam halaman.
Posisi gambar latar dapat diatur menggunakan properti background-position, yang menerima dua nilai: koordinat sumbu x dan sumbu y tempat kita ingin meletakkan gambar latar. Koordinat yang diisikan menggunakan sistem koordinat kartesius terbalik, di mana titik 0, 0 berada pada kiri atas elemen.
Koordinat Gambar Latar
Pengisian koordinat sendiri dapat dilakukan dengan dua cara, yaitu nilai pixel atau persentasi. Berikut adalah contoh pengunaan background-position untuk menampilkan logo twitter pada posisi yang berbeda:
#main { background-image: url('twitter-logo.png'); background-position: 50px 50px; background-repeat: no-repeat; border: 1px solid black; height: 600px; width: 800px;}
yang akan memberikan hasil:
Contoh Pengunaan Properti background-position
Penulisan Singkat Properti Background
Seperti banyak properti-properti lainnya, properti background juga dapat ditulis secara singkat, dengan sintaks:
background: color image position repeat;
Untuk melihat bagaimana penulisan singkat di atas digunakan, kita akan membuat sebuah panel notifikasi, seperti berikut:
Panel Notifikasi, Menggunakan Properti Background
Kode yang digunakan ialah sebagai berikut:
<!DOCTYPE html><html> <head> <title>Notification Panel, Using Background</title> <style type="text/css"> #notification { background: rgba(175, 0, 0, 0.2) url('danger-logo.png') 5px 12px no-repeat; border: 1px solid rgba(175, 0, 0, 0.7); border-radius: 5px;
color: #F00; padding: 10px 10px 10px 25px; } </style> </head>
<body> <div id="notification"> Do Not Touch. 10.000 v! </div> </body></html>
Penggabungan Gambar Latar
Salah satu fitur CSS yang sangat memudahkan kita dalam membuat desain yang baik ialah kemudahan yang disediakan untuk memberikan beberapa gambar latar belakang pada sebuah elemen. Cara pemberian juga sederhana, dengan hanya menambahkan daftar latar belakang yang ingin digunakan, dipisahkan dengan tanda ,.
Berikut adalah contoh pengunaan beberapa latar belakang pada sebuah elemen:
<!DOCTYPE html><html> <head> <title>Multiple Background</title> <style type="text/css"> #main { background: url('grass.png') 0 100% no-repeat, url('man.png') 95% 100% no-repeat, url('sky.jpg') 0 0 no-repeat; height: 450px; width: 600px; } </style> </head>
<body> <div id="main"> </div> </body></html>
Hasil eksekusinya adalah sebagai berikut:
Pengunaan Banyak Gambar Latar pada CSS
Perhatikan juga bahwa perubahan urutan gambar yang digunakan pada kode CSS akan mempengaruhi hasil akhir dari gambar. Silahkan coba mengganti urutan-urutan yang ada, untuk melihat bagaimana gambar-gambar tersebut saling berinteraksi!
Gradien
Gradien merupakan teknik pengisian warna yang mengisikan warna bergantung kepada posisi dari elemen. Warna-warna yang dihasilkan oleh gradien berubah-ubah sesuai dengan posisi warna dalam elemen, sehingga gradien dapat menghasilkan transisi warna yang halus.
Contoh Gradien
Gradien digunakan dalam desain terutama untuk menghilangkan impresi warna yang terlalu besar, ataupun untuk memberikan efek transisi kepada pengguna. Terdapat dua jenis gradien utama, yaitu “Linear Gradient” dan “Radial Gradient”.
Kiri: Linear Gradient, Kanan: Radial Gradient
Pembuatan kedua jenis gradien ini sendiri sangat sederhana, hanya menggunakan sintaks pembuatan masing-masing gradien yang cukup jelas. Misalnya, untuk membuat linear gradient, kita dapat menggunakan sintaks sebagai berikut:
background: linear-gradient(#F00, #F80);
dengan hasil eksekusi sebagai berikut:
Linear Gradient Menggunakan CSS
dan kita juga dapat menambahkan arah gradien dengan menambahkan nilai arah yang diinginkan pada parameter pertama fungsi (pada kode di atas gradien bergerak dari atas ke bawah, seperti yang dapat dilihat pada gambar Linear Gradient Menggunakan CSS).
background: linear-gradient(to right, #F00, #F80);
dengan hasil:
Linear Gradient ke Kanan Menggunakan CSS
adapun nilai-nilai yang dapat diisikan pada parameter pertama ialah nilai arah dan gabungannya, seperti: right, left, top, bottom, maupun top right, bottom left, dan seterusnya. Kita juga dapat mengisikan nilai derajat lingkaran pada parameter pertama, seperti berikut:
background: linear-gradient(200deg, #F00, #F80);
dengan hasil:
Linear Gradient 200 Derajat Menggunakan CSS
Pembuatan radial gradient sendiri menggunakan sintaks yang sama, dengan nama fungsi berbeda: linear-gradient diubah menjadi radial-gradient.
background: radial-gradient(#F00, #FFF);
Radial Gradient Menggunakan CSS
