Tampilan visual pada website adalah elemen penting untuk menarik perhatian pengunjung. Penggunaan warna dan background merupakan salah satu aspek terpenting dalam desain website. Dengan CSS kita bisa mengatur warna teks, background elements, dan bahkan menciptakan efek gradasi yang indah. Pada artikel ini, kita akan membahas secara lengkap tentang cara mengatur warna dan background dalam CSS mulai dari penggunaan nama warna hingga membuat efek gradasi pada background.

Properti Warna dalam CSS

Sebelum itu, kita perlu mengenal terlebih dahulu properti untuk mengatur warna dalam CSS itu apa saja.

1. color Mengatur warna pada teks
2. background-color Mengatur warna latar belakang pada elemen. Masing-masing contoh penggunaannya sebagai berikut.

p {
 color: red;
 background-color: gray;
}

Menentukan Warna dalam CSS

Ada beberapa cara untuk menentukan warna dalam CSS yaitu sebagai berikut.

• Nama Warna

Menentukan warna dalam CSS menggunakan nama warna itu sendiri adalah hal yang umum. CSS juga mendukung kurang lebih 140 warna standar.

p {
 color: crimson;
}

• Kode Hexadecimal (HEX Code)

Format ini menggunakan angka dan huruf setelah tanda #.

div {
 background-color: #0f0f0f;
}

• RGB (Red, Green, Blue)

Format ini menentukan warna dengan kombinasi nilai merah, hijau, dan biru.

div {
 background-color: rgb(255, 0, 0);
}

• RGBA (Red, Green, Blue, Alpha)

Sama seperti RGB, tetapi dengan tambahan Alpha untuk melakukan transparasi (opacity). Nilai miminum dari alpha adalah 0, dan nilai maksimum adalah 1.

div {
 background-color: rgba(0, 0, 0, 0.5);
}

Background Gradient dalam CSS

Kita bisa membuat gradasi warna pada CSS untuk menciptakan efek transisi warna yang halus. Kita akan menggunakan linear-gradient dan radial-gradient sebagai contohnya.

1. Linear Gradient

Gradasi dari atas ke bawah, kiri ke kanan, atau arah lainnya.

div {
 background-color: linear-gradient(to right, #00c6ff, #0072ff);
}

Penjelasan dari kode diatas sebagai berikut:

• linear-gradient adalah fungsi yang digunakan untuk membuat gradasi warna linear.
• to right menentukan arah gradasi. bisa juga dengan to bottom, to left, atau to top right.
• #00c6ff warna awal gradasi.
• #0072ff warna akhir gradasi.

2. Radial Gradient

Jenis gradasi dalam CSS yang membuat transisi warna memancar dari titik tengah ke arah luar membentuk lingkaran atau elips.

section {
  background: radial-gradient(circle, #ffcc70, #ff5757);
}

Penjelasan dari kode diatas sebagai berikut:

• radial-gradient fungsi untuk menciptakan gradasi radial.
• circle menentukan bentuk gradasi. alternatif lain kita bisa menggunakan seperti ellipse, closest-side, atau farthest-corner.
• #ffcc70 warna awal gradasi.
• #0072ff warna akhir gradasi.

Tips Penggunaan Warna dan Background yang Baik

1. Batasi jumlah warna utama maksimal 3-4 warna untuk menjaga tampilan tetap konsisten.
2. Sesuaikan warna dengan tema website agar menciptakan kesan profesional.
3. Gunakan warna-warna netral seperti abu-abu atau hitam untuk teks kecil.
4. jangan terlalu berlebihan dalam penggunaan efek gradasi.
5. Konsisten dalam penggunakan action color untuk tombol, link atau elemen interaktif agar pengguna mudah mengenali fungsinya.

Kesimpulan

Menguasai warna dan background dalam CSS merupakan langkah yang penting untuk menciptakan tampilan website yang menarik dan profesional. Dengan memahami materi ini, kita bisa membuat desain yang interaktif, responsif, dan estetis tanpa harus menggunakan gambar atau tambahan plugin.

Terimakasih, sampai jumpa di artikel selanjutnya.