Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Menguasai Background Gradients: Linear dan Radial

Gradients memungkinkan Anda menampilkan transisi halus antara dua warna atau lebih. Karena dihasilkan oleh browser, gradient sangat ringan untuk performa website.

1. Linear Gradient

Transisi warna yang bergerak mengikuti garis lurus. Anda bisa mengatur arahnya menggunakan kata kunci (to right, to bottom left) atau menggunakan derajat (45deg).

• Sintaks Dasar:

  CSS

  background: linear-gradient(arah, warna1, warna2);
  

• Contoh Arah:

  • to right: Dari kiri ke kanan.

  • 180deg: Sama dengan to bottom (dari atas ke bawah).

  • 90deg: Sama dengan to right.

2. Radial Gradient

Transisi warna yang memancar keluar dari satu titik pusat (berbentuk lingkaran atau elips).

• Sintaks Dasar:

  CSS

  background: radial-gradient(bentuk at posisi, warna1, warna2);
  

• Bentuk: circle (lingkaran sempurna) atau ellipse (default).

• Posisi: center, top, bottom left, atau koordinat spesifik.

3. Color Stops (Titik Pemberhentian Warna)

Anda tidak hanya terbatas pada dua warna. Anda bisa menambah banyak warna dan mengatur di mana warna tersebut mulai berubah menggunakan persentase atau pixel.

Co ntoh 3 Warna:

background: linear-gradient(to right, red 0%, yellow 50%, green 100%);

Tutorial: Membuat Tombol dan Background Modern

Mari kita terapkan kedua jenis gradient ini untuk elemen UI.

Struktur HTML

<div class="hero-bg"> <button class="btn-gradient">Mulai Belajarbutton>
div>

< !---->

Kode CSS

/* Background Halaman dengan Radial Gradient */
.hero-bg { height: 300px; display: flex; align-items: center; justify-cont ent: center; /* Membuat efek pencahayaan dari tengah atas */ background: radial-gradient(circle at top, #3498db, #2c3e50);
} /* Tombol dengan Linear Gradient */
.btn-gradient { padding: 15 px 30px; border: none; border-radius: 50px; color: white; font-weight: bold; cursor: pointer; /* Gradient biru ke ungu secara diagonal */ background: linear-gradient(135deg, #6e8efb, #a777e3); /* Memberikan bayangan agar terlihat timbul */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease;
} .btn-gradient:hover { /* Efek sedikit membesar saat di-hover */ transform: scale(1.05); /* Membalik arah gradient  saat hover */ background: linear-gradient(135deg, #a777e3, #6e8efb);
}

Tips Pro untuk Developer

1. Gunakan CSS Gradient Generator: Untuk gradient yang kompleks (seperti efek kaca atau mesh gradient), gunakan tool online seperti cssgradient.io untuk memvisualisasikan hasilnya sebelum menyalin kodenya.

2. Aksesibilitas: Pastikan teks di atas background gradient memiliki kontras yang cukup. Jika gradient Anda berpindah dari warna terang ke gelap, pilih warna teks yang paling aman (biasanya putih atau hitam pekat).

3. Fallback Color: Selalu sediakan background-color solid sebelum baris background-image gradient s ebagai cadangan untuk browser sangat lama.

   CSS

   .box { background-color: #6e8efb; /* Fallback */ background: linear-gradient(...);
   }