Transition entre deux sections
Gratuit, sans inscription, fonctionne dans votre navigateur.
Là où deux sections de couleurs différentes se rejoignent au milieu d'une page. Les couches travaillent davantage ici qu'ailleurs, parce qu'il y a deux couleurs à concilier et non un bord à décorer.
La recette
| Forme | Vagues superposées |
|---|---|
| Exporter en | Arrière-plan CSS |
| Taille | 1 071 B |
Étape par étape
- Choisissez Vagues superposées pour obtenir plusieurs courbes d'une même graine.
- Réglez les deux couleurs sur celles des sections du dessus et du dessous.
- Exportez en Arrière-plan CSS et appliquez-le à un div vide et court entre les deux sections.
- Donnez à ce div une hauteur fixe — une image de fond n'a pas de hauteur intrinsèque pour la lui donner.
Ce que vous allez copier
.shape {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M-288 95.89C-240 100.43,-96 109.48,0 123.14C96 136.8,192 170.05,288 177.86C384 185.66,480 180.48,576 169.98C672 159.48,768 126.46,864 114.84C960 103.23,1056 95.46,1152 100.31C1248 105.15,1392 136.65,1440 143.92L1440 320L-288 320Z' fill='%23a5b4fc' opacity='0.35'…Plus en détail
Le div vide est la partie à ne pas rater. Une `background-image` ne dimensionne pas son propre élément : un div sans hauteur est donc un div sans forme à l'intérieur — la raison la plus fréquente pour laquelle cette recette semble ne rien faire. Donnez-lui une hauteur dans les mêmes unités que le reste de vos espacements et mettez `background-size: cover` pour que la forme le remplisse à toute largeur.
Questions
De quelle forme partir pour Transition entre deux sections ?
Vagues superposées, 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 1 071 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.