Cara membuat bentuk & corak bergelombang dalam CSS

Membuat bentuk gelombang dalam CSS boleh menjadi cabaran. Kami sering cuba mensimulasikan kesan gelombang menggunakan atribut

dan sejumlah besar perkiraan, tetapi ini boleh menjadi lebih kompleks apabila berurusan dengan corak gelombang. border-radius

Walaupun SVG adalah cara yang lebih berkesan untuk membuat bentuk gelombang, CSS juga boleh mencapai hasil yang baik, dan kod itu tidak perlu terlalu rumit. Lebih baik lagi, saya menyediakan penjana dalam talian untuk memudahkan proses!

Menggunakan penjana, anda dapat melihat bahawa kod CSS yang dihasilkan mengandungi hanya dua kecerunan dan satu harta CSS

- itu sahaja, dan anda boleh membuat pelbagai bentuk gelombang dan corak. Di samping itu, kita boleh mengawal saiz dan kelengkungan gelombang dengan mudah. mask

Sesetengah nilai mungkin kelihatan seperti "nombor sihir", tetapi sebenarnya ada asas logik di belakangnya. Kami akan membedah kod dan mendedahkan semua rahsia membuat gelombang.

Artikel ini adalah susulan kepada artikel sebelumnya tentang mewujudkan pelbagai Zigzag, Range-Limited, Scalloped, dan Wavy Borders. Saya sangat mengesyorkan membaca artikel itu kerana ia menggunakan teknik yang sama yang diterangkan di sini, tetapi lebih terperinci.

Prinsip matematik di belakang gelombang

dengan tegas, tidak ada formula ajaib untuk membuat bentuk gelombang. Mana -mana bentuk dengan lengkung atas dan bawah boleh dipanggil gelombang, jadi kita tidak mengehadkan diri kita untuk pengiraan matematik yang kompleks. Sebaliknya, kami akan menggunakan asas geometri untuk menghasilkan semula gelombang.

mari kita mulakan dengan contoh mudah menggunakan dua bentuk bulat:

Kami mempunyai dua bulatan dengan jejari yang sama bersebelahan antara satu sama lain. Pernahkah anda melihat garis merah itu? Ia meliputi bahagian atas pusingan pertama dan separuh bawah pusingan kedua. Sekarang bayangkan anda mengambil garis itu dan ulangi.

kita telah melihat gelombang. Sekarang mari kita isi bahagian bawah (atau atas) untuk mendapatkan hasil berikut:

Lihat! Kami mendapat bentuk gelombang dan kami boleh menggunakan pembolehubah untuk mengawal jejari bulatan. Ini adalah salah satu gelombang paling mudah yang boleh kita buat dan yang saya tunjukkan dalam jawatan terdahulu saya.

mari kita tambahkan beberapa kerumitan dengan mengambil legenda pertama dan menggerakkan bulatan sedikit:

kita masih mempunyai dua kalangan dengan jejari yang sama, tetapi mereka tidak lagi sejajar secara mendatar. Dalam kes ini, garis merah tidak lagi meliputi separuh daripada kawasan setiap bulatan, tetapi kawasan yang lebih kecil. Kawasan ini terhad oleh garis merah bertitik. Garis ini melalui titik di mana dua lingkaran bertemu.

Sekarang ambil garis itu dan ulangi dan anda akan mendapat gelombang lain, yang lebih lancar.

saya rasa anda faham. Dengan mengawal kedudukan dan saiz bulatan, kita boleh membuat sebarang gelombang yang kita mahu. Kita juga boleh membuat pembolehubah untuk mereka, yang akan saya panggil P dan S masing -masing.

Anda mungkin menyedari bahawa dalam penjana dalam talian, kami menggunakan dua input untuk mengawal gelombang. Mereka dipetakan ke pembolehubah yang disebutkan di atas. S ialah "saiz gelombang" dan p ialah "kelengkungan gelombang".

Saya mentakrifkan p sebagai p = m*s, di mana m adalah pemboleh ubah yang anda sesuaikan apabila mengemas kini kelengkungan gelombang. Ini membolehkan kita sentiasa mengekalkan kelengkungan yang sama, walaupun kita mengemas kini S.

m boleh menjadi nilai antara 0 dan 2. 0 akan memberikan kes khas pertama kami di mana dua kalangan diselaraskan secara mendatar. 2 adalah nilai maksimum. Kita boleh menjadi lebih besar, tetapi selepas beberapa ujian, saya mendapati bahawa apa -apa nilai lebih besar daripada 2 akan menghasilkan bentuk rata yang buruk.

Jangan lupa jejari bentuk bulat kita! Ini juga boleh ditakrifkan menggunakan S dan P, seperti yang ditunjukkan di bawah:

<code>R = sqrt(P² + S²)/2
R = sqrt(m²*S² + S²)/2
R = S*sqrt(m² + 1)/2</code>

Apabila m sama dengan 0 (iaitu p adalah sama dengan 0), kita akan mempunyai r = s/2.

kita mempunyai segala yang kita perlukan untuk menukar semua ini menjadi kecerunan dalam CSS!

Buat kecerunan

Gelombang kami menggunakan bulatan, dan ketika datang ke kalangan, kita bercakap tentang kecerunan radial. Oleh kerana kedua -dua bulatan menentukan gelombang kami, kami akan menggunakan dua kecerunan radial secara logik.

kita akan bermula dengan kes khas di mana p adalah sama dengan 0. Ini adalah ilustrasi kecerunan pertama:

Kecerunan ini mewujudkan kelengkungan pertama semasa mengisi seluruh kawasan bawah - boleh dikatakan "air" gelombang.

<code>.wave {
  --size: 50px;

  mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%) 
    50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>

--size pembolehubah menentukan jejari dan saiz kecerunan radial. Jika kita membandingkannya dengan pembolehubah S, ia sama dengan s/2.

mari tambahkan kecerunan kedua sekarang:

Kecerunan kedua hanyalah bulatan untuk melengkapkan gelombang kami:

<code>radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%) 
  calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%</code>

Jika anda melihat jawatan terdahulu, anda akan mendapati bahawa saya hanya mengulangi apa yang saya lakukan di sana.

Saya membaca dua artikel, tetapi konfigurasi kecerunan tidak sama.

Ini kerana kita boleh menggunakan konfigurasi kecerunan yang berbeza untuk mencapai hasil yang sama. Jika anda membandingkan dua konfigurasi, anda akan melihat penjajaran yang sedikit berbeza, tetapi silap mata adalah sama. Jika anda tidak biasa dengan kecerunan, ini boleh mengelirukan, tetapi jangan risau. Dengan beberapa latihan, anda akan terbiasa dengan mereka dan anda akan mendapati bahawa sintaks yang berbeza dapat menghasilkan hasil yang sama.

ini adalah kod lengkap untuk gelombang pertama kami:

<code>.wave {
  --size: 50px;

  mask:
    radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>

Sekarang mari kita ambil kod ini dan laraskannya supaya kami memperkenalkan pembolehubah yang boleh digunakan sepenuhnya untuk membuat gelombang yang kami inginkan. Seperti yang kita lihat di bahagian sebelumnya, helah utama adalah untuk menggerakkan bulatan supaya mereka tidak lagi sejajar, jadi mari kita mengemas kini kedudukan setiap bulatan. Kami bergerak yang pertama dan yang kedua ke bawah.

kod kami akan kelihatan seperti ini:

<code>.wave {
  --size: 50px;
  --p: 25px;

  mask:
    radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}</code>

Saya memperkenalkan pembolehubah --p baru untuk menentukan kedudukan pusat setiap bulatan. Kecerunan pertama menggunakan 50% calc(-1*var(--p)), jadi pusatnya bergerak ke atas, sementara kecerunan kedua menggunakan calc(var(--size) var(--p)) untuk memindahkannya ke bawah.

demonstrasi lebih baik daripada seribu perkataan:

Lingkaran tidak sejajar atau menyentuh satu sama lain. Kami memisahkan mereka jauh tanpa mengubah jejari, jadi kami kehilangan gelombang. Tetapi kita boleh menyelesaikan masalah ini dengan mengira jejari baru menggunakan kaedah matematik yang sama yang digunakan sebelum ini. Ingat r = sqrt (p² s²)/2. Dalam kes kami, --size adalah sama dengan s/2; Oleh itu, jarak antara titik pusat mereka adalah dua kali setinggi --p: --p

<code>R = sqrt(P² + S²)/2
R = sqrt(m²*S² + S²)/2
R = S*sqrt(m² + 1)/2</code>

Ini memberi kita hasil 55.9px.

Gelombang kami kembali! Mari masukkan persamaan ke dalam CSS kami:

<code>.wave {
  --size: 50px;

  mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%) 
    50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>

CSS di atas kelihatan sah, tetapi ia tidak akan berfungsi kerana kita tidak dapat membiak dua panjang, jadi kita perlu memperkenalkan pembolehubah M untuk mengawal kelengkungan, seperti yang diterangkan dalam bahagian sebelumnya.

<code>radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%) 
  calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%</code>

