Gradien

Podcast CSS - 021: Gradien

Bayangkan Anda memiliki situs untuk dibuat dan di bagian atasnya ada pengantar dengan judul, ringkasan, dan tombol. Desainer telah menyerahkan desain yang memiliki latar belakang ungu untuk pengantar ini. Satu-satunya masalah adalah latar belakang menampilkan dua bayangan ungu sebagai gradien. Bagaimana Anda melakukannya?

Anda mungkin awalnya berpikir bahwa Anda perlu mengekspor gambar dari alat desain untuk hal ini, tetapi Anda dapat menggunakan linear-gradient sebagai gantinya.

Gradien adalah gambar dan dapat digunakan di mana pun gambar dapat digunakan, tetapi dibuat dengan CSS dan terdiri dari warna, angka, dan sudut. Gradien CSS memungkinkan Anda membuat apa pun, mulai dari gradien halus antara dua warna, hingga karya seni yang mengesankan dengan mencampur dan mengulangi beberapa gradien.

Gradien linier

Fungsi linear-gradient() menghasilkan gambar dua warna atau lebih, secara bertahap. Dibutuhkan beberapa argumen, tetapi dalam konfigurasinya yang paling sederhana, Anda dapat meneruskan beberapa warna seperti ini dan warna tersebut akan otomatis membaginya secara merata, sekaligus mencampurnya.

.my-element {
    background: linear-gradient(black, white);
}

Anda juga dapat meneruskan sudut atau kata kunci yang mewakili sudut. Jika Anda memilih untuk menggunakan kata kunci, tentukan arah setelah kata kunci to. Ini berarti, jika Anda menginginkan gradien yang hitam dan putih, yang berjalan dari kiri (hitam) ke kanan (putih), Anda harus menentukan sudut sebagai to right sebagai argumen pertama.

.my-element {
    background: linear-gradient(to right, black, white);
}

Nilai perhentian warna yang ditentukan di mana warna berhenti dan bercampur dengan warna tetangganya. Untuk gradien yang dimulai dengan warna merah gelap yang berjalan pada sudut 45 derajat, pada 30% ukuran gradien yang berubah menjadi merah yang lebih terang: terlihat seperti ini.

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

Anda dapat menambahkan warna dan perhentian warna sebanyak yang Anda inginkan di linear-gradient(), dan Anda dapat melapisi gradien di atas satu sama lain dengan memisahkan setiap gradien dengan koma.

Gradien radial

Untuk membuat gradien yang memancar secara melingkar, fungsi radial-gradient() akan membantu. Hal ini mirip dengan linear-gradient(), tetapi alih-alih menentukan sudut, Anda dapat menetapkan posisi dan bentuk akhir secara opsional. Jika Anda hanya menentukan warna, radial-gradient() akan otomatis memilih posisi sebagai center dan memilih lingkaran atau elips, bergantung pada ukuran kotak.

.my-element {
    background: radial-gradient(white, black);
}

Posisi gradien mirip dengan background-position yang menggunakan kata kunci dan/atau nilai angka. Ukuran gradien radial menentukan ukuran bentuk akhir gradien (lingkaran atau elips) dan secara default adalah farthest-corner, yang berarti sama persis dengan sudut terjauh kotak dari pusat. Anda juga dapat menggunakan kata kunci berikut:

• closest-corner akan bertemu sudut terdekat dengan pusat gradien.
• closest-side akan bertemu dengan sisi kotak yang paling dekat dengan pusat gradien.
• farthest-side akan melakukan hal yang sebaliknya terhadap closest-side.

Anda dapat menambahkan perhentian warna sebanyak yang Anda inginkan, seperti dengan linear-gradient. Demikian juga, Anda juga dapat menambahkan radial-gradients sebanyak yang Anda inginkan.

Gradien kerucut

Gradien kerucut memiliki titik tengah di kotak dan dimulai dari atas (secara default), dan berputar dalam lingkaran 360 derajat.

.my-element {
    background: conic-gradient(white, black);
}

Fungsi conic-gradient() menerima argumen posisi dan sudut.

Secara default, sudutnya adalah 0 derajat yang dimulai dari bagian atas, di tengah. Jika Anda menetapkan sudut ke 45deg, sudut tersebut akan menjadi sudut kanan atas. Argumen sudut menerima semua jenis nilai sudut, seperti gradien linear dan radial.

Posisinya berada di tengah secara default. Seperti halnya gradien radial dan linear, pemosisian dapat dilakukan berdasarkan kata kunci, atau dapat ditentukan dengan nilai numerik.

Anda dapat menambahkan perhentian warna sebanyak yang Anda inginkan, seperti dengan jenis gradien lainnya. Kasus penggunaan yang baik untuk kemampuan ini, dengan gradien kerucut, adalah merender diagram lingkaran dengan CSS.

Pengulangan dan pencampuran

Setiap jenis gradien juga memiliki jenis berulang. Keduanya adalah repeating-linear-gradient(), repeating-radial-gradient(), dan repeating-conic-gradient(). Fungsi ini mirip dengan fungsi yang tidak berulang dan mengambil argumen yang sama. Perbedaannya adalah jika gradien yang ditentukan dapat diulang untuk mengisi kotak, berdasarkan kedua ukurannya, gradien akan diulang.

Jika gradien Anda tidak tampak berulang, Anda mungkin belum menetapkan panjang untuk salah satu perhentian warna. Misalnya, Anda dapat membuat latar belakang bergaris menggunakan repeating-linear-gradient dengan menetapkan panjang perhentian warna.

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

Anda juga dapat menggabungkan fungsi gradien pada properti background, serta menentukan gradien sebanyak yang Anda inginkan, seperti yang Anda lakukan pada gambar latar. Misalnya, Anda dapat menggabungkan beberapa gradien linear bersama-sama, atau dua gradien linear dengan gradien radial.

Referensi

• Conic.css - kumpulan gradien kerucut yang berguna
• Panduan MDN untuk gradien
• Generator gradien

Menguji pemahaman Anda

Uji pengetahuan Anda tentang gradien