Aquí estoy de nuevo, con una página, en la que voy a tratar de mostraros, el poder, de las propiedades de CSS, transition, animation y transform, en este caso, aplicadas, sobre el texto y usándo el selector :hover, ya sabeís, cuando posamos el ratón sobre el.
Solo CSS
Solo CSS
Perspectiva
Perspectiva
Efecto de Texto
Efecto de Texto
por
por
José
José
Juanas
Juanas
En este primer ejemplo que os muestro, la estructura del html, es muy simple, consiste en un <div> que contiene una lista, y cada elemento <li> de la lista, esta compuesto por dos <p>.
El truco, para conseguir el efecto que veís, consiste en que visualizamos, uno de los párrafos y por medio, de la propiedad transform, acabamos viendo el segundo párrafo
A continuación, tenemos una cabecera, compuesta unicámente, de un elemento <a>, adornado con pseudo-elementos ::before y ::after, que cambia totalmente, en el hover, mediante la propiedad transform y la propiedad animation, que en este caso, anima el box-shadow, es decir la sombra. Se consigue un efecto, que parezca que se ha aplicado un filtro.
A continuación os presento una serie de efectos sobre texto ó iconos, ideas que he sacado, a base de años de prácticar con el CSS, pero confieso que no todas son ideas propias, las he cogido de estudiar, efectos, que me han gustado, viendo páginas y exáminandolas, con el dev tool, del navegador, ya sabes, lo que siempre recomiendo, click derecho y ver código fuente de página.
Aquí hay un icono de awesome, contenido en un enlace, usándo los pseudo-elementos ::after y ::before, combinado con una transformación del width del borde, osea el ancho, creamos, ese efecto marco, en el :hover.
Esta que sigue, es similar, empleando pseudo-elementos, pero en este caso, lo que animamos, es la propiedad background-image y la background-position.
En esta animación, empleó la propiedad clip-path, de CSS, que nos sirve para efectuar recortes con distintas formas geométricas, como poligónos. Conseguimos en el :hover, pasar de un montecito, a una grán cordillera.
Esta que sigue, a mi me gusta especialmente, y es igual de sencilla, cabe decir, que para que la propiedad transform se produzca gradualmente, con un tiempo, debe de ir precedida de una transition y así es como conseguimos este bonito efecto de eclipse lunar.
Para este efecto, la estructura html, es un <a>, con varios <divs> anidados y como con las anteriores jugando con los pseudo-elementos, e incorporándo transition-delay, osea un retardo, entre las transiciones, se consigue el efecto de aparición escalonada de los adornos.
Seguimos, con otra, que es sencillamente, un background-image, animado con la propiedad transform: rotate(); y la opacidad, osea opacity.
En este efecto, animo de nuevo la propiedad CSS clip-path, son dos poligonos animados que a se asemejan, a las alas de un pájaro ó también puede parecer, un banderín, azotado por el viento.
Para ir concluyendo, para este efecto, he preparado un <a>, con un atributo data y dos <div> vacios anidados. Y ya imaginaís que mediante los pseudo-elementos ::before y ::after y cuando haces :hover en el enlace, se produce la aparición gradual de los <div>, que son los bordes, superior e inferior, y del atributo data, que es la segunda parte de la famosa cuestión de Descartes. Bonito ¿no?.
Ya si que para terminar, os dejo una fántastica animation, de una SVG ó imágen vectorial, que por si no lo sabeis, son imágenes totalmente escalables, sin temor a que se pixelen, altamente animables, mediánte sus propiedades stroke-dashoffset y stroke-dasharray y que pesan, mucho menos, que otros formatos de imágen, se anima como el resto en el selector :hover, espero que os guste.
Espero, haber dejado claro, las grandes posibilidades, de CSS, para aportar dinámismo, a nuestras páginas, sin necesidad de javascript, pero, por supuesto que combinado, con este lenguaje de programación, es aún mejor.
Gracias por leer, por la visita y como siempre digo, si te ha gustado alguno de los efectos, ó tienes alguna sugerencia que hacerme, agradecería tu contacto. Hasta la próxima.
