webdesign dasar : 07 background

Background
Background, 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:
background:
background:
background:
background:
}

#F00;
rgb(255, 0, 0);
rgba(255, 0, 0, 1);
hsl(0, 50, 100);
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, norepeat, 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-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-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>
#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>
#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

webdesign dasar : 07 background

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a webdesign dasar : 07 background

Semelhante a webdesign dasar : 07 background (20)

Mais de SMK Negeri 6 Malang

Mais de SMK Negeri 6 Malang (20)

Último

Último (20)

webdesign dasar : 07 background