Con el paso de los años, CSS se está haciendo cada vez más potente y nos ofrece un abanico infinito de posibilidades. Efectos, animaciones, transiciones… Ya lo vimos con algunos efectos para imágenes en su evento hover
En esta ocasión, vamos a explorar cuatro efectos CSS3 para mejorar los textos de tu web. Estos efectos son muy sencillos de implementar pero darán un toque de estilo y clase a tu página web.
En cada ejemplo voy a dejar dos cosas: el código básico para obtener el efecto y un codepen para que podáis verlo en funcionamiento y experimentar para darle una vuelta y obtener un resultado que os guste más. Si encontráis algún problema o tenéis otros efectos que queráis compartir, dejarlo en los comentarios.
Dicho esto, vamos con los efectos:
1. Efecto degradado y responsive
Este es mi favorito. No solo consigues obtener un efecto original y muy llamativo, sino que son poquísimas líneas de CSS y muy fáciles de recordar. Y, obviamente, 100% responsive.
|
1 2 3 4 5 6 7 |
.text-gradient { background-image: linear-gradient(270deg, #EBC43B 0%, #e10505 90%, #CB6C06); -webkit-text-fill-color: #0000; text-fill-color: #0000; -webkit-background-clip: text; background-clip: text; } |
El código en funcionamiento aquí: https://codepen.io/KidoEstudio/pen/KKYpdRK
2. Efecto degradado solo en el borde
Este otro efecto, al igual que el anterior, da un toque muy diferente a titulares y textos en general, y es ideal para usarlo en temas y sitios oscuros, ya que el color relleno de la fuente y el color de fondo tienen que ser iguales.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
h1 { font-size: 6rem; font-family:'Open Sans', sans-serif; color: #0a0c15; background: linear-gradient( 90deg, #ff6600, #ffcc00, #00ffff, #0033ff ); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0.2rem transparent; text-stroke: 0.2rem transparent; } |
El código en funcionamiento aquí: https://codepen.io/KidoEstudio/pen/abxOvQw
3. Efecto degradado sobre el texto
Al estilo de los periódicos que no te dejan seguir leyendo, sin necesidad de crear una capa y ponerla por encima, puro CSS.
|
1 2 3 4 5 |
span { display: block; -webkit-mask-image: linear-gradient(to bottom, white, transparent); mask-image: linear-gradient(to bottom, white, transparent); } |
El código en funcionamiento aquí: https://codepen.io/KidoEstudio/pen/abxOvVp
4. Efecto texto relleno de agua
Probablemente el efecto donde más exprimamos las opciones de CSS, gracias a las animaciones (@keyframes) y donde obtengamos un resultado más inesperado de tener sin el uso de Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
h1 { font-size: 6rem; font-family:'Open Sans', sans-serif; text-align: center; max-width:600px; margin:0 auto; } h1 span{ background: radial-gradient(93% 83.5% at bottom,#2e3dc7 79.5%,#0000 80%) no-repeat, radial-gradient(93% 83.5% at top ,#0000 79.5%,#2e3dc7 80%) no-repeat, radial-gradient(93% 83.5% at bottom,#2e3dc7 79.5%,#0000 80%) no-repeat, radial-gradient(93% 83.5% at top ,#0000 79.5%,#2e3dc7 80%) no-repeat, radial-gradient(93% 83.5% at bottom,#91fff6 79.5%,#0000 80%) no-repeat, radial-gradient(93% 83.5% at top ,#0000 79.5%,#91fff6 80%) no-repeat, radial-gradient(93% 83.5% at bottom,#91fff6 79.5%,#0000 80%) no-repeat, radial-gradient(93% 83.5% at top ,#0000 79.5%,#91fff6 80%) no-repeat; -webkit-background-clip: text; background-clip: text; color: #0000; -webkit-text-stroke: 0.2rem #2e3dc7; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: first 2s infinite alternate, second 3s infinite linear; } @keyframes first { 0% { background-position: -200% 100%,-100% 100%, 0% 100%,100% 100%, 0% 100%, 100% 100%,200% 100%,300% 100%} 100%{background-position: 0% 100%, 100% 100%,200% 100%,300% 100%, -200% 100%,-100% 100%, 0% 100%,100% 100%} } @keyframes second { 0% {background-size: 50.5% 60%, 50.5% 60%, 50.5% 60%, 50.5% 60%, 50.5% 90%, 50.5% 90%, 50.5% 90%, 50.5% 90%} 33% {background-size: 50.5% 70%, 50.5% 70%, 50.5% 70%, 50.5% 70%, 50.5% 75%, 50.5% 75%, 50.5% 75%, 50.5% 75%} 66% {background-size: 50.5% 55%, 50.5% 55%, 50.5% 55%, 50.5% 55%, 50.5% 80%, 50.5% 80%, 50.5% 80%, 50.5% 80%} 100%{background-size: 50.5% 90%, 50.5% 90%, 50.5% 90%, 50.5% 90%, 50.5% 95%, 50.5% 95%, 50.5% 95%, 50.5% 95%} } |
El código en funcionamiento aquí: https://codepen.io/KidoEstudio/pen/eYoNpqg
