4 efectos con CSS3 para los textos de tu web

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.

.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.

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.

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

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