Teknik CSS hanya menggunakan satu gradien – Beragampengetahuan

Gradien CSS sudah ada sejak lama, jadi tidak perlu meninjau kembali apa itu gradien dan cara menggunakannya. Anda pasti pernah menemukannya di beberapa titik dalam perjalanan front-end Anda, dan jika Anda mengikuti saya, Anda juga akan tahu bahwa saya menggunakannya sepanjang waktu. Saya menggunakannya untuk pola CSS, dekorasi CSS yang indah, dan bahkan pemuat CSS. Namun meski begitu, sintaksis untuk gradien sangat ketat, dan bisa menjadi sangat rumit dengan cepat jika Anda tidak hati-hati.

Pada artikel ini, kami tidak akan membuat sesuatu yang rumit menggunakan gradien CSS. Sebaliknya, kami menjaga semuanya tetap sederhana dan saya akan membahas semua hal luar biasa yang dapat kami lakukan hanya dengan satu gradien.

Hanya satu gradien? Dalam hal ini, membaca dokumentasi saja sudah cukup, bukan?

Tidak, tidak juga. Selanjutnya, Anda akan melihat bahwa gradien itu sederhana pada dasarnya, namun bisa menjadi sangat berguna jika kita mendorongnya (atau hanya satu dalam kasus ini) hingga batasnya.

pola CSS

Hal pertama yang kita pelajari tentang penggunaan gradien adalah kita dapat membuat pola berulang dengannya. Anda mungkin pernah melihat beberapa contoh pola kotak-kotak di alam liar. Kita dapat dengan cepat mencapai hal ini dengan satu gradien CSS. Dalam hal ini kita bisa mencapainya repeating-conic-gradient() Fungsi:

