Vamos a hacer este efecto tan chulo de olas dentro de unas letras con HTML y CSS y paso a paso.
Vamos a verlo. Lo primero que necesitamos es un elemento H2 y dentro ponemos Wabi.
Vamos a ponerle la clase Border y vamos a poner otro igual, pero vamos a tener aquí la clase Wave.
Vamos con los estilos de CSS. Primero con el Body. En el Body vamos a ponerle el PhoneFamily, SystemUI.
Vamos a poner que el Background Color sea Black. Vamos a poner también un Display Flex.
Esto va a ser para centrarlo. La altura con todo el Viewport, la anchura con todo el Viewport de ancho y de alto.
Y ahora nos faltaría centrarlo. Vamos a utilizar Align Items en el Center y Justify Content en el Center.
No aparece nada, pero si selecciono debe estar ahí en medio. Ahí lo tenemos.
Voy a hacer un CSS Reset bastante warro con el Bargin a 0 y Padding a 0 para quitar los Scrollbars por si acaso.
Y ahora vamos a estirar los H2 que hemos puesto ahí. Vamos a ponerle un PhoneSize de Rems, por ejemplo, y Position Absolute.
De esta forma se va a poner uno encima del otro.
Como vemos ahora mismo, pues no se ve. Tenemos que seleccionarlo para verlo.
Vamos a simularle el borde de la fuente. Para ello vamos a utilizar el ClassName de Border, ponemos ColorBlack para asegurarnos que va a seguir con la fuente en negro.
Y para simular el borde vamos a utilizar el TextShadow. ¿Y cómo lo vamos a hacer? Esto es bastante interesante.
Menos un píxel, esto sería el Offset del eje X.
Luego para el eje Y, menos un píxel. Y del borde de Radius vamos a poner 0.
Le vamos a poner White y ya tenemos 1. Tenemos que seguir haciendo esto justamente para simularlo por todos los lados.
¿Cómo lo hacemos? Pues nada, seguimos el X.
En lugar de poner aquí punto y coma para terminar, le ponemos una coma para poner otro TextShadow.
Y aquí ponemos 1 píxel menos 1 píxel 0, White.
Y poco a poco vamos haciéndolo en diferentes ejes.
Ahora también deberíamos hacerlo 1 píxel, 1 píxel 0, White.
Y nos faltaría uno que sería menos 1 píxel, 1 píxel 0, White.
Y con esto, fíjate que ya lo tenemos.
Voy a hacer más grande esto. Vamos a ponerlo a 5 Rem.
O 7 Rem. Bueno, me he pasado ahí.
7 Rem, ¿vale? Para que se vea mejor el efecto.
Ahora lo que nos faltaría es estilar lo que son las olas.
Así que vamos a poner aquí el Wave. Voy a dejar esto para abajo para que se vea bien.
Wave. Voy a poner que sea del color, hombre, del mar.
No te preocupes que ahora queda todo, pero esto lo vamos a arreglar.
Porque lo vamos a poner en una animación y utilizando el ClipPath lo vamos a cortar.
La animación la vamos a llamar también Wave.
Le vamos a poner que dure 3 segundos.
Y que sea IsInOut y esto sea infinito.
Esta será la transición que tenga la animación.
Y lo que hará es que vaya como más fino al principio y también al final de la animación.
Ahora vamos a hacer la animación.
Utilizamos el Keyframes con el Wave.
Y aquí está la magia y aquí es donde está lo realmente complicado.
Vamos a utilizar, vamos a decir que en el punto 0 y en el punto 100% de la animación,
o sea, nada más empezar y cuando termine, ¿qué es lo que tiene que tener?
Pues tiene que tener una propiedad ClipPath.
Y aquí le tenemos que indicar que, bueno, le podemos decir una forma porque podemos utilizar un Cycle, un Elipse,
le podemos decir un Polígono y es lo que vamos a utilizar, un Polígono.
Porque le tenemos que indicar como la forma de la ola.
La idea al crear este Polígono es que vamos a ocultar trozos del interior, de lo que está en azul.
Y de esta forma es que vamos a simular justamente esta forma de olas.
Vamos a poner lo que sería generar este Polígono rápidamente.
Para que entiendas bien cómo funciona lo que acabamos de crear con el Polígono.
Lo que estamos haciendo aquí es indicarle los puntos para crear el Polígono.
Le estamos poniendo aquí, este sería como el primer vector, el segundo vector, tercer vector, cuatro vector.
Y al final crea este Polígono, que esta sería el área visible.
Lo que estamos haciendo es crear una área que queda visible y de esta forma es que estamos simulando las olas dentro del texto.
Y ya tenemos como la forma de la ola.
Ahora solo nos queda pues rematar la animación.
Para eso vamos a añadir otro punto que sea en el 50%.
Y vamos a dejar aquí bastante espacio.
Y ponemos otro Clip Path.
Utilizamos el Polígono.
Y volvemos a hacer la operación de poner los diferentes puntos donde queremos que sea visible el contenido.
Y con esto pues ya tenemos este pedazo de animación.
La animación la he sacado de este artículo de Ale Zomas.
Y aquí te lo voy a dejar en la descripción del vídeo.
Tienes toda la explicación en inglés por si quieres revisarla.
Es muy interesante porque con unas pocas líneas de código, fíjate que animación más chula hemos hecho.
Como si fuese olas dentro.
Además lo puedes intentar tunear si quieres.
También te voy a dejar el enlace de este código por si quieres juguetear un poquito con ello.
Pero aquí la autora de esta maravilla es la buena persona esta de Ale Zomas.
Una mexicana que hace verdaderas barbaridades.
Así que si quieres leerte el artículo no te lo pierdas.
Espero que te haya gustado.
Nos vemos en el siguiente.
Chao.