cuaderno de campo

anotaciones

Menú
  • casa
    • dinou del carrer nou
  • cocina
    • pan
    • repostería
    • verdura
  • huerto
    • plano del número 29
    • huerto del año 2023
  • humanidades
    • fonoteca
    • galería
  • juego
    • lista de juegos
    • recalbox en rpi 3
    • dosbox
  • linux
    • bash
    • sistema operativo
    • ssh
  • web
    • apache
    • css
    • html5
    • javascript
    • mysql
    • php
Menú

texto transparente de forma gradual

Publicado 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

  • Review – Tonight it’s a World We Bury 29 de mayo de 2023 Hate Meditations
  • Necropolis #67 – Damim 29 de mayo de 2023 Hate Meditations
  • Sadistic Metal Reviews: Covert Dualism Propaganda Edition 28 de mayo de 2023 Brett Stevens
  • Beats and yelling from: Kostnatění, Sporae Autem Yuggoth, KRE^U 26 de mayo de 2023 Hate Meditations
  • Conjureth – The Parasitic Chambers (2023) 24 de mayo de 2023 Belisario
  • Hessian Scrum: Justin Vølus (Vargheist records, Vølus, Psionic Madness etc) 23 de mayo de 2023 hessianfirm
  • Beats and yelling from: Hail Conjurer, Hasard, Martre 21 de mayo de 2023 Hate Meditations
  • Cadaver Releases Modern Metal Hit “The Age of the Offended” 19 de mayo de 2023 Brett Stevens
  • Review – Black Metal Rainbows 18 de mayo de 2023 Hate Meditations

Categorías

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

Archivo

cuaderno de campo 2011-2023