Saltar al contenido

cuaderno de campo

anotaciones

Menú
  • casa
    • dinou del carrer nou
  • cocina
    • pan
    • repostería
    • verdura
  • huerto
    • instrucciones sobre el huerto
    • plano del número 29
    • huerto del año 2025
  • humanidades
    • fonoteca
    • galería
  • juego
    • colección de roms
    • steamos en steam deck
    • lista de juegos
    • dosbox
  • linux
    • bash
    • sistema operativo
    • ssh
  • web
    • apache
    • css
    • html5
    • javascript
    • mysql
    • php
Menú

texto transparente de forma gradual

Publicada el 6 de octubre de 201926 de febrero de 2021 por ernesto
  • HTML
  • CSS
    • texto transparente con fondo de color
    • capa transparente por encima del texto

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.

Etiquetado como background, background-clip, linear-gradient, pointer-events
  • Tratamiento de texto con herramientas en línea

    Mediante el empleo de herramientas indexadas en el directorio DiRT, procedo al tratamiento en tres…

  • masonería con css

    Puesto al día el 29 de abril de 2020. html <main class="masoneria"> <div class="titulo"> <h3>Título…

  • tilde sobre cualquier letra

    escríbase cualquier letra: q luego, con el cursor junto a la letra (puesto a su…

RSS rutas fuera

Categorías

apache bash casa cocina corral css fonoteca galería html5 huerto humanidades humanidades digitales jardín javascript juego linux mysql pan php repostería Sin categoría sistema operativo ssh verdura web

Archivo

cuaderno de campo 2011-2025