Hoy voy a escribir sobre un efecto curioso que se me ocurrió jugando con los pseudoelementos. Se trata de conseguir que un texto de la impresión de desaparecer gracias a un gradiente hecho con CSS.

El efecto es simple y consiste en lo siguiente:

.texto-gradiente {
   position: relative;
}
.texto-gradiente:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #ffffff));
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), #ffffff);
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), #ffffff);
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0), #ffffff);
    background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
    pointer-events: none; /*Para permitir la selección del texto*/
}

El ejemplo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada sodales sem, et condimentum nisi interdum tincidunt. Suspendisse facilisis tristique pharetra. Quisque ornare tempor metus, a semper tortor tempor vitae. Nulla vehicula, massa vel viverra consequat, leo metus rutrum libero, in semper turpis ligula vitae urna. Aenean sed velit eu mauris suscipit bibendum. Nullam lacinia lacus et felis tincidunt dapibus. Quisque ac dui non magna mattis egestas. Aenean dictum consectetur nisi ut facilisis. Nulla ut diam id orci sagittis dictum.

Dónde usarlo

Obviamente, este efecto impide la legibilidad de la última línea, por lo que no es muy bueno si nos interesa que se lea completamente… No obstante no me parece mala idea para los resúmenes (sólo tendríais que cambiar .texto-gradiente por .resumen).

Por último tened en cuenta que esto sólo funcionará en los navegadores modernos, y que si usáis un color de fondo distinto del blanco tendréis que adaptar los colores del gradiente (el segundo es el color de fondo, y el primero es el color de fondo en rgba con la opacidad a 0).