background: 
  repeating-conic-gradient(#000 0 25%, #fff 0 50%) 
  0 / 100px 100px;

Versi yang lebih detail, tidak background steno:

background-image: repeating-conic-gradient(#000 0 25%, #fff 0 50%);
background-size: 100px 100px;

Apa pun hasilnya, hasilnya sama:

Sejauh ini cukup sederhana, bukan? Anda memiliki dua warna yang dapat dengan mudah diganti dengan warna lain, plus background-size Properti untuk mengontrol bentuk persegi.

Jika kita mengubah warna berhenti – satu warna berhenti dan warna lainnya dimulai – kita mendapatkan pola keren lainnya berdasarkan segitiga:

background: 
  repeating-conic-gradient(#000 0 12.5%, #fff 0 25%) 
  0 / 100px 100px;

Jika Anda membandingkan CSS dari dua demo yang telah kita lihat sejauh ini, Anda akan melihat bahwa yang saya lakukan hanyalah membagi penghentian warna menjadi dua, 25% tiba 12.5% Dan 50% tiba 25%.

lain? ayo pergi!

Kali ini saya menggunakan variabel CSS. Saya suka ini karena variabel mempermudah konfigurasi gradien dengan memperbarui beberapa nilai tanpa benar-benar menyentuh sintaksisnya. Perhitungan kali ini sedikit lebih rumit karena mengandalkan fungsi trigonometri untuk mendapatkan nilai pastinya.

Saya tahu apa yang Anda pikirkan: Trigonometri? Kedengarannya sulit. Hal ini memang benar, terutama jika Anda baru mengenal gradien CSS. Cara yang baik untuk memvisualisasikan pola adalah dengan menggunakan no-repeat nilai. Ini akan mengisolasi pola menjadi satu contoh sehingga Anda dapat dengan jelas melihat konten duplikat. Contoh berikut menyatakan background-image TIDAK background-size Dengan cara ini Anda dapat melihat ubin berulang dan memahami setiap gradien dengan lebih baik:

Saya ingin menghindari memberikan tutorial langkah demi langkah untuk setiap contoh yang kami bahas sehingga saya dapat berbagi lokasi Lebih banyak contoh tidak hilang begitu saja. Sebagai gantinya, saya akan merekomendasikan Anda tiga artikel yang dapat Anda rujuk untuk mempelajari lebih lanjut tentang hal ini dan memungkinkan Anda membedakan contoh-contoh kami.

Saya juga mendorong Anda untuk membuka koleksi pola online saya untuk melihat lebih banyak contoh. Kebanyakan contoh dibuat menggunakan beberapa gradien, namun banyak juga yang hanya menggunakan satu gradien. Tujuan dari artikel ini adalah untuk mempelajari beberapa teknik “gradien tunggal” – namun tujuan utamanya adalah untuk dapat menggabungkan sebanyak mungkin gradien untuk menciptakan sesuatu yang keren!

garis kisi

Mari kita mulai dengan contoh berikut:

Anda mungkin mengklaim ini adalah “pola” – dan Anda benar! Namun mari kita membuatnya lebih fleksibel dengan menambahkan variabel untuk mengontrol ketebalan dan jumlah sel. Dengan kata lain, mari kita buat a 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 pengulangan (seperti yang kita lakukan di bagian sebelumnya).

Mengulanginya sekali akan menghasilkan garis horizontal dan garis vertikal. Besar kecilnya gradien dikendalikan oleh variabel --sjadi kita tentukan lebar dan tinggi sebagai pengali untuk mendapatkan jumlah garis untuk pola grid yang ingin kita buat.

apa “+ var(--t)” dalam persamaan?

Tanpanya, grid akan terlihat seperti ini:

Kami kehilangan garis di kanan dan bawah, yang logis mengingat gradien yang kami gunakan. Untuk memperbaikinya, gradien perlu diulang sekali lagi, tetapi tidak dalam ukuran penuh. Oleh karena itu, kami menambahkan ketebalan pada persamaan sehingga terdapat cukup ruang untuk melakukan 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 sebagai berikut:

width: calc(round(down, 100%, var(--s)) + var(--t));

Daripada menggunakan perkalian, kami menggunakan round() Fungsi ini memberitahu browser untuk membuat elemen menjadi lebar penuh dan membulatkan nilainya menjadi --s. Dengan kata lain, browser akan menemukan penggandanya untuk kita!

Ubah ukuran di bawah ini dan lihat bagaimana perilaku grid:

Kedepannya kita juga akan bisa calc-size() Fungsi:

width: calc-size(auto, round(down, size, var(--s)) + var(--t));

menggunakan calc-size() Intinya sama dengan contoh sebelumnya, namun bukan menggunakan 100% kami pertimbangkan auto adalah nilai lebar. Masih terlalu dini untuk mengadopsi sintaksis ini. 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? Berikut adalah diagram dengan petunjuk:

Coba buat sendiri versi horizontalnya. Berikut demo yang menunjukkan bagaimana saya memecahkan masalah ini, tapi cobalah sebelum melihatnya.

Bagaimana dengan kotak dengan garis putus-putus – apakah mungkin?

Ya, tapi gunakan dua gradien, bukan satu. Kode ini diposting di koleksi bentuk CSS saya. Ya, perilaku responsif juga ada!

gradien pelangi

Bagaimana cara membuat gradien berikut di CSS?

Pertama-tama Anda dapat memilih nilai warna sebanyak yang Anda inginkan di sepanjang pelangi, lalu merangkainya menjadi satu linear-gradient:

linear-gradient(90deg, red, yellow, green, /* etc. */, red);

Ide bagus, tapi itu tidak akan membantu Anda sepenuhnya. Selain itu, ini mengharuskan Anda bekerja dengan skala warna dan memikirkannya sampai Anda melakukannya dengan benar.

Ada solusi yang lebih sederhana. Kita hanya membutuhkan satu warna untuk mencapai hal ini!

background: linear-gradient(90deg in hsl longer hue, red 0 0);

Saya tahu, jika Anda melihat interpolasi warna baru untuk pertama kalinya, sintaksnya terlihat aneh.

Jika saya hanya menyatakan ini:

background: linear-gradient(90deg, red, red); /* or (90deg, red 0 0) */

…browser membuat gradien dari merah ke merah…merah di mana-mana! Ketika kita mengatur ini “in hsl“, kami mengubah ruang warna yang digunakan untuk interpolasi antar warna:

background: linear-gradient(90deg in hsl, red, red);

Browser sekarang 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…masih merah dimana-mana.

ini longer hue Suatu hal yang menarik. Saat kita berada dalam ruang warna HSL, nilai saluran rona adalah satuan sudut (misalnya, 25deg). Anda dapat membayangkan ruang warna HSL sebagai sebuah lingkaran, dengan sudut yang menentukan posisi warna di dalam lingkaran.

Karena berbentuk lingkaran, kita dapat berpindah antara dua titik menggunakan jalur “pendek” atau jalur “panjang”.

Jika kita mempertimbangkan hal yang sama (red Dalam kasus kami) ini berarti jalur “pendek” hanya berisi warna merah, sedangkan jalur “panjang” bertemu dengan semua warna saat melintasi ruang warna.

Adam Argyle telah menerbitkan panduan yang sangat rinci tentang CSS HD Colors. Saya sarankan membacanya karena Anda akan menemukan semua fitur yang kami bahas (terutama bagian ini) untuk mendapatkan lebih banyak latar belakang tentang bagaimana semuanya cocok satu sama lain.

Kita bisa menggunakan teknik yang sama untuk membuat roda warna conic-gradient:

background: conic-gradient(in hsl longer hue,red 0 0);

Saat kita membahas topik warna CSS, saya membagikan trik menarik lainnya yang memungkinkan Anda menentukan serangkaian nilai warna… ya, dalam CSS! Dan itu juga hanya menggunakan satu gradien.

efek melayang

Mari kita lakukan latihan lainnya, kali ini menggunakan efek hover. Ketika menyangkut hal-hal seperti menerapkan garis bawah dan overlay saat mengarahkan kursor, kita cenderung mengandalkan elemen semu dan elemen tambahan, dan kita cenderung lupa bahwa gradien sama efektifnya, jika tidak lebih efektif, dalam menyelesaikan pekerjaan.

Berikan sebuah contoh. Mari kita gunakan gradien tunggal untuk membentuk garis bawah yang meluncur saat diarahkan:

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 elemen semu untuk ini, bukan? Saya pikir ini mungkin cara kebanyakan orang mendekatinya. Ini adalah solusi yang berfungsi, tetapi menurut saya penggunaan gradien 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 efek hover yang keren.

bentuk CSS

Membuat bentuk dengan gradien adalah hal favorit saya di CSS. Saya merasa seperti saya telah melakukan ini selamanya, dan saya sangat menyukainya sehingga awal tahun ini saya menerbitkan “Panduan Modern untuk Membuat Bentuk CSS” di Majalah Smashing. Saya harap Anda tidak hanya mempelajari lebih banyak teknik, tetapi juga berapa banyak bentuk yang dapat kita buat dengan sejumlah kecil kode – banyak di antaranya hanya mengandalkan satu gradien CSS.

Beberapa favorit saya mencakup batas zigzag:

…dan sudut “perburuan liar”:

…dan berkedip:

…dan ikon umum seperti tanda plus:

Saya tidak akan membahas detail pembuatan bentuk-bentuk ini untuk menghindari artikel ini panjang dan membosankan. Baca panduannya dan kunjungi koleksi Bentuk CSS saya dan Anda akan memiliki semua yang Anda butuhkan untuk membuatnya dan banyak lagi!

Tip Gambar Perbatasan

Sebelum kita membatasinya, mari kita lakukan lagi. Awal tahun ini saya menemukan betapa hebatnya CSS border-image Properti digunakan untuk membuat berbagai jenis dekorasi dan bentuk. Coba tebak? border-image Batasannya adalah kita hanya dapat menggunakan satu gradien, jadi kita harus menghormati batasan ini.

Sekali lagi, hanya dengan satu gradien, kita mendapatkan banyak hasil menarik. Saya akan menambahkan favorit saya seperti di bagian sebelumnya. Mulailah dengan hamparan gradien:

Kita dapat menggunakan teknik ini untuk latar belakang lebar penuh:

…dan pemisah judul:

…dan bahkan pita:

Semua ini secara tradisional memerlukan peretasan, angka ajaib, dan solusi lainnya. Sangat menyenangkan melihat bagaimana CSS modern membuat segalanya jadi lebih mudah. Baca artikel saya tentang topik ini dan temukan semua hal menyenangkan yang dapat Anda gunakan border-image.

Meringkaskan

Saya harap Anda menikmati kumpulan teknik “gradien tunggal” ini. Kebanyakan orang yang saya kenal cenderung menggunakan gradien untuk membuat gradien. Namun seperti yang telah kita lihat, mereka 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 pada satu gradien. Anda bisa menggunakan lebih banyak! Tujuannya adalah untuk lebih memahami cara kerja gradien dan mendorongnya dengan cara yang menarik – yang pada gilirannya memungkinkan kita menulis CSS yang lebih baik. Jadi, silakan mencobanya – saya ingin melihat hasil Anda!

Pos Trik CSS Menggunakan Hanya Satu Gradien awalnya diposting di beragampengetahuan, bagian dari keluarga DigitalOcean. Anda harus menerima buletin.