Maison >interface Web >tutoriel CSS >Art avec CSS Grid et filtres SVG
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)); }
À ce stade, --w n'est pas défini, donc la valeur par défaut (4cqi) est utilisée. Voici à quoi ressemble la grille initiale :
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 :
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 :
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 :
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 :
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 :
Ou :
Nous pouvons également ajuster les valeurs de début et de fin dans la méthode de couleur :
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!