Tiga cara untuk gumpalan dengan CSS dan SVG

BLABS -yang lancar, bentuk organik -tambah sentuhan suka bermain untuk reka bentuk web, sesuai untuk ilustrasi dan kesan latar belakang. Walaupun perisian ilustrasi adalah pilihan, mari kita meneroka keseronokan membuat gumpalan menggunakan CSS dan SVG.

Berikut adalah tiga pendekatan:

1. Bulatan dan Ellip SVG

Kaedah yang paling mudah melibatkan lingkaran dan elips yang bertindih dalam SVG. SVG's<circle></circle> elemen adalah mudah:

<circle cx="100" cy="100" fill="red" r="40"></circle>

• cx dan cy : Tentukan koordinat pusat bulatan.
• r : Menentukan jejari.
• fill : Tetapkan warna mengisi.

Bulatan bertindih berbilang membuat gumpalan asas:

<svg height="300" width="300">
  <circle cx="80" cy="80" fill="red" r="40"></circle>
  <circle cx="120" cy="80" fill="red" r="40"></circle>
  
</svg>

Untuk lebih banyak variasi, gunakan<ellipse></ellipse> untuk mengawal radii mendatar dan menegak secara bebas:

<ellipse cx="200" cy="80" fill="red" rx="100" ry="50"></ellipse>

Walaupun mudah, kaedah ini mungkin tidak mempunyai rasa organik gumpalan yang benar.

Sebagai alternatif, untuk kalangan asas, CSS cukup cukup:

 .circle {
  Radius sempadan: 50%;
  Ketinggian: 50px;
  lebar: 50px;
}

2. Laluan SVG untuk bentuk kompleks

Untuk reka bentuk gumpalan yang rumit, SVG's<path></path> Elemen menawarkan kawalan muktamad. Ia membolehkan garis lukisan dan lengkung menggunakan arahan seperti:

• M : Pindah ke titik.
• L : Lukis garis.
• C : Lukis lengkung bézier kubik.
• Z : Tutup jalan.

Penjelasan terperinci mengenai arahan ini boleh didapati dalam panduan komprehensif Chris Coyier. Mewujudkan laluan kompleks secara manual boleh membosankan, jadi pertimbangkan untuk menggunakan alat untuk menghasilkan data laluan. Contohnya:

<path d="M10 10 C 20 20, 40 20, 50 10 Z" fill="red"></path>

Laluan ini bermula pada (10, 10), lengkung ke (50, 10), dan menutup bentuknya.

3. CSS dan penapis SVG untuk kesan gooey

Teknik ini memanfaatkan penapis SVG untuk membuat kesan "gooey" dari bentuk bersilang. Kami akan menggunakan dua segi empat tepat yang bertindih dengan ketelusan, kemudian memohon penapis SVG untuk manipulasi kabur dan warna.

Penapis SVG ditakrifkan menggunakan<filter></filter> dan digunakan melalui CSS:

<svg style="position: absolute; width: 0; height: 0;">
  <filter id="goo">
    <fegaussianblur in="SourceGraphic" stddeviation="30"></fegaussianblur>
    <fecolormatrix in="blur" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -7"></fecolormatrix>
  </filter>
</svg>

feGaussianBlur mengaburkan bentuknya, dan feColorMatrix menyesuaikan warna. Penapis kemudian dirujuk dalam CSS:

 .blob-container {
  penapis: url ("#goo");
  / * ... gaya lain ... */
}

Pendekatan ini menawarkan kesan gumpalan yang unik dan mudah disesuaikan. Eksperimen dengan nilai penapis yang berbeza untuk mencapai rupa yang dikehendaki.

Ingatlah untuk menyesuaikan nilai dan parameter untuk menyempurnakan bentuk dan penampilan gumpalan anda dalam setiap kaedah.

Atas ialah kandungan terperinci Tiga cara untuk gumpalan dengan CSS dan SVG. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!