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?
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
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
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 dariclosest-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
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?
Elemen dapat memiliki beberapa gradien sebagai latar belakang?