Modèles d’image dans Tailwind et SVG

La création de formes en HTML est devenue plus facile avec Tailwind et SVG. Nous allons jeter un coup d’oeil!

Si vous souhaitez créer des formes sympas en HTML, vous vous demandez peut-être comment le faire et quoi utiliser. En CSS, la création de ces formes est devenue plus facile, mais vous pouvez désormais créer de véritables images SVG qui évoluent facilement.

Prenons quelques cas d’utilisation courants afin que vous puissiez créer le vôtre. Je ne couvrirai que Tailwind et non le CSS standard. Cependant, j’ai ajouté des plugins Tailwind pour quelques-unes des formes.

Pour ces exemples SVG, j’utilise un standard svg avec le code le moins nécessaire. Il y a un width et height et non viewBox pour la simplicité.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
...
</svg>

Rectangle

Un rectangle est la forme la plus simple à créer. Rappelez-vous un carré est un rectangle de toutes tailles égales, et un doubler n’est en réalité qu’un rectangle, car une ligne a finalement une largeur.

Vent arrière

Créez un div avec une largeur, une hauteur et un arrière-plan. C’est ça.

<div class="h-60 w-32 bg-blue-700"></div>

SVG

Entrez simplement le début x et y les coordonnées et les width et height dans le rect bloc. Lorsque vous souhaitez qu’il remplisse tout l’élément, vous pouvez simplement définir le SVG lui-même sur la largeur et la hauteur souhaitées tout en conservant le rect largeur et hauteur à 100%.

<svg xmlns="http://www.w3.org/2000/svg" width="128" height="240">
  <rect x="0" y="0" width="100%" height="100%" fill="#1d4ed8" />
</svg>

Cercle

Un cercle, comme nous le savons, est arrondi de tous côtés.

Vent arrière

Pour un cercle simple, vous utilisez le rounded-full propriété, qui n’est qu’un border-radius mis à 9999px. Ici, j’utilise le size propriété, qui définit simplement la largeur et la hauteur à la même valeur pour un cercle égal.

<div class="rounded-full bg-purple-700 size-96"></div>

SVG1

Pour les SVG, nous réalisons le width et height 384 pour faire correspondre les pixels dans size-96 de vent arrière. Nous utilisons le circle élément avec cx et cy étant la position de départ, et r étant le rayon.

<svg xmlns="http://www.w3.org/2000/svg" width="384" height="384">
  <circle cx="192" cy="192" r="192" fill="#7e22ce" />
</svg>

SVG2

Nous pouvons obtenir les mêmes résultats en arrondissant simplement un rectangle. Encore une fois, les positions de départ à x et yil faut préciser le width et heightet nous avons besoin d’un rayon d’au moins la moitié de la taille.

<svg xmlns="http://www.w3.org/2000/svg" width="384" height="384">
  <rect x="0" y="0" width="100%" height="100%" rx="192" fill="#7e22ce" />
</svg>

Stade

Un stade, ou une forme de pilule, est essentiellement un cercle coupé en deux placé aux extrémités d’un rectangle.

Vent arrière

Ici, nous prenons simplement ce arrondi divet faire le hauteur et largeur des tailles différentes.

<div class="h-60 w-32 rounded-full bg-green-800"></div>

SVG

Maintenant, nous utilisons le rect avec différent largeur et hauteur. Le rx doit être la moitié de la largeur pour des extrémités parfaitement arrondies.

<svg xmlns="http://www.w3.org/2000/svg" width="128" height="240">
  <rect x="0" y="0" width="128" height="240" rx="64" fill="#166534" />
</svg>

Ellipse

Une ellipse est un cercle allongé.

Vent arrière

La version Tailwind nécessite une valeur de rayon de bordure personnalisée de 50% / 50%. Ceci définit le x et y courbure à exactement la moitié de sa valeur, pour une forme circulaire parfaite. Nous aurions également pu simplement saisir avec quoi correspondent 50 % des valeurs. rounded-[128px_/_64px].

<div class="bg-blue-500 w-64 h-32 rounded-[50%_/_50%]" ></div>

SVG

Le SVG a un élément pour cela. Nous définissons la largeur et la hauteur, puis utilisons également 50 % des valeurs.

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="128">
  <ellipse cx="128" cy="64" rx="128" ry="64" fill="#3b82f6" />
</svg>

Ou si nous voulons qu’il soit mis à l’échelle, dans ce cas, notre largeur SVG change :

<ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="#3b82f6" />

Triangle

Un triangle est un polygone à trois côtés.

Vent arrière

Le triangle en CSS est en fait la manière dont fonctionne une bordure en CSS. En gros, vous affichez simplement l’un des trois bords de bordure. Voir Triangle CSS et Comment créer des triangles dans Tailwind.

Dans ce cas, nous avons choisi la bordure inférieure.

<div class="
  border-l-[150px] border-l-transparent
  border-b-[200px] border-b-yellow-500
  border-r-[150px] border-r-transparent"
></div>

Ou vous pouvez utiliser le clip-path:polygon propriété en CSS. Ici, l’entrée est simplement constituée de groupes de points de connexion basés sur le pourcentagescontrairement au SVG basé sur les points cartésiens.

<div
  class="
    w-[300px]
    h-[200px]
    bg-yellow-500
    [clip-path:polygon(50%_0%,_0%_100%,_100%_100%)]"
></div>

Vous pouvez également installer le plugin tailwind-clip-pathmême si je ne suis pas sûr que cela vous fasse économiser beaucoup.

<div
  class="
    w-[300px]
    h-[200px]
    bg-yellow-500
    clip-path-polygon-[50%_0%,_0%_100%,_100%_100%]"
></div>

SVG

Désormais, la version SVG utilise un polygone. Vous connectez simplement trois points de l’avion et vous les remplissez. Encore une fois, cela n’est pas basé sur des pourcentages.

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <polygon points="0,200 150,0 300,200" fill="#eab308" />
</svg>

Pente

Un dégradé est le passage d’une couleur à une autre.

Vent arrière

Enfin, nous pouvons facilement obtenir un dégradé dans Tailwind en utilisant le bg-gradient propriété.

Note: Le Plugin de dégradé conique Tailwind a des effets plus sympas que vous pouvez ajouter si vous souhaitez aller plus en profondeur.

<div class="size-96 bg-gradient-to-r from-blue-800 to-blue-950" />

SVG

Ici, nous définissons les deux couleurs que nous voulons du début à la fin dans un linearGradient définition, puis insérez-le dans un rect objet. Bien que cela ne soit pas aussi simple, le modèle est exactement le même. Vous pouvez en constater la puissance si vous continuez à descendre dans le terrier du lapin. Tu devrais consulter le Application Haikei si vous voulez voir ce que SVG peut faire.

<svg width="384" height="384" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#1e40af" />
      <stop offset="100%" stop-color="#172554" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
</svg>

Qu’avons-nous appris ?

Tout n’est pas plus simple en CSS ou SVG. Cela dépend. Certaines formes peuvent être meilleures dans l’une ou l’autre, mais elles ont toutes deux leurs angles morts et leurs lumières brillantes. Cela ne fait qu’effleurer la surface de ce qui est possible. Utilisez ces modèles avec chevauchement pour créer quelque chose de beau dans votre HTML.