Transición entre dos secciones
Gratis, sin registro, funciona en tu navegador.
Donde dos secciones de colores distintos se encuentran en mitad de una página. Las capas trabajan más aquí que en ningún otro sitio, porque hay dos colores que reconciliar y no un borde que decorar.
La receta
| Forma | Ondas en capas |
|---|---|
| Exportar como | Fondo CSS |
| Tamaño | 1071 B |
Paso a paso
- Elige Ondas en capas para obtener varias curvas de una misma semilla.
- Pon los dos colores a los colores de las secciones de arriba y de abajo.
- Exporta como Fondo CSS y aplícalo a un div vacío y corto entre las dos secciones.
- Dale a ese div una altura fija: una imagen de fondo no tiene altura intrínseca que se la dé.
Lo que vas a copiar
.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'…Con más detalle
El div vacío es la parte que conviene hacer bien. Una `background-image` no dimensiona su propio elemento, así que un div sin altura es un div sin forma dentro — el motivo más común de que esta receta parezca no hacer nada. Dale una altura en las mismas unidades que el resto de tu espaciado y pon `background-size: cover` para que la forma lo llene a cualquier ancho.
Preguntas
¿De qué forma debería partir para Transición entre dos secciones?
Ondas en capas, exportada como Fondo CSS. Esa combinación es la que vertebra esta página, y la vista previa de arriba es exactamente esa forma — pero es un punto de partida, no una regla. Todos los controles siguen activos en cuanto la abres.
¿Cuánto añade a la página?
Unos 1071 bytes para esta combinación. Es menos que un solo icono y no necesita ninguna petición de red, porque la forma es marcado y no un archivo de imagen.
¿Funcionará en móvil?
Sí. Un divisor de onda está configurado para estirarse hasta su contenedor en lugar de mantener su proporción, que es lo que permite que una sola forma cubra cualquier ancho de pantalla sin bandas negras. Los blobs mantienen sus proporciones, porque un blob estirado no es más que una elipse.
Cada cifra y cada forma de esta página se produjeron ejecutando el generador durante la compilación, así que describen la herramienta que estás a punto de usar y no una versión que existió una vez.