Resep Spot CSS – Beragampengetahuan

Bintik -bintik, bintik -bintik, bintik -bintik. Anda membenci mereka. Anda mencintai mereka. Secara pribadi, sebagai desain yang buta huruf, saya suka terlalu sering menggunakannya … banyak. Dan, ketika Anda mengulangi proses yang sama berulang -ulang, itu hanya pertanyaan, yaitu Anda dapat mengoptimalkan nomornya, atau dalam hal ini, apa cara termudah untuk membuat gumpalan di CSS? Ternyata, ada banyak cara, seperti biasa.

Untuk mengetahui apakah tempat kami berikut layak digunakan, kami membutuhkannya untuk lulus tiga tes:

1. Mereka hanya dapat menggunakan satu elemen (lebih disukai tidak ada elemen semu).
2. Mereka dapat dirancang dengan mudah (idealnya melalui alat online).
3. Kita dapat menggunakan latar belakang gradien, batas, bayangan, dan efek CSS lainnya pada mereka.

Tidak diragukan lagi, mari kita Bintik -bintik, bintik -bintik, bintik -bintik Hanya di sana.

Hasilkan saja secara online

Saya tahu bahwa mengklik artikel tentang membuat bintik -bintik di CSS hanya untuk mengizinkan saya mengatakan Anda dapat menghasilkannya di luar CSS, yang membuat frustrasi. Namun, ini mungkin cara paling umum untuk membuat bintik -bintik di web, jadi untuk menjadi teliti, ini adalah beberapa alat online yang pernah saya gunakan sebelumnya SVG titik.

• Berbasis laut. Setelah itu, saya kemungkinan besar menggunakannya, dan selain bintik -bintik, itu dapat menghasilkan banyak latar belakang SVG.
• Blobmaker. Alat khusus untuk membuat bintik -bintik. Ini jelas bagian dari haikei, sehingga Anda dapat menggunakan keduanya.
• Akhirnya, hampir semua program grafis memungkinkan Anda untuk menggambar gumpalan dengan tangan dan mengekspornya sebagai SVG.

Misalnya, inilah yang baru saja saya hasilkan. Simpan, karena akan berguna nanti.

<svg viewBox="0 0 200 200" xmlns="
  <path
    fill="#FA4D56"
    d="M65.4,-37.9C79.2,-13.9,81,17,68.1,38C55.2,59.1,27.6,70.5,1.5,69.6C-24.6,68.8,-49.3,55.7,-56,38.2C-62.6,20.7,-51.3,-1.2,-39,-24.4C-26.7,-47.6,-13.3,-72,6.2,-75.6C25.8,-79.2,51.6,-62,65.4,-37.9Z"
    transform="translate(100 100)"
  />
</svg>

menggunakan border-radius

Meskipun berlawanan dengan intuisi, kita bisa menggunakan border-radius Menciptakan sifat gumpalan. Bagaimanapun, teknologi ini bukan hal baru. Ini pertama kali dijelaskan oleh Nils Binder pada tahun 2018, tetapi masih belum diketahui. Bahkan bagi mereka yang menggunakannya, pekerjaan internal tidak sepenuhnya jelas.

Pertama, Anda mungkin tahu border-radius Ini adalah steno untuk setiap jari -jari sudut, searah jarum jam dari sudut kiri atas. Misalnya, kita dapat mengatur border-radius Untuk mendapatkan bentuk bubble persegi:

<div class="blob"></div>

.blob {
  border-radius: 25% 50% 75% 100%;
}

Tapi apa border-radius Memang – dan mengapa itu disebut “jari -jari” – membentuk setiap sudut dengan lingkaran jari -jari yang diberikan. Misalnya, jika kita mengatur sudut kiri atas ke 25%itu akan mengikuti radius 25% Ukuran bentuknya.

.blob {
  border-top-left-radius: 25%;
}

Kurang dikenal bahwa setiap atribut sudut masih jalan pintas Menuju jari -jari horizontal dan vertikal. Biasanya Anda mengatur kedua jari -jari ini ke nilai yang sama, dapatkan lingkaran, tetapi Anda dapat mengaturnya secara terpisah untuk membuat elips. Misalnya, yang berikut ini menetapkan jari -jari horizontal menjadi 25% Lebar dan sag dari elemen hingga 50% Tingginya:

.blob {
  border-top-left-radius: 25% 50%;
}

Sekarang kita dapat membentuk setiap sudut seperti elips, dan itu adalah kombinasi dari keempat elips yang membuat fantasi berbintik -bintik! Pertimbangkan saja melewati sintaks jari -jari horizontal dan vertikal border-radius Properti, kita perlu menggunakan slash maju untuk memisahkan jari -jari horizontal dari jari -jari vertikal (/).

.blob {
  border-radius:
    /* horizontal */
    100% 30% 60% 70% /
    /* vertical */
    50% 40% 70% 70%;
}

Tata bahasa tidak terlalu intuitif, sehingga merancang bintik -bintik dari awal bisa menjadi sakit kepala. Untungnya, Nils Binder membuat alat untuk ini!

Bintik bersama

Peretasan ini bagus. Kita tidak boleh menggunakannya border-radius Dengan begitu, tapi kami masih melakukannya. Memang, kami terbatas pada tempat yang membosankan. Karena alam border-radiusTidak peduli seberapa keras kita berusaha, kita hanya akan mendapatkan bentuk cembung.

Baru saja pergi border-radiuskita dapat mencoba meminimalkan sedikit dengan menyatukan banyak tempat:

Namun, saya tidak ingin menghabiskan terlalu banyak waktu untuk teknologi ini karena terlalu tidak praktis dan tidak sepadan. Sebutkan beberapa kerugian:

1. Kami menggunakan beberapa elemen, atau setidaknya elemen semu tambahan. Idealnya, kami ingin menyimpannya di satu elemen.
2. Kami tidak memiliki alat untuk menggabungkan prototipe blobby, jadi membuat adalah proses coba -coba.
3. Kami tidak dapat menggunakan batasan, gradien, atau bayangan kotak karena mereka akan mengungkapkan garis besar elemen.

Beberapa latar belakang dan filter SVG

Ini adalah peningkatan dalam efek berlendir yang dijelaskan di sini oleh Lucas Bebber, meskipun saya tidak tahu siapa yang mengusulkannya. Dalam efek asli, beberapa elemen dapat dideformasi bersama, seperti tetesan cairan yang saling menempel dan mengalir keluar:

Ini bekerja dengan bentuk -bentuk kabur pertama di sekitar bentuk, sehingga menciptakan beberapa bayangan yang terhubung. Kami kemudian meningkatkan kontras, memaksa blur dan menghubungkannya dengan lancar dalam proses. Ambil demonstrasi Chris Coyer sebagai contoh (ini dari 2014 hingga 10 tahun yang lalu!):

Jika Anda melihat kode, Anda akan melihat bahwa Chris menggunakan filter Bersama blur() Dan contrast() Fitur, saya juga melihat fitur di demo spot lainnya. Secara khusus, ini berlaku blur() Di setiap lingkaran, lalu contrast() Pada elemen induk. Jadi jika kita memiliki HTML berikut:

<div class="blob">
  <div class="subblob"></div>
  <div class="subblob"></div>
  <div class="subblob"></div>
</div>

… Kita perlu menerapkan filter dan warna latar belakang:

.blob {
  filter: contrast(50);
  background: white; /* Solid colors are necessary */
}

.subblob {
  filter: blur(15px);
  background: black; /* Solid colors are necessary */
}

Namun, ada alasan bagus mengapa demo ini menempel pada bentuk putih dan latar belakang hitam (dan sebaliknya), karena segala sesuatunya menjadi tidak dapat diprediksi begitu warnanya tidak cukup kontras. Lihat sendiri dalam demo berikut dengan mengubah warna. Berhati -hatilah: Bayangan menjadi jelek.

Untuk mengatasi masalah ini, kami akan menggunakan filter SVG. Saya tidak ingin menjadi terlalu teknis di SVG (baca posting Luca jika Anda mau!). Sederhana contrast()memodifikasi semua warna.

Karena kami ingin meninggalkan saluran warna (R,,,,, G Dan B) Kami hanya akan membuat kontras untuk saluran Alpha. Ini diterjemahkan ke filter SVG berikutnya yang dapat disematkan dalam html:

<svg xmlns=" version="1.1" style="position: absolute;">
  <defs>
    <filter id="blob">
      <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -6" result="goo" />
      <feBlend in="SourceGraphic" in2="blob" />
    </filter>
  </defs>