Ini sangat sejuk: hanya dua kecerunan yang diperlukan untuk mendapatkan gelombang sejuk yang anda boleh memohon kepada mana -mana elemen menggunakan atribut

. Tidak perlu mencuba dan melakukannya - anda hanya perlu mengemas kini dua pembolehubah! mask

Gelombang terbalik

Bagaimana jika kita mahu gelombang bergerak ke arah yang lain, kita mengisi "langit" dan bukannya "air"? Percayalah atau tidak, kita hanya perlu mengemas kini dua nilai:

<code>.wave {
  --size: 50px;

  mask:
    radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>

semua yang saya lakukan adalah menambah offset sama dengan 100%, seperti yang ditunjukkan di atas. Hasilnya adalah seperti berikut:

kita mungkin mempertimbangkan menggunakan sintaks yang lebih mesra nilai kata kunci untuk memudahkannya:

<code>.wave {
  --size: 50px;
  --p: 25px;

  mask:
    radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}</code>

Kami menggunakan kata kunci

dan left untuk menentukan tepi dan offset. Secara lalai, penyemak imbas lalai ke bottom dan left - itulah sebabnya kami menggunakan 100% untuk memindahkan elemen ke bahagian bawah. Kami sebenarnya memindahkannya 100% dari atas, jadi ia sebenarnya sama dengan mengatakan bahagian bawah. Lebih mudah dibaca daripada matematik! top

Menggunakan sintaks yang dikemas kini ini, kami hanya menggantikan

dengan bottom -dan sebaliknya -untuk mengubah arah gelombang. top

Jika anda ingin mendapatkan kedua -dua gelombang atas dan bawah, kami menggabungkan semua kecerunan dalam satu pernyataan:

<code>R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))</code>

Jika anda menyemak kod tersebut, anda akan melihat bahawa selain menggabungkan semua kecerunan, saya juga mengurangkan ketinggiannya dari 100% hingga 51% supaya mereka semua menutup separuh elemen. Ya, 51%. Kami memerlukan peratusan tambahan untuk melakukan tumpang tindih kecil untuk mengelakkan jurang.

bagaimana dengan sisi kiri dan kanan?

Ini adalah kerja rumah anda! Ambil kesempatan daripada apa yang kami lakukan di bahagian atas dan bawah dan cuba mengemas kini nilai untuk mendapatkan nilai di sebelah kanan dan kiri. Jangan risau, mudah, satu -satunya perkara yang perlu anda lakukan ialah menukar nilai.

Jika anda mempunyai masalah, anda boleh menggunakan penjana dalam talian untuk menyemak kod dan menggambarkan hasilnya.

... (kandungan yang tinggal adalah serupa dengan teks asal, kecuali bahasa dan ekspresi diselaraskan, dan gambar dan blok kod dikekalkan)

Atas ialah kandungan terperinci Cara membuat bentuk & corak bergelombang dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!