Gradien CSS sudah ada sejak lama sehingga tidak perlu lagi mengerjakan ulang apa itu gradien dan cara menggunakannya. Anda hampir pasti pernah menemukannya di beberapa titik dalam perjalanan perbatasan Anda, dan jika Anda mengikuti saya, Anda juga tahu bahwa saya menggunakannya sepanjang waktu. Saya menggunakannya untuk gaya CSS, dekorasi CSS yang keren, dan bahkan pemuat CSS. Namun meskipun demikian, gradien memiliki sintaks rumit yang bisa menjadi sangat rumit dengan cepat jika Anda tidak memperhatikan.
Pada artikel ini, kami tidak akan membuat hal-hal rumit menggunakan gradien CSS. Sebaliknya, kami menjaga segala sesuatunya tetap sederhana dan akan membahas semua hal menakjubkan yang dapat kami lakukan hanya dengan satu kemajuan.
Hanya satu gradien? Dalam hal ini, membaca dokumen saja sudah cukup, bukan?
Tidak, tidak juga. Ikuti langkah-langkahnya dan Anda akan melihat bahwa gradien itu mudah dalam bentuk yang paling sederhana, namun sangat ampuh jika kita mendorongnya – atau dalam hal ini, hanya satu – hingga batasnya.
gaya CSS
Salah satu hal pertama yang Anda pelajari menggunakan gradien adalah kita dapat membuat pola berulang dengannya. Anda mungkin pernah melihat beberapa contoh pola kotak-kotak di alam liar. Ini adalah sesuatu yang dapat kita capai dengan cepat hanya dengan satu gradien CSS. Dalam hal ini kita dapat mengakses repeating-conic-gradient() pekerjaan:
background:
repeating-conic-gradient(#000 0 25%, #fff 0 50%)
0 / 100px 100px;Versi yang lebih detail tanpa itu background singkatan:
background-image: repeating-conic-gradient(#000 0 25%, #fff 0 50%);
background-size: 100px 100px;Dalam kedua kasus tersebut, hasilnya sama:
Sejauh ini cukup sederhana, bukan? Anda memiliki dua warna yang dapat Anda tukar dengan mudah dengan warna lain background-size Fitur kontrol untuk bentuk persegi.
Jika kita mengubah penghentian warna – di mana satu warna berhenti dan warna lainnya dimulai – kita mendapatkan pola indah lainnya berdasarkan segitiga:
background:
repeating-conic-gradient(#000 0 12.5%, #fff 0 25%)
0 / 100px 100px;Jika Anda membandingkan CSS dengan dua demo yang telah kita lihat sejauh ini, Anda akan melihat bahwa yang dilakukannya hanyalah membagi penghentian warna menjadi dua, 25% ke 12.5% Dan 50% ke 25%.
Satu lagi? Ayo pergi!
Kali ini saya bekerja dengan variabel CSS. Saya suka ini karena variabel membuatnya sangat mudah untuk mengonfigurasi gradien dengan memperbarui beberapa nilai tanpa benar-benar menyentuh sintaksisnya. Penghitungannya kali ini sedikit lebih rumit, karena mengandalkan fungsi trigonometri untuk mendapatkan nilai eksak.
Saya tahu apa yang Anda pikirkan: <>trigonometri? Hal ini tampaknya sulit. Hal ini memang benar, terutama jika Anda baru menggunakan gradien CSS. Cara yang baik untuk memvisualisasikan polanya adalah dengan menonaktifkan pengulangan menggunakan file no-repeat nilai. Ini mengisolasi pola menjadi satu contoh sehingga Anda dapat melihat dengan jelas apa yang berulang. Contoh berikut menyatakan background-image tanpa a background-size Jadi Anda dapat melihat kotak mana yang berulang dan memahami setiap gradien dengan lebih baik:
Saya ingin menghindari tutorial langkah demi langkah untuk setiap contoh yang kami bahas sehingga saya dapat membagikannya <>banyak Lebih banyak contoh tanpa tersesat di tengah rumput liar. Sebagai gantinya, saya akan mengarahkan Anda ke tiga artikel yang dapat Anda baca yang membahas masalah ini dan memungkinkan Anda memilih contoh kami.
- Cara Membuat Background Style Menggunakan CSS dan Cone Gradient (Verpex Blog)
- Pelajari gradien radial CSS dengan membuat gaya latar belakang (freeCodeCamp)
- Pola latar belakang, disederhanakan dengan gradien berbentuk kerucut (Anna Tudor)
Saya juga akan mendorong Anda untuk membuka koleksi pola online saya untuk melihat lebih banyak contoh. Kebanyakan contoh dibuat menggunakan beberapa gradien, namun ada banyak yang hanya menggunakan satu gradien. Tujuan dari artikel ini adalah untuk mempelajari beberapa trik “gradien tunggal” – namun tujuan utamanya adalah untuk dapat menggabungkan sebanyak mungkin gradien untuk menciptakan hal-hal menakjubkan!
Garis kisi
Mari kita mulai dengan contoh berikut:
Anda mungkin mengklaim bahwa ini termasuk dalam “pola” – dan Anda benar! Namun mari kita membuatnya lebih fleksibel dengan menambahkan variabel untuk mengontrol ketebalan dan jumlah sel. Dengan kata lain, mari buat file <>jaringan!
.grid-lines {
--n: 3; /* number of rows */
--m: 5; /* number of columns */
--s: 80px; /* control the size of the grid */
--t: 2px; /* the thickness */
width: calc(var(--m)*var(--s) + var(--t));
height: calc(var(--n)*var(--s) + var(--t));
background:
conic-gradient(from 90deg at var(--t) var(--t), #0000 25%, #000 0)
0 0/var(--s) var(--s);
}Pertama, mari kita isolasi gradiennya untuk lebih memahami redundansi (seperti yang kita lakukan di bagian sebelumnya).
Satu iterasi akan memberi kita garis horizontal dan garis vertikal. Besar kecilnya gradien dikendalikan oleh variabel --sjadi kita tentukan lebar dan tinggi sebagai kelipatan untuk mendapatkan garis sebanyak mungkin guna membuat pola kisi.
Ada apa dengan”
+ var(--t)“Dalam persamaan?
Jaringan akan berakhir seperti ini tanpanya:
Kami kehilangan garis di kanan dan bawah, yang masuk akal mengingat gradien yang kami gunakan. Untuk memperbaikinya, Anda harus menduplikasi gradien lagi, tetapi tidak dalam ukuran penuh. Oleh karena itu, kami menambahkan ketebalan pada persamaan agar memiliki ruang yang cukup untuk pengulangan tambahan dan mendapatkan garis yang hilang.
Bagaimana dengan konfigurasi responsif yang jumlah kolomnya bergantung pada ruang yang tersedia? Kami menghapus --m variabel dan tentukan lebarnya seperti ini:
width: calc(round(down, 100%, var(--s)) + var(--t));Daripada menggandakan sesuatu, kami menggunakan round() Sebuah fungsi untuk memberitahu browser agar membuat elemen menjadi lebar penuh dan membulatkan nilainya menjadi kelipatannya --s. Dengan kata lain, browser ganda akan menemukan kita!
Ubah ukuran berikut ini dan lihat bagaimana perilaku grid:
Di masa depan, kami juga dapat melakukan ini dengan menggunakan calc-size() pekerjaan:
width: calc-size(auto, round(down, size, var(--s)) + var(--t));Menggunakan calc-size() Ini pada dasarnya sama dengan contoh terakhir, tetapi menggunakan 100% Kami mempertimbangkan auto Menjadi nilai penawaran. Masih terlalu dini untuk menerapkan formula seperti itu. Anda dapat menguji hasilnya di Chrome versi terbaru pada saat penulisan ini:
Garis putus-putus
Mari kita coba sesuatu yang berbeda: garis putus-putus vertikal (atau horizontal) dimana kita dapat mengontrol semuanya.
.dashed-lines {
--t: 2px; /* thickness of the lines */
--g: 50px; /* gap between lines */
--s: 12px; /* size of the dashes */
background:
conic-gradient(at var(--t) 50%, #0000 75%, #000 0)
var(--g)/calc(var(--g) + var(--t)) var(--s);
}Bisakah Anda mengetahui cara kerjanya? Ini nomor dengan petunjuknya:
Coba buat sendiri versi horizontalnya. Berikut demo cara saya menangani masalah ini, tetapi cobalah sebelum Anda mengintip.
Bagaimana dengan grid dengan garis putus-putus, apakah mungkin?
Ya, tapi menggunakan dua gradien, bukan satu. Kode diposting di koleksi bentuk CSS saya. Dan ya, perilaku responsif juga ada!
Gradien pelangi
Bagaimana cara membuat gradien berikut di CSS?
Anda bisa memulai dengan memilih sebanyak mungkin nilai warna di sepanjang pelangi, lalu menghubungkannya secara berurutan linear-gradient:
linear-gradient(90deg, red, yellow, green, /* etc. */, red);Ide bagus, tapi itu tidak akan membawa Anda ke sana. Selain itu, Anda harus menyulap dan memanipulasi penghentian warna untuk memperbaikinya.
Ada solusi yang lebih sederhana. Kita bisa mencapainya hanya dengan satu warna!
background: linear-gradient(90deg in hsl longer hue, red 0 0);Saya tahu sintaksnya terlihat aneh jika Anda melihat interpolasi warna baru untuk pertama kalinya.
Jika Anda baru saja mendeklarasikan ini:
background: linear-gradient(90deg, red, red); /* or (90deg, red 0 0) */…browser membuat gradien dari merah ke merah… merah di mana-mana! Saat kita memakai iniin hsl“, kami mengubah ruang warna yang digunakan untuk interpolasi antar warna:
background: linear-gradient(90deg in hsl, red, red);Sekarang, browser akan membuat gradien dari merah ke merah… kali ini menggunakan ruang warna HSL dan bukan ruang warna RGB default. Tidak ada yang berubah secara visual…Anda masih melihat warna merah di mana-mana.
itu longer hue Sedikit itulah yang menarik. Saat kita berada di ruang warna HSL, nilai saluran rona adalah satuan sudut (misalnya, 25deg). Anda dapat melihat ruang warna HSL sebagai lingkaran yang sudutnya menentukan posisi warna di dalam lingkaran tersebut.
Karena berbentuk lingkaran, kita dapat berpindah antara dua titik menggunakan jalur “pendek” atau jalur “panjang”.
Jika kita melihat titik yang sama (red Dalam kasus kita) ini berarti bahwa jalur “pendek” hanya berisi warna merah dan jalur “panjang” mencakup semua warna saat melintasi ruang warna.
Adam Argyle menerbitkan panduan yang sangat rinci tentang warna definisi tinggi di CSS. Saya sarankan membacanya karena Anda akan menemukan semua fitur yang kami bahas (khususnya bagian ini) untuk mendapatkan lebih banyak konteks tentang bagaimana semuanya menyatu.
Kita dapat menggunakan teknik yang sama untuk membuat roda warna menggunakan… conic-gradient:
background: conic-gradient(in hsl longer hue,red 0 0);Dan sementara kita membahas topik warna CSS, saya berbagi trik menyenangkan lainnya yang memungkinkan Anda menentukan rentang nilai warna… ya, di CSS! Ia hanya menggunakan satu gradien juga.
Efek bergulir
Mari kita lakukan latihan lainnya, kali ini menggunakan efek hover. Kita cenderung mengandalkan kecerobohan dan ekstra ketika menyangkut hal-hal seperti menerapkan garis bawah dan overlay saat mengarahkan kursor, dan kita cenderung lupa bahwa gradien sama efektifnya, atau bahkan lebih, untuk menyelesaikan pekerjaan.
Contoh kasusnya. Mari kita gunakan gradien tunggal untuk membentuk garis bawah yang meluncur saat melayang:
h3 {
background:
linear-gradient(#1095c1 0 0) no-repeat
var(--p,0) 100%/var(--p, 0) .1em;
transition: 0.4s, background-position 0s;
}
h3:hover {
--p: 100%;
}Anda mungkin akan menggunakan item tiruan untuk ini, bukan? Saya pikir begitulah cara kebanyakan orang menanganinya. Ini adalah solusi yang bisa diterapkan tetapi menurut saya menggunakan gradien malah menghasilkan CSS yang lebih bersih dan ringkas.
Anda mungkin tertarik dengan artikel lain yang saya tulis untuk Trik CSS di mana saya menggunakan teknik yang sama untuk membuat berbagai macam efek hover yang keren.
bentuk CSS
Membuat bentuk menggunakan gradien adalah hal favorit saya tentang CSS. Saya telah melakukannya selamanya dan sangat menyukainya sehingga saya menerbitkan “Panduan Modern untuk Membuat Bentuk CSS” di Majalah Smashing awal tahun ini. Saya harap Anda memeriksanya tidak hanya untuk mempelajari lebih banyak trik tetapi juga untuk melihat berapa banyak bentuk yang dapat kita buat dengan sejumlah kecil kode – banyak di antaranya hanya didasarkan pada satu gradien CSS.
Beberapa favorit saya mencakup batas melengkung:
…dan sudut “sendok”:
…dan juga kilauannya:
…dan simbol umum seperti tanda plus:
Saya tidak akan menjelaskan secara detail tentang pembuatan bentuk-bentuk ini agar artikel ini tidak panjang dan membosankan. Baca panduannya dan kunjungi koleksi Bentuk CSS saya dan Anda akan memiliki semua yang Anda perlukan untuk membuat elemen ini dan banyak lagi!
Trik gambar perbatasan
Mari kita lakukan satu kali lagi sebelum kita mengakhirinya. Awal tahun ini, saya menemukan betapa menakjubkannya CSS border-image Properti ini didedikasikan untuk menciptakan berbagai jenis dekorasi dan bentuk. Dan coba tebak? border-image Ini membatasi kita untuk hanya menggunakan satu gradien, jadi kita harus mengikuti batasan ini.
Sekali lagi, cukup satu gradien dan kita akan mendapatkan banyak hasil menarik. Saya akan memasukkan favorit saya seperti yang saya lakukan di bagian terakhir. Mulailah dengan hamparan gradien:
Kita dapat menggunakan teknik ini untuk mendapatkan latar belakang dengan lebar penuh:
…dan juga pemisah judul:
…dan bahkan rekamannya:
Semua ini biasanya memerlukan peretasan, angka ajaib, dan solusi lainnya. Sangat menyenangkan melihat CSS modern membuat segalanya lebih mudah. Bacalah artikel saya tentang topik ini untuk menemukan semua hal menarik yang dapat Anda manfaatkan darinya border-image.
membungkus
Saya harap Anda menikmati koleksi trik Single Gradient ini. Kebanyakan orang yang saya kenal cenderung menggunakan gradien untuk membuat gradien. Namun seperti yang telah kita lihat, ini lebih kuat dan dapat digunakan untuk banyak hal lainnya, seperti menggambar bentuk.
Saya ingin menambahkan pengingat di akhir artikel seperti ini bahwa tujuannya bukan untuk membatasi diri Anda menggunakan satu gradien. Anda dapat menggunakan lebih banyak! Tujuannya adalah untuk mendapatkan pemahaman yang lebih baik tentang cara kerja gradien dan mendorongnya dengan cara yang menarik – yang pada gilirannya membuat kita lebih baik dalam menulis CSS. Jadi silakan bereksperimen – saya ingin melihat apa yang Anda buat!
Trik CSS yang hanya menggunakan satu gradien awalnya diposting di CSS-Tricks, yang merupakan bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.