Maison >interface Web >tutoriel CSS >Art avec CSS Grid et filtres SVG

Art avec CSS Grid et filtres SVG

Patricia Arquette
Patricia Arquetteoriginal
2024-12-09 14:52:14934parcourir

Avez-vous déjà exploré la puissance du réseau-auto-flow : dense ? Lorsqu'elles sont combinées avec des valeurs générées aléatoirement (limitées dans une plage définie), vous pouvez utiliser les propriétés de colonne de grille et de ligne de grille pour créer un art sympa basé sur une grille. Allons-y !

Tout d'abord, créons une structure de grille de base :

main {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill,
 minmax(var(--w, 4cqi), 1fr));
}
  • display:grid : établit une disposition de grille CSS.
  • grid-auto-flow : dense : remplit automatiquement les lacunes de la grille en repositionnant les éléments pour minimiser les espaces vides.
  • grid-template-columns : définit une disposition de colonnes réactive. Ici, les colonnes sont créées automatiquement pour remplir l'espace disponible (remplissage automatique), chacune avec une largeur minimale de --w (par défaut à 4cqi) et une largeur maximale de 1fr.

À ce stade, --w n'est pas défini, donc la valeur par défaut (4cqi) est utilisée. Voici à quoi ressemble la grille initiale :

Art with CSS Grid and SVG filters

Ensuite, nous remplirons la grille avec un tas de nœuds . Au fur et à mesure que nous les rendons avec JavaScript, nous ajoutons 2 variables par nœud :

  • --gc : Nombre de colonnes à couvrir.
  • --gr : Nombre de lignes à couvrir.

Voici comment nous générons des valeurs aléatoires en 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))};`

En CSS, nous appliquons ces propriétés personnalisées :

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

Ajoutons également quelques couleurs aléatoires dans oklch, en utilisant une petite méthode d'assistance :

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

Maintenant, nous obtenons :

Art with CSS Grid and SVG filters

Merci, grid-auto-flow : dense !

Pour rendre les choses plus dynamiques, ajoutons des transformations comme la rotation et la mise à l'échelle :

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

En JavaScript, nous générons des valeurs de transformation aléatoires :

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

Vérifions ça :

Art with CSS Grid and SVG filters

Fantastique ! Maintenant, pour passer à la vitesse supérieure, ajoutons quelques filtres SVG sympas.

En JavaScript, nous ajoutons une autre petite méthode d'assistance pour choisir un filtre aléatoire par nœud  :

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

Cela nous donne :

Art with CSS Grid and SVG filters

Maintenant, en ajustant simplement la propriété --w et le nombre d'éléments, nous pouvons générer des œuvres d'art très différentes :

Art with CSS Grid and SVG filters

Ou :

Art with CSS Grid and SVG filters

Nous pouvons également ajuster les valeurs de début et de fin dans la méthode de couleur :

Art with CSS Grid and SVG filters


Démo

Voici une démo de Codepen. J'ai ajouté des contrôles sous l'illustration, afin que vous puissiez facilement modifier les propriétés :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn