Blob sans aucun SVG
Gratuit, sans inscription, fonctionne dans votre navigateur.
Quand vous voulez une forme organique mais ne pouvez pas — ou préférez ne pas — ajouter de SVG : une bibliothèque de composants dont vous ne maîtrisez pas le balisage, un gabarit d'e-mail, un bloc de CMS qui supprime les éléments inconnus.
La recette
| Forme | Galet |
|---|---|
| Exporter en | border-radius CSS |
| Taille | 104 B |
Étape par étape
- Passez au générateur de blobs et choisissez Galet.
- Choisissez border-radius CSS dans la rangée d'exports.
- Copiez la déclaration sur n'importe quel élément qui a déjà une largeur et une hauteur.
- Ajustez l'irrégularité et recopiez jusqu'à ce que la silhouette convienne — il n'y a que quatre coins pour travailler.
Ce que vous allez copier
.blob {
width: 320px;
height: 320px;
border-radius: 46% 52.2% 40.5% 40% / 49.8% 56.1% 39.1% 45%;
}Plus en détail
Sachez à quoi vous renoncez. Un blob en border-radius a quatre coins, chacun un quart d'arc elliptique : il ne peut donc être qu'un rectangle arrondi déformé — il ne peut pas avoir six lobes, quels que soient les nombres choisis. Ce que vous obtenez en échange est réel : une propriété, aucun balisage supplémentaire, et il se transitionne et s'anime en douceur, ce qu'un tracé SVG ne fait pas sans un travail nettement plus important.
Questions
De quelle forme partir pour Blob sans aucun SVG ?
Galet, exportée en border-radius CSS. C'est le couple autour duquel cette page est construite, et l'aperçu ci-dessus est exactement cette forme — mais c'est un point de départ, pas une règle. Tous les curseurs restent actifs dès que vous l'ouvrez.
Combien cela ajoute-t-il à la page ?
Environ 104 octets pour cette combinaison. C'est moins qu'une seule icône et cela ne demande aucune requête réseau, puisque la forme est du balisage et non un fichier image.
Est-ce que ça marchera sur mobile ?
Oui. Un séparateur en vague est réglé pour s'étirer à son conteneur plutôt que conserver ses proportions, et c'est ce qui permet à une seule forme de couvrir n'importe quelle largeur d'écran sans bandes noires. Les blobs gardent leurs proportions, puisqu'un blob étiré n'est qu'une ellipse.
Chaque chiffre et chaque forme de cette page ont été produits en exécutant le générateur au moment de la compilation : ils décrivent donc l'outil que vous vous apprêtez à utiliser, et non une version qui a existé un jour.