Trois façons de bloquer avec CSS et SVG

Des taches - ces formes lisses et organiques - ajoutant une touche ludique à la conception Web, parfaite pour les illustrations et les effets de fond. Bien que le logiciel d'illustration soit une option, explorons le plaisir de créer des blobs à l'aide de CSS et SVG.

Voici trois approches:

1. Cercles SVG et ellipses

La méthode la plus simple implique des cercles et des ellipses qui se chevauchent dans SVG. SVG<circle></circle> L'élément est simple:

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

• cx et cy : Définissez les coordonnées du centre du cercle.
• r : Spécifie le rayon.
• fill : Définit la couleur de remplissage.

Plusieurs cercles qui se chevauchent créent un blob de base:

<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>

Pour plus de variété, utilisez<ellipse></ellipse> Pour contrôler les rayons horizontaux et verticaux indépendamment:

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

Bien que simple, cette méthode pourrait manquer de la sensation organique des vrais blobs.

Alternativement, pour les cercles de base, CSS peut suffire:

 .cercle {
  Border-Radius: 50%;
  hauteur: 50px;
  Largeur: 50px;
}

2. Chemins SVG pour des formes complexes

Pour les conceptions complexes de blob, SVG<path></path> L'élément offre un contrôle ultime. Il permet des lignes et des courbes de dessin à l'aide de commandes comme:

• M : Passez à un point.
• L : tracer une ligne.
• C : Dessinez une courbe de Bézier cubique.
• Z : Fermez le chemin.

Une explication détaillée de ces commandes peut être trouvée dans le guide complet de Chris Coyier. La création de chemins complexes peut être fastidieux, alors envisagez d'utiliser des outils pour générer les données de chemin. Par exemple:

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

Ce chemin commence à (10, 10), se courbe à (50, 10) et ferme la forme.

3. Filtres CSS et SVG pour les effets gluants

Cette technique exploite les filtres SVG pour créer un effet "gluant" à partir de formes qui se croisent. Nous utiliserons deux rectangles qui se chevauchent avec transparence, puis appliquer des filtres SVG pour le flou et la manipulation des couleurs.

Les filtres SVG sont définis en utilisant<filter></filter> et appliqué via 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>

Le feGaussianBlur brouille la forme et feColorMatrix ajuste la couleur. Le filtre est ensuite référencé en CSS:

 .blob-container {
  Filtre: URL ("# goo");
  / * ... autres styles ... * /
}

Cette approche offre un effet Blob gluoy unique et facilement personnalisable. Expérimentez avec différentes valeurs de filtre pour atteindre l'aspect souhaité.

N'oubliez pas d'ajuster les valeurs et les paramètres pour affiner la forme et l'apparence de vos blobs dans chaque méthode.

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!