Gradien

The CSS Podcast - 021: Gradients

Bayangkan Anda memiliki situs yang akan dibuat dan di bagian atas, 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 nuansa ungu sebagai gradien. Bagaimana cara melakukannya?

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

Gradien adalah gambar dan dapat digunakan di mana saja 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() akan menghasilkan gambar dari dua warna atau lebih, secara progresif. Fungsi ini memerlukan beberapa argumen, tetapi dalam konfigurasi yang paling sederhana, Anda dapat meneruskan beberapa warna seperti ini dan fungsi ini akan otomatis membaginya secara merata, sekaligus menggabungkannya.

.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. Artinya, jika Anda menginginkan gradien hitam dan putih, yang berjalan dari kiri (hitam) ke kanan (putih), Anda akan menentukan sudut sebagai to right sebagai argumen pertama.

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

Nilai perhentian warna yang ditentukan tempat 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 berubah menjadi merah yang lebih terang: tampilannya seperti ini.

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

Anda dapat menambahkan warna dan perhentian warna sebanyak yang diinginkan dalam linear-gradient(), dan Anda dapat menempatkan 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. Ini mirip dengan linear-gradient(), tetapi Anda dapat menentukan posisi dan bentuk akhir secara opsional, bukan menentukan sudut. 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 akan menjadi farthest-corner, yang berarti ukurannya sama persis dengan sudut terjauh kotak dari pusat. Anda juga dapat menggunakan kata kunci berikut:

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

Anda dapat menambahkan perhentian warna sebanyak yang diinginkan, seperti halnya linear-gradient. Demikian pula, Anda dapat menambahkan radial-gradients sebanyak yang Anda inginkan.

Gradien konik

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 atas, di tengah. Jika Anda menetapkan sudut menjadi 45deg, sudut tersebut akan menjadi pojok kanan atas. Argumen sudut menerima semua jenis nilai sudut, seperti gradien linear dan radial.

Posisinya berada di tengah secara default. Seperti gradien radial dan linear, posisi dapat berbasis 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.

Mengulang dan mencampur

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

Jika gradasi Anda tidak terlihat berulang, Anda mungkin belum menetapkan panjang untuk salah satu perhentian warna. Misalnya, Anda dapat membuat latar belakang bergaris dengan 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 mencampur fungsi gradien pada properti background, serta menentukan gradien sebanyak yang Anda inginkan, seperti yang Anda lakukan dengan gambar latar. Misalnya, Anda dapat menggabungkan beberapa linear-gradient, atau dua linear-gradient dengan gradien radial.

Resource

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

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang gradien