Seni dengan Grid CSS dan penapis SVG

Pernahkah anda meneroka kuasa grid-auto-flow: padat? Apabila digabungkan dengan nilai yang dijana secara rawak (terkekang dalam julat yang ditetapkan), anda boleh menggunakan sifat lajur grid dan baris grid untuk mencipta seni berasaskan grid yang keren. Mari selami!

Mula-mula, mari buat struktur grid asas:

main {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill,
 minmax(var(--w, 4cqi), 1fr));
}

• paparan: grid: Mewujudkan reka letak grid CSS.
• grid-auto-flow: padat: Mengisi jurang dalam grid secara automatik dengan meletakkan semula item untuk meminimumkan ruang kosong.
• grid-template-columns: Mentakrifkan susun atur lajur responsif. Di sini, lajur dicipta secara automatik untuk mengisi ruang yang tersedia (autoisi), setiap satu dengan lebar minimum --w (lalai kepada 4cqi) dan lebar maksimum 1fr.

Pada ketika ini, --w tidak ditentukan, jadi nilai lalai (4cqi) digunakan. Begini rupa grid awal:

Seterusnya, kami akan mengisi grid dengan sekumpulan -nod. Semasa kami memberikannya dengan JavaScript, kami menambah 2 pembolehubah setiap nod:

• --gc: Bilangan lajur untuk rentang.
• --gr: Bilangan baris untuk rentang.

Begini cara kami menjana nilai rawak dalam JavaScript:

const random = (min, max) => 
  Math.random() * (max - min) + min

const column = () => 
`--gc:${Math.floor(random(0, 4))};`

const row = () => 
`--gr:${Math.floor(random(0, 3))};`

Dalam CSS, kami menggunakan sifat tersuai ini:

b {
  background: oklch(var(--l) var(--c) var(--h) / var(--a));
  grid-column: span var(--gc);
  grid-row: span var(--gr, 1);
}

Mari tambah beberapa warna rawak dalam oklch, menggunakan kaedah pembantu kecil:

const color = () => `--l:${
  random(0, 100)}%;--c:${
  random(0, 0.5)};--h:${
  random(0, 60)};--a:${
  random(0.2, 1)};`

Sekarang kita dapat:

Terima kasih, grid-auto-flow: padat!

Untuk menjadikan perkara lebih dinamik, mari tambahkan transformasi seperti putaran dan penskalaan:

b {
  rotate: var(--r);
  scale: var(--s);
}

Dalam JavaScript, kami menjana nilai transformasi rawak:

const transform = () => 
`--r:${random(-2, 3)}deg;
--s:${random(0.8, 1.2)};`

Jom lihat:

Menarik! Sekarang, untuk meningkatkannya, mari tambahkan beberapa penapis SVG yang hebat.

Dalam JavaScript, kami menambah satu lagi kaedah pembantu kecil untuk memilih penapis rawak setiap -nod:

const filter = () =>
  `--url:url(#${
    [
      "pencilTexture",
      "pencilTexture2",
      "pencilTexture3",
      "pencilTexture4",
    ][Math.floor(random(0, 4))]
  });`

Ini memberi kita:

Kini, dengan hanya melaraskan sifat --w dan bilangan elemen, kami boleh menjana karya seni yang jauh berbeza:

Atau:

Kami juga boleh melaraskan nilai mula dan berhenti dalam kaedah warna:

---

Demo

Berikut ialah demo Codepen. Saya telah menambah kawalan di bawah karya seni, supaya anda boleh mengubah suai sifat dengan mudah:

Atas ialah kandungan terperinci Seni dengan Grid CSS dan penapis SVG. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!