CSS #4: Warna & Latar Belakang

Desain web tidak hanya tentang tata letak dan tipografi. Warna dan latar belakang juga memainkan peran penting dalam menarik perhatian dan memberikan pengalaman visual yang menyenangkan. Dalam artikel ini, kita akan membahas skema warna dan properti latar belakang yang sering digunakan dalam CSS.

Skema Warna

Dalam CSS, ada beberapa cara untuk mendefinisikan warna: menggunakan kode hex, RGB, RGBA, dan HSL. Mari kita lihat masing-masing metode ini.

Warna Hex

Warna hex adalah cara populer untuk menentukan warna di web. Kode hex terdiri dari tanda "#" diikuti oleh enam digit angka atau huruf, yang masing-masing pasangan digit mewakili nilai merah, hijau, dan biru (red, green, blue).

Contoh:

color: #ff5733; /* Warna oranye cerah */

Dalam contoh ini, #ff5733 mewakili warna oranye cerah. ff adalah nilai merah, 57 adalah nilai hijau, dan 33 adalah nilai biru.

Warna RGB

RGB (Red, Green, Blue) adalah model warna yang menggunakan nilai numerik untuk menentukan warna. Setiap nilai berkisar dari 0 hingga 255.

Contoh:

color: rgb(255, 87, 51); /* Warna oranye cerah */

Di sini, rgb(255, 87, 51) adalah cara lain untuk mendefinisikan warna oranye cerah.

Warna RGBA

RGBA adalah perpanjangan dari RGB dengan tambahan saluran alpha untuk menentukan opasitas (transparansi). Nilai alpha berkisar dari 0 (sepenuhnya transparan) hingga 1 (sepenuhnya tidak transparan).

Contoh:

color: rgba(255, 87, 51, 0.8); /* Warna oranye cerah dengan 80% opasitas */

Dalam contoh ini, rgba(255, 87, 51, 0.8) menunjukkan warna oranye cerah dengan opasitas 80%.

Warna HSL

HSL (Hue, Saturation, Lightness) adalah cara lain untuk mendefinisikan warna dengan lebih intuitif. Hue (warna) adalah derajat dari 0 hingga 360, saturasi dan kecerahan adalah persentase dari 0% hingga 100%.

Contoh:

color: hsl(14, 100%, 60%); /* Warna oranye cerah */

Di sini, hsl(14, 100%, 60%) juga mewakili warna oranye cerah.

Properti Background

Properti latar belakang dalam CSS memungkinkan Anda untuk mengontrol aspek visual dari latar belakang elemen. Berikut adalah beberapa properti latar belakang yang umum digunakan:

Background-color

background-color digunakan untuk mengatur warna latar belakang elemen.

Contoh:

background-color: #ff5733; /* Warna oranye cerah */

Properti ini mengatur latar belakang elemen dengan warna oranye cerah.

Background-image

background-image digunakan untuk mengatur gambar sebagai latar belakang elemen.

Contoh:

background-image: url('path/to/image.jpg'); /* Mengatur gambar sebagai latar belakang */

Dalam contoh ini, elemen akan memiliki gambar yang ditentukan sebagai latar belakang.

Background-position

background-position mengatur posisi gambar latar belakang dalam elemen.

Contoh:

background-position: center center; /* Posisi gambar di tengah */

Ini memastikan gambar latar belakang berada di tengah elemen.

Background-repeat

background-repeat mengontrol apakah gambar latar belakang diulang (tile) dan bagaimana cara pengulangannya.

Contoh:

background-repeat: no-repeat; /* Gambar tidak diulang */

Dalam contoh ini, gambar latar belakang tidak akan diulang.

Menggunakan kombinasi dari berbagai properti ini memungkinkan Anda untuk menciptakan desain yang menarik dan responsif yang berfungsi dengan baik di berbagai perangkat.

Sumber: