Blob derrière une carte
Gratuit, sans inscription, fonctionne dans votre navigateur.
Un blob placé derrière une carte ou un bloc de texte, comme de la couleur et non comme une forme que l'on est censé regarder directement. L'usage le plus indulgent pour un blob, et celui où un préréglage presque circulaire fonctionne le mieux.
La recette
| Forme | Blob doux |
|---|---|
| Exporter en | Arrière-plan CSS |
| Taille | 491 B |
Étape par étape
- Choisissez Blob doux — la faible irrégularité reste discrète derrière le contenu.
- Prenez une couleur proche du fond de votre page, à un ton ou deux d'écart.
- Exportez en Arrière-plan CSS et appliquez-le au conteneur de la carte lui-même.
- Utilisez `background-position` pour le décentrer — un blob centré a l'air d'une erreur.
Ce que vous allez copier
.shape {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 33.65C118.88 33.14,151.1 49.98,159.29 65.77C167.49 81.56,159.05 113.2,149.17 128.39C139.29 143.58,116.48 156.87,100 156.92C83.52 156.98,59.27 143.39,50.27 128.71C41.27 114.03,37.71 84.67,46 68.82C54.29 52.98,81.12 34.16,100 33.65Z' fill='%234f46e5'/%3E%3C/svg%3E");
background-repeat…Plus en détail
Gardez un contraste faible. Un fond décoratif qui rivalise avec le texte posé devant échoue deux fois : il distrait, et il entraîne avec lui le rapport de contraste du texte. Si vous ne pouvez pas lire la carte confortablement avec le blob derrière, c'est le blob qui est trop sombre, pas le texte qui est trop clair.
Questions
De quelle forme partir pour Blob derrière une carte ?
Blob doux, exportée en Arrière-plan 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 491 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.