texto transparente de forma gradual

Posted on by ernesto

HTML

<div class="prosa">
     
<h3>3 de noviembre de 1985</h3>
     
<p>Empezaron  por recuperar los sábados tarde y acabaron por ponerle a trabajar en el  turno de los domingos por la noche. En cuestión de tres o cuatro años,  le habían quitado los fines de semana junto a su familia (en aquellas  fechas, mujer y dos hijos) y...</p>
     
</div>

CSS

texto transparente con fondo de color

div.prosa
{
     background: linear-gradient(to bottom, rgba(17, 17, 34, 1) 66%, rgba(17,17,34,0) 100%);
     background-clip: text;
     color: transparent;
}

en este caso, la clase .prosa aplica el color transparente al texto (color: transparent) y genera una gradación de fondo (background) que va del color #112 con opacidad 1 al #112 con opacidad 0: de rgba(17, 17, 34, 1) a rgba(17, 17, 34, 0). la clave está en la propiedad background-clip, que únicamente aplica la gradación de fondo al texto.

esta clase funciona bien en firefox versión 70.0b11. en chrome (versión 77.0.3865.90), necesita el prefijo -webkit- en el atributo background-clip para funcionar:

-webkit-background-clip: text;

pero el uso de prefijos para el desarrollo (como -webkit-) está fuertemente desaconsejado en la fase de producción (que es la parte que se publica). tampoco se aconseja el diseño de clases para navegadores específicos (firefox, en este caso):

@-moz-document url-prefix()
{
  div.prosa,
  div.verso
  {
    background:linear-gradient(to bottom,rgba(17,17,34,1) 66%,rgba(17,17,34,0) 100%);
    background-clip:text;
    color:transparent;
  }
 }

capa transparente por encima del texto

div.titulo
{
     position: relative;
}
div.prosa:before
{
     background: linear-gradient(to bottom, rgba(255,255,255,0) 75%, rgba(242,242,242,0.4) 100%);
     content: "";
     height: 100%;
     pointer-events: none;
     position: absolute;
     width: 100%;
}

en este otro caso, se genera mediante CSS una capa por encima del texto (div.prosa:before) cuyo fondo (background) se cubre gradualmente de blanco: de rgba(255,255,255,0) a rgba(242,242,242,0.4). el atributo pointer-events con valor none permite que el texto debajo de la capa div.prosa:before se pueda seleccionar como si no tuviera nada encima.

Tagged , , ,