Gradien

Podcast CSS - 021: Gradien

Bayangkan Anda memiliki situs untuk 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 warna ungu sebagai gradien. Bagaimana Anda melakukannya?

Latar belakang gradien ungu tua ke ungu terang dengan judul, paragraf, dan tautan.

Anda mungkin awalnya berpikir bahwa Anda perlu mengekspor gambar dari {i>tool<i} desain Anda untuk ini, tetapi Anda bisa menggunakan linear-gradient sebagai gantinya.

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

Gradien linier

Dukungan Browser

Sumber

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

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

Anda juga dapat meneruskan sudut pandang atau kata kunci yang mewakili suatu 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 membentang 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 tetangganya. Untuk gradien yang dimulai dengan warna merah gelap yang berjalan pada sudut 45deg, pada 30% ukuran gradien yang berubah menjadi merah terang: tampilannya 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

Dukungan Browser

Sumber

Untuk membuat gradien yang memancarkan secara melingkar, elemen radial-gradient() fungsi untuk membantu. Hal ini mirip dengan linear-gradient(), namun alih-alih menentukan sudut, Anda secara opsional menentukan posisi dan bentuk akhir. Jika Anda hanya menentukan warna, radial-gradient() akan otomatis memilih posisi sebagai center dan pilih lingkaran atau elips, tergantung 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 kotak itu bertemu dengan sudut terjauh kotak dari tengah. Anda juga dapat menggunakan kata kunci berikut:

closest-corner akan memenuhi sudut terdekat dengan bagian tengah gradien.
closest-side akan memenuhi sisi kotak yang paling dekat dengan pusat gradien.
farthest-side akan melakukan kebalikan dari closest-side.

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

Gradien kerucut

Dukungan Browser

Sumber

Gradien kerucut memiliki titik tengah dalam kotak Anda dan dimulai dari atas (secara {i>default<i}), dan diputar dalam lingkaran 360 derajat.

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

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

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

Secara default, posisinya berada di tengah. Seperti halnya gradien radial dan linear, pemosisian 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 merender diagram lingkaran dengan CSS.

Pengulangan dan pencampuran

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

Jika gradien Anda tidak tampak berulang, Anda mungkin belum menetapkan panjang untuk salah satu {i>color stop<i}. Misalnya, Anda dapat membuat latar belakang bergaris dengan repeating-linear-gradient dengan menyetel 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 dengan gambar latar belakang. Misalnya, Anda dapat mencampur beberapa gradien linier bersama-sama, atau dua gradien linier dengan gradien radial.

Resource

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

Menguji pemahaman Anda

Uji pengetahuan Anda tentang gradien

Berapa jumlah minimum warna yang diperlukan untuk membuat gradien?

Coba lagi.

Warnanya bisa sama dan tampak solid, tetapi ya, setidaknya diperlukan 2 warna.

Coba lagi.

Elemen dapat memiliki beberapa gradien sebagai latar belakang?

Benar

Properti background-image memungkinkan banyak gradien, cukup pisahkan dengan koma.

Salah

Oh, tetapi mereka bisa!