</svg>

Untuk menerapkannya, kami akan menggunakannya lagi filtertapi kali ini kami mengaturnya url("#blob")buatlah menarik SVG keluar dari HTML.

.blob {
  filter: url("#blob");
}

Sekarang kita bahkan dapat menggunakannya dengan latar belakang gradien!

Yang sedang berkata, pendekatan ini datang dengan dua perubahan kecil namun penting pada filter CSS normal:

1. Filter diterapkan pada elemen induk, bukan untuk bentuk tunggal.
2. Elemen induk harus transparan (ini adalah keuntungan besar). Untuk mengubah warna latar belakang, kita dapat mengubah latar belakang tubuh atau leluhur lainnya dan akan baik -baik saja.

Sisanya adalah penempatan .subblob Elemen bersama -sama membuatnya membentuk bentuk yang cukup, dan kemudian menerapkan filter SVG untuk mengubah bentuknya:

Jadikan itu Elemen

Ini bekerja dengan baik, tetapi memiliki masalah yang sama dengan gumpalan yang kita lewati oleh deformasi border-radius Contoh: Terlalu banyak elemen tidak bisa sederhana. Untungnya, kita bisa menggunakan background Properti untuk membuat beberapa bentuk dan merusaknya bersama -sama menggunakan filter SVG, semua dalam satu elemen. Karena kami menyimpannya ke suatu elemen, kami akan mengembalikan kosong .blob DIV:

<div class="blob"></div>

Mari kita tinjau background SHORTHAND dapat mengatur semua properti latar belakang, dan beberapa latar belakang dapat diatur sekaligus. Dari semua properti yang hanya kita pedulikan background-image,,,,, background-position Dan background-size.

Pertama, kami akan menggunakan background-image maupun radial-gradient() Untuk membuat lingkaran di dalam elemen:

body {
  background: radial-gradient(farthest-side, var(--blob-color) 100%, #0000);
  background-repeat: no-repeat; /* Important! */
}

Inilah yang dilakukan setiap parameter:

• farthest-side: Batasi bentuk ke kotak elemen yang terjauh dari pusat. Dengan cara ini, itu disimpan sebagai lingkaran.
• var(--blob-color) 100%: Isi bentuk latar belakang dari 0 hingga 100% dengan warna yang sama, jadi berakhir dengan warna solid.
• #0000: Setelah bentuk selesai, ia benar -benar dapat menghentikan transparansi, sehingga warnanya berakhir.

Bagian selanjutnya adalah menggunakan background-position Dan background-size ciri. Untungnya, keduanya bisa diatur background Setelah gradien, itu dipisahkan satu sama lain dengan slash ke depan (/).

body {
  background: radial-gradient(...) 20% 30% / 30% 40%;
  background-repeat: no-repeat; /* Important! */
}

Pasangan persentase pertama menetapkan posisi horizontal dan vertikal bentuk (sebagai referensi untuk sudut kiri atas), sedangkan pasangan kedua menetapkan lebar dan tinggi bentuk (sebagai referensi untuk ukuran elemen referensi).

Seperti yang saya sebutkan, kita dapat menumpuk latar belakang yang berbeda bersama -sama, yang berarti kita dapat membuat sebanyak mungkin lingkaran/elips seperti yang kita inginkan! Misalnya, kita dapat membuat tiga elips pada elemen yang sama:

.blob {
  background:
    radial-gradient(farthest-side, var(--blob-color) 100%, #0000) 20% 30% / 30% 40%, 
    radial-gradient(farthest-side, var(--blob-color) 100%, #0000) 80% 50% / 40% 60%, 
    radial-gradient(farthest-side, var(--blob-color) 100%, #0000) 50% 70% / 50% 50%;
  background-repeat: no-repeat;
}

Lebih baik lagi, filter SVG tidak peduli jika bentuknya terbuat dari elemen atau latar belakang, jadi kami juga dapat menggunakan yang terakhir untuk mengubah bentuknya url(#blob) menyaring!

Meskipun pendekatan ini mungkin terlalu banyak untuk gumpalan, ia membuka kunci, peregangan, pemisahan, dan menggabungkan gumpalan dalam animasi yang mulus.

Sekali lagi, semua tips ini bagus, tetapi tidak cukup untuk memuaskan apa yang kita inginkan! Kami menyelesaikan metode mengurangi gumpalan ke satu elemen, tetapi kami masih tidak dapat menggunakan gradien, batas atau bayangan, dan mereka juga membosankan dalam desain dan pemodelan. Ini kemudian membawa kita ke metode tempat terakhir…

menggunakan shape() Fungsi

Untungnya, ada cara baru untuk membuat bintik -bintik yang baru saja jatuh ke CSS: shape() Fungsi!

Saya akan menjelaskan shape()Pengantar singkat untuk sintaksis, tetapi untuk melangkah lebih dalam, Anda perlu memeriksa dua penerjemah ini dari beragampengetahuan Almanac dan Temani Afif di The Three-Part Series shape() Fitur dan artikel terbarunya di tempat.

Pertama, CSS shape() Fungsional dan clip-path Potong elemen menjadi properti dalam bentuk apa pun yang kami inginkan. Lebih khusus, ia menggunakan versi verbal SVG path sintaksis. Ada banyak jenis perintah dalam sintaks, tetapi kapan shape()kami akan menggunakan curve Memesan:

.blob {
  clip-path: shape(
    from X0 Y0, 
    curve to X1 Y1 with Xc1 Yc1, 
    curve to X2 Y2 with Xc21 Yc21 / Xc22 Yc22
    /* ... */
  );
}

Mari kita hancurkan setiap parameter:

• X0 Y0 Mendefinisikan titik awal bentuk.
• curve Mulai Kurva X1 Y1 adalah titik bentuk berikutnya, dan Xc1 Yc1 Mendefinisikan titik kontrol yang digunakan dalam kurva Bézier.
• Parameter berikutnya serupa, tetapi kami menggunakan Xc21 Yc21 / Xc22 Yc22 Sebaliknya, dua titik kontrol didefinisikan pada kurva Bézier.

Sejujurnya, saya tidak sepenuhnya memahami kurva dan titik kontrol Bézier, tapi untungnya kami tidak membutuhkannya untuk menggunakannya shape() Dan bintik! lagi, shape() Menggunakan versi verbal SVG path Sintaks, sehingga dapat menggambar segala bentuk toples SVG, yang berarti kami dapat menerjemahkan gumpalan SVG yang kami hasilkan sebelumnya … dan CSS-Yifynya. Untuk melakukan ini, kami akan menangkap d Atribut (definisi path) Dari SVG kami, tempel ke SVG Temani shape() dinamo.

Berikut adalah kode yang tepat yang dihasilkan alat untuk saya:

.blob {
  aspect-ratio: 0.925; /* Generated too! */

  clip-path: shape(
    from 91.52% 26.2%,
    curve to 93.52% 78.28% with 101.76% 42.67%/103.09% 63.87%,
    curve to 44.11% 99.97% with 83.95% 92.76%/63.47% 100.58%,
    curve to 1.45% 78.42% with 24.74% 99.42%/6.42% 90.43%,
    curve to 14.06% 35.46% with -3.45% 66.41%/4.93% 51.38%,
    curve to 47.59% 0.33% with 23.18% 19.54%/33.13% 2.8%,
    curve to 91.52% 26.2% with 62.14% -2.14%/81.28% 9.66%
  );
}

Seperti yang sudah Anda duga, itu mengembalikan bintik -bintik indah kami:

Mari kita periksa apakah itu melewati persyaratan kami:

1. Ya, mereka dapat dibuat dari satu elemen.
2. Ya, mereka juga dapat dibuat dalam generator dan kemudian dikonversi ke CSS.
3. Ya, kita bisa menggunakan latar belakang gradien, tapi karena itu clip-path()perbatasan dan bayangan terputus.

Dua pertiga? Mungkin sepertiga dari tiga setengah? Jika tidak sempurna, ini adalah peningkatan besar dalam pendekatan lain.

sebagai kesimpulan

Jadi, ALS, kami gagal menemukan metode CSS yang sempurna yang menurut saya adalah gumpalan. Tapi saya kagum pada bagaimana tempat desain sepele seperti itu mengajarkan kami tentang banyak tips dan fitur CSS baru, banyak di antaranya yang saya tidak tahu sendiri.

Resep CSS Blob awalnya diterbitkan di beragampengetahuan, sebuah majalah yang merupakan bagian dari keluarga Digitalocean. Anda harus menerima buletin.