Hoy quiero compartir un efecto que utilizado recientemente para un proyecto para una empresa de deporte y aventura. Para ello vamos aplicar la propiedad transform de CSS y distorsionaremos titulares y textos.
Es muy sencillo y que le da un toque diferente y urbano a cualquier cabecera.
También he añadido dos animaciones con la que modificamos la posición, opacidad y desenfoque de ambos textos.
Podéis ver el ejemplo completo y funcionando en esta url:
https://www.antofernandez.com/demos/texto-efecto-distorsion/
Código CSS para distorsionar textos
|
1 |
.titulo-content{ transform: skewY(-12.5deg) scaleX(0.78) translateY(-10%); } |
Tipografías responsive
Para este efecto he utilizado como unidad de medida para los tipos «wv» ( viewport width ) en lugar de pixeles o porcentajes. ¿Que ventaja tiene esta unidad de medida? Principalmente lo que vamos a conseguir es que el tamaño de los textos se adapte automáticamente al ancho del monitor o resolución donde estamos viendo nuestra web.
0 comentarios