cuaderno de campo

anotaciones

Menú
  • casa
    • cocina
      • pan
      • verdura
    • dinou del carrer nou
    • nadal : una carta
    • plano
  • huerto
    • instrucciones sobre el huerto
    • huerto del año 2022
  • humanidades
    • fonoteca
      • Noches en Poderna
      • El canto de las aves
    • galería
    • mala lluna
    • rutas fuera
    • umbrario
    • El misterio de Sant Mena
  • jardín
    • instrucciones sobre el jardín
    • exterior
    • interior
    • viveros
  • juego
    • listado de juegos
  • 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

  • Blasphematory – The Lower Catacombs (2022) 24 de junio de 2022 Belisario
  • Beats and yelling: Serpent Ascending, Dinbethes, Atramentum 23 de junio de 2022 Hate Meditations
  • Necropolis Podcast #49 – Sleepwalker Pt. II 21 de junio de 2022 Hate Meditations
  • Nocturnus and the death of amateurism 19 de junio de 2022 Hate Meditations
  • Anuario del Center for Fortean Zoology 2022/2023 18 de junio de 2022 Javier Resines
  • I like the beats and I like the yelling: Koldkrypt, Hellevaerder, Magnatar 18 de junio de 2022 Hate Meditations
  • Further excursions into Industrial Black Metal 17 de junio de 2022 Raphael Alecto
  • Atlantean Kodex – The Golden Bough (2010) 17 de junio de 2022 Julio Cesar
  • La Naranja Metálica #067 (6×07) 15 de junio de 2022 Belisario

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