Las olas son diseños simples que se pueden generar en una página HTML que mejora el aspecto general del sitio web y lo hace más atractivo y de diseño. Estas ondas se pueden utilizar para diseñar el fondo de las páginas de destino, las imágenes, los botones de respuesta, los productos y las áreas de las páginas web con la ayuda de CSS y HTML. Puede haber una onda estática o una onda animada que se refiera a las preferencias.
Las ondas se pueden crear de dos formas:
Pros y contras: El método selector ::before and ::after pide ubicaciones de píxeles exactas y así obtenemos la onda dinámica y los patrones de la onda siguen cambiando. Considerando que, los SVG son la forma más optimizada de mostrar olas en la página web. Genera rápidamente patrones ondulados de apariencia uniforme para los sitios web.
Código HTML: el siguiente ejemplo demuestra cómo diseñar una onda SVG.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
overflow: hidden;
}
svg {
display: inline-block;
position: absolute;
top: 0;
left:0;
z-index: -1;
}
.container {
display: inline-block;
position: absolute;
width: 100%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
top: 0;
left: 0;
}
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:lawngreen;">
Geeks For Geeks
</h1>
<div class="container">
<!-- Creating a SVG image -->
<svg viewBox="0 0 500 500"
preserveAspectRatio="xMinYMin meet">
<path d="M0, 100 C150, 200 350,
0 500, 100 L500, 00 L0, 0 Z"
style="stroke:none; fill:purple;">
</path>
</svg>
</div>
</body>
</html>
Producción:
Onda generada