Capítulo 11. Fondos, Sombras y Modos de Fusión

11.1. GRADIENTES

A medida que lo ha estado siguiendo, hemos utilizado fondos de colores sólidos y algunas imágenes de fondo en capítulos anteriores. Pero hay mucho más por explorar cuando se trata de la propiedad de fondo; de hecho, es una abreviatura de ocho propiedades:

• background-image: especifica una imagen de un archivo o un degradado de color generado.
• background-position: establece la posición inicial de la imagen de fondo.
• background-size: especifica el tamaño de la imagen de fondo dentro del elemento.
• background-repeat: determina si colocar la imagen en mosaico si es necesario para llenar todo el elemento.
• background-origin: determina si la posición del fondo es relativa al border-box, padding-box (valor inicial) o content-box del elemento.
• background-clip: especifica si el fondo debe llenar el border-box (valor inicial), el padding-box o el content-box del elemento.
• background-attachment: especifica si la imagen de fondo se desplazará hacia arriba y hacia abajo junto con el elemento (el valor inicial), o si la imagen se fijará en su lugar en la ventana gráfica. Tenga en cuenta que el uso del valor fixed puede tener implicaciones negativas en el rendimiento de la página.
• background-color: especifica un color de fondo sólido. Esto se renderizará detrás de cualquier imagen de fondo.

Exploraremos muchas de estas propiedades a lo largo del capítulo. Por ahora, tenga en cuenta que el uso de la propiedad abreviada (background) establecerá los valores que especifique y, al mismo tiempo, restablecerá todos los demás a su valor inicial. Por esta razón, tiendo a preferir el uso de propiedades individuales cuando estoy haciendo algo que requiera más de algunas de ellas.

La propiedad de background-image es particularmente interesante. Has visto que esto acepta una ruta a la URL de una imagen (background-image: url (coffee-beans.jpg) en el capítulo 8), pero también puede aceptar una función de degradado. Por ejemplo, puede definir un degradado que se mezcle de blanco a azul, como en la figura 11.2.

Los degradados son un efecto útil. Examinemos cómo funcionan antes de llegar a algunos ejemplos prácticos. Para probar degradados, cree una nueva página y hoja de estilo. Agregue el CSS que se muestra en la siguiente lista, que usa la función linear-gradient() para definir el degradado.

          
.fade {
  height: 200px;
  width: 400px;
  background-image: linear-gradient(to right, white, blue);        1
}
          
          Listado 11.1. Un gradiente lineal básico
        

1. Se desvanece a la derecha de blanco a azul

El degradado es una imagen de fondo, que por sí sola no afectará el tamaño del elemento. Para los propósitos de este ejemplo, he establecido una altura y un ancho explícitos en el elemento. El elemento está vacío, por lo que deberá forzarlo a que tenga cierta altura para poder ver el degradado.

La función linear-gradient tiene tres parámetros que definen su comportamiento: ángulo, color inicial y color final. El ángulo aquí es hacia la derecha (to right), lo que significa que el degradado comienza en el borde izquierdo del elemento (donde es blanco) y se fusiona uniformemente con el borde derecho (donde es azul). También puede utilizar otras sintaxis de color, como hexadecimal (# 0000ff&), RGB(rgb (0, 0, 255)) o la palabra clave transparent. Agregue el elemento de este listado para ver el degradado en la página.

          
<div class="fade"></div>
          
          Listado 11.2. Elemento con un degradado de fondo
        

Puede especificar el ángulo del degradado de varias formas. En este ejemplo, solía usar to right, pero también puede usar to top o to bottom. Incluso puede especificar una esquina como en la parte to bottom right; en cuyo caso, el degradado comenzará en la esquina superior izquierda del elemento y se fusionará con la esquina inferior derecha.

Para un control más preciso del ángulo, puede utilizar unidades más específicas, como grados. El valor 0deg apunta hacia arriba (equivalente a to top); los valores más altos se mueven en el sentido de las agujas del reloj alrededor del círculo, por lo que 90deg apuntan a la derecha, 180deg apuntan hacia abajo, 360deg apuntan hacia arriba nuevamente. Por tanto, esto es equivalente al ejemplo anterior.

          
.fade {
  height: 200px;
  width: 400px;
  background-image: linear-gradient(90deg, white, blue);            1
}
          
          Listado 11.3. Gradiente usando unidades de grado (deg)
        

1. Valor de 90 grados es equivalente al valor de la derecha

Los grados son la unidad más común, pero hay algunas otras que puede usar para indicar el ángulo:

• rad: indica radianes. Un círculo completo es 2π, o aproximadamente 6.2832 radianes.
• turn: indica el número de giros completos alrededor del círculo. Un giro equivale a 360 grados (360deg). Utilice valores decimales para representar menos de una vuelta completa: 0.25turn, por ejemplo, es igual a 90 grados.
• grad: indica gradianes. Un círculo completo son 400 gradianes (400grad) y 100grad equivalen a 90 grados.

Continúe y experimente con varios valores en el gradiente para ver cómo lo afectan.

11.1.1. Usar múltiples color stops

La mayoría de las veces, sus degradados tendrán dos colores, pasando de un color a otro. Sin embargo, puede definir un degradado con varios colores, cada uno de los cuales se denomina color stop. La figura 11.3 muestra un degradado con tres color stops (rojo, blanco y luego azul).

Puede insertar más paradas de color agregando más colores a la función linear-gradient(). Para ver este degradado en su página, actualice su hoja de estilo para que coincida con la siguiente lista.

          
.fade {
  height: 200px;
  width: 400px;
  background-image: linear-gradient(90deg, red, white, blue);          1
}
          
          Listado 11.4. Degradado lineal con múltiples color stops
        

1. Especifica múltiples color stops

Un degradado puede aceptar cualquier número de color stops, cada una separada por una coma. Los distribuirá automáticamente de manera uniforme. En este ejemplo, el degradado se desvanece de rojo en el borde izquierdo (0%) a blanco en el centro (50%) a azul en el borde derecho (100%). También puede establecer explícitamente la posición de estas paradas de color en la función de degradado. El gradiente en el listado 11.4 es equivalente a este:

          
linear-gradient(90deg, red 0%, white 50%, blue 100%)
          
        

Como puede imaginar en este ejemplo, puede ajustar la posición de las paradas de color como desee; no es necesario que estén espaciados uniformemente. Tampoco es necesario medirlos en porcentajes. Los píxeles, ems y otras unidades de longitud son perfectamente válidos.

Si coloca dos paradas de color en la misma posición, el color del degradado cambiará instantáneamente de uno a otro, en lugar de una transición suave. La figura 11.4 muestra un degradado que comienza en rojo, cambia inmediatamente a blanco y luego cambia inmediatamente a azul. Esto crea la apariencia de rayas.

El código del degradado se muestra aquí. Observe que este degradado tiene cuatro color stops, dos de las cuales son blancas.

          
.fade {
  height: 200px;
  width: 400px;
  background-image: linear-gradient(90deg,
    red 40%, white 40%,                           1
    white 60%, blue 60%);                         1
}
          
          Listado 11.5. Colocar dos color stops en los mismos puntos para crear rayas.
        

1. El color se detiene en los mismos puntos

La primera color stop es rojo al 40%, por lo que el degradado es rojo sólido desde el borde izquierdo hasta el 40%. La siguiente color stop es el blanco, también al 40%, por lo que el degradado hace un cambio brusco a blanco. A esto le sigue otra de color blanco al 60%, por lo que el degradado es blanco puro del 40% al 60%. Luego, la final, también al 60%, es azul. Esto hace un cambio brusco a azul, luego permanece azul hasta el borde derecho.

Aunque el ejemplo anterior es un poco artificial, la técnica se puede utilizar para obtener algunos efectos interesantes. En particular, se puede utilizar con una función de gradiente ligeramente diferente, repeating-linear-gradient(). Esto funciona como la función linear-gradient, excepto que el patrón se repite. Esto se puede utilizar para producir rayas similares a un palo de barbero, que se ve bien en las barras de progreso (figura 11.56).

Con gradientes repetidos, es mejor usar una longitud específica en lugar de un porcentaje, porque los valores especificados determinan el tamaño del patrón a repetir. El código de la barra rayada se muestra a continuación. Actualice su hoja de estilo para que coincida.

          
.fade {
  height: 1em;
  width: 400px;
  background-image: repeating-linear-gradient(-45deg,      1
    #57b, #57b 10px, #148 10px, #148 20px);                1
  border-radius: 0.3em;
}
          
          Listado 11.6. Crear una barra con rayas diagonales
        

1. Rayas alternando entre azul claro y oscuro

En lugar de codificar todo un degradado desde cero, a veces me resulta más fácil comenzar con un ejemplo funcional y modificarlo para satisfacer mis necesidades. Puede encontrar más ejemplos en https://css-tricks.com/stripes-css/.

11.1.2. Usar degradados radiales

Otro tipo de degradado es un degradado radial. En lugar de comenzar en un extremo del elemento y continuar hacia el otro extremo en una dirección lineal, los gradientes radiales comienzan en un solo punto y avanzan hacia afuera en todas las direcciones. En la figura 11.6 se muestra un ejemplo básico.

Edite su hoja de estilo para que coincida con el código de degradado radial en este listado.

          
.fade {
  height: 200px;
  width: 400px;
  background-image: radial-gradient(white, blue);            1
}
          
          Listado 11.7. Un degradado radial básico
        

1. 1 Fusiona desde un centro blanco a bordes azules

De forma predeterminada, el degradado se centra en el elemento y realiza una transición uniforme a sus esquinas. Tiene forma elíptica, que coincide con las proporciones del elemento (es decir, más ancha para elementos anchos, más alta para elementos altos).

Los degradados radiales admiten paradas de color, al igual que los degradados lineales. Puede proporcionar varias paradas o definir explícitamente su posición dentro del gradiente utilizando porcentajes o unidades de longitud. También puede hacer que el degradado radial sea un círculo en lugar de una elipse, o puede especificar dónde debe centrarse el degradado. Una función repeating-radial-gradient() repite el patrón en anillos concéntricos.

La mayoría de estas funciones se explican mejor con un ejemplo, por lo que he incluido varias con el código correspondiente en la figura 11.7. Te animo a que pruebes estos en tu página o que experimentes creando la tuya propia.

En el mundo real, rara vez necesito hacer algo complejo con un degradado radial, ya que la forma más básica tiende a satisfacer mis necesidades. Si desea profundizar en cómo funciona esto, visite la documentación de MDN en https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient.

La mayoría de los ejemplos hasta ahora utilizan colores marcadamente contrastantes. He hecho esto para enfatizar el efecto de los degradados para que su comportamiento sea claro. Pero en proyectos reales, generalmente será mejor usar colores con mucho menos contraste.

En lugar de desvanecerse de blanco a negro, pasa de blanco a gris claro. O se desvanecen entre dos tonos de azul similares. Esto será mucho menos molesto para el usuario. En algunos casos, es posible que ni siquiera noten el degradado, pero aun así aplicará una profundidad sutil a la página. Les mostraré un ejemplo del mundo real de esto en un momento, pero primero, veamos las sombras.

11.2 SOMBRAS

Otro efecto que puede agregar una profundidad percibida a la página es una sombra. Dos propiedades que crean sombras son box-shadow, que crea una sombra de la forma del cuadro de un elemento, y text-shadow, que crea una sombra del texto renderizado. Hemos utilizado box-shadow una o dos veces en capítulos anteriores, pero echemos un vistazo más de cerca a cómo funciona.

La declaración box-shadow: 1em 1em black produce una sombra como la que se muestra en la figura 11.8. Los valores de 1em son las compensaciones: cuánto se desplazará la sombra desde la posición del elemento (horizontal, luego vertical). Si tienen un valor de 0, la sombra estará directamente detrás del elemento. El valor negro especifica el color de la sombra.

La sombra tiene por defecto el tamaño y las dimensiones exactas del elemento. También tiene esquinas redondeadas, que coinciden con cualquier radio de borde que haya aplicado el elemento. Los valores: desplazamiento horizontal (x), desplazamiento vertical (y6#41; y color siempre deben especificarse para la sombra. Opcionalmente se pueden agregar otros dos valores: un radio de desenfoque y un radio de dispersión. La sintaxis completa se muestra en la figura 11.9.

El radio de desenfoque controla cuánto se desenfocarán los bordes de la sombra. Esto le dará un borde más suave y ligeramente transparente. El radio de extensión controla el tamaño de la sombra. Un radio de propagación positivo hace que la sombra sea más grande en todas las direcciones; un valor negativo hace que la sombra sea más pequeña.

11.2.1. Definición de profundidad con degradados y sombras

Usemos degradados y sombras para construir un botón como se muestra en la figura 11.10. Un degradado de arriba a abajo le da una apariencia curvada en 3-D. La sombra realza este efecto. En este ejemplo, también utilizará la pseudoclase :active para crear un tipo alternativo de sombreado cuando se presiona el botón.

El gradiente aquí es sutil. Es posible que no lo note de inmediato, pero le da al botón una apariencia ligeramente redondeada. La sombra tiene algo de desenfoque, lo que la hace parecer más natural. Cuando se hace clic en el botón, la sombra se elimina y, en su lugar, aparece una sombra insertada dentro de los bordes del botón. Esto le da la ilusión de estar deprimido, como si el usuario lo presionara físicamente en la página. Al soltar el botón del mouse, el botón vuelve a su estado original. Esto se hace usando el estado :active del botón.

Inicie una nueva página y una nueva hoja de estilo para este botón. Agregue el marcado del botón.

          
<button class="button">Sign up now</button>
          
          Listado 11.8. Marcado de botón
        

A continuación, agregue los estilos de la siguiente lista. Estos anulan los estilos del agente de usuario para el tamaño de fuente y el borde, así como también aplican un tamaño básico y un fondo degradado con una sombra de cuadro.

          
.button {
  padding: 1em;
  border: 0;
  font-size: 0.8rem;
  color: white;
  border-radius: 0.5em;
  background-image: linear-gradient(to bottom, #57b, #148);       1
  box-shadow: 0.1em 0.1em 0.5em #124;                             2
}

.button:active {
  box-shadow: inset 0 0 0.5em #124,                               3
              inset 0 0.5em 1em rgba(0,0,0,0.4);                  3
}
          
          Listado 11.9. Estilos de botones con degradado y sombra
        

1. Gradiente de azul claro a azul medio
2. Sombra azul oscuro con un desenfoque de 0,5 em
3. Dos sombras de recuadro insertadas

La background-image es un degradado entre dos colores similares de azul. La sombra del cuadro no se desplaza mucho, solo 0,1em hacia la derecha y hacia abajo, con un desenfoque moderado de 0,5em. Cuanto mayor es el desplazamiento de una sombra, más "levanta" la imagen de la página, haciendo que la imagen parezca más profunda. En el estado activo, la sombra del cuadro cambia.

He hecho dos cosas nuevas aquí. En lugar de una sombra de cuadro normal, agregué la palabra clave inset. Esto hace que la sombra aparezca dentro del borde del elemento, en lugar de afuera. También agregué más de una definición de sombra, separándolas con una coma. De esta forma se pueden agregar varias sombras.

La primera sombra insertada (inset 0 0 0.5em # 124) tiene compensaciones de cero y un ligero desenfoque. Esto agrega un anillo de sombra dentro de los bordes del elemento. El segundo (recuadro 0 0.5em 1em rgba (0,0,0,0,4)) tiene un poco de desplazamiento vertical, lo que hace que la sombra sea más frecuente en la parte superior del botón. La definición de color RGBA define un negro semitransparente. Te animo a que experimentes con estos valores para ver cómo afectan el renderizado final.

En Chrome, notará un brillo azul claro alrededor del botón cuando haga clic en él. Este es un esquema aplicado por el agente de usuario en el estado :focus. Puede eliminar esto con .button:focus {outline: none; }. Sugiero que cada vez que lo elimine, lo reemplace con otra cosa, de modo que el estado de enfoque aún sea visible para un usuario que navega a través de un teclado.

Este tipo de diseño se utilizó ampliamente durante varios años: elementos en pantalla hechos para parecerse a sus contrapartes del mundo real (un enfoque conocido como esqueuomorfismo). En el mundo real, los objetos no tienen colores perfectamente planos. Incluso en superficies lisas, la luz se refleja en el objeto de varias formas, produciendo luces y sombras.

Al darle a un botón una apariencia redondeada y una sombra de caja, se parece más a un objeto físico. Otros elementos esqueomórficos incluyen bordes cosidos e imágenes con textura similar al cuero. Entre 2010 y 2013, este tipo de diseño dio paso a una nueva tendencia llamada diseño plano.

11.2.2. Creando elementos con un diseño plano

Donde el diseño esqueomórfico busca emular el mundo físico, el diseño plano abraza la naturaleza digital del mundo moderno. Destaca colores vivos, uniformes y una apariencia más simple. Esto significa menos degradados, sombras y esquinas redondeadas. Irónicamente, esta tendencia surgió solo después de que estos efectos tan esperados llegaron a CSS. (Antes, las sombras y los degradados debían crearse mediante imágenes).

Sin embargo, el diseño plano no significa necesariamente que no se utilice ninguno de estos efectos. En cambio, se utilizan sutilmente. En lugar de un degradado de azul claro a azul medio, por ejemplo, puede haber un degradado de un azul a otro, que es casi indistinguible. O quizás un elemento tiene solo una sombra tenue. Puede que no tenga ambos al mismo tiempo.

Convirtamos nuestro botón en uno con un diseño plano. Este nuevo botón se muestra en la figura 11.11. No parece algo del mundo físico, aunque tiene una ligera sombra debajo.

Los estilos para esto se muestran a continuación, junto con los estados activos y de desplazamiento. Cambie su CSS para que coincida.

          
.button {
  padding: 1em;
  border: 0;
  color: white;
  background-color: #57b;                           1
  font-size: 1rem;
  padding: 0.8em;
  box-shadow: 0 0.2em 0.2em rgba(0, 0, 0, 0.15);    2
}
.button:hover {
  background-color: #456ab6;                        3
}
.button:active {
  background-color: #148;                           3
}
          
          Listado 11.10. Un botón plano con estado activo y flotante
        

1. Color de fondo sólido (sin degradado)
2. Sombra muy sutil
3. Estados activos y de desplazamiento ligeramente más oscuros

La sombra del cuadro aquí tiene algunos cambios. Solo tiene un desplazamiento vertical, por lo que la sombra es recta hacia abajo en lugar de un ángulo de aspecto más natural. También usé un color RGBA con valores de cero en rojo, verde y azul (produciendo negro) y un valor alfa de 0.15 (casi completamente transparente). Los estados estacionario y activo también son planos en apariencia. Estos estados cambian el color de fondo a tonos de azul ligeramente más oscuros. También aumenté el tamaño de la fuente, que es otra tendencia que surgió junto con el diseño plano.

11.2.3. Creando botones con un aspecto más moderno

El diseño plano sigue siendo popular, pero está evolucionando. Un enfoque común es volver al medio entre el diseño plano y el esqueuomorfismo. Rehagamos nuestro botón una última vez para que coincida con la figura 11.12. Este diseño utilizará elementos de ambos estilos de diseño.

Este sigue siendo un diseño mínimo, pero tiene un borde grueso en la parte inferior, lo que le da una apariencia muy parecida a la parte frontal de un objeto en forma de cubo 3-D. De hecho, esta línea oscura no es un border en absoluto, sino más bien un border-shadow sin desenfoque, lo que permite que los bordes curvos reflejen el radio del borde.

En el estado activo, el botón se desplaza hacia abajo unos pocos píxeles. Esto produce la ilusión de que se mueve hacia la página cuando se presiona. Actualice su hoja de estilo para que coincida con los estilos de esta versión.

          
.button {
  padding: 0.8em;
  border: 0;
  font-size: 1rem;
  color: white;
  border-radius: 0.5em;                 1
  background-color: #57b;
  box-shadow: 0 0.4em #148;             2
  text-shadow: 1px 1px #148;            3
}
.button:active {
  background-color: #456ab5;
  transform: translateY(0.1em);         4
  box-shadow: 0 0.3em #148;             5
}
          
          Listado 11.11. Estilos de botones modernos
        

1. Vuelve a agregar las esquinas redondeadas
2. Pone una sombra sólida debajo del botón (sin desenfoque)
3. Agrega una sombra de texto sutil
4. Mueve el botón hacia abajo cuando se hace clic
5. Reduce el tamaño de la sombra para compensar la transformación.

Este botón usa box-shadow de una manera diferente. En lugar de agregar un desenfoque y replicar una sombra, he mantenido los bordes de la sombra nítidos. Esto produce un efecto similar a un borde inferior grueso. Sin embargo, es un poco diferente de un borde porque tiene esquinas curvas que coinciden con el radio del borde del elemento.

También agregué una sombra de texto. Esto se comporta como una sombra de cuadro, excepto que proyecta una sombra del texto renderizado en lugar del cuadro del elemento. Su sintaxis es casi idéntica: desplazamiento x, desplazamiento y, radio de desenfoque (opcional) y un color. Pero no es compatible con la palabra clave inset ni con un valor de radio de distribución. Aquí he proyectado una sombra azul oscuro del texto, compensada por solo 1px en cada dirección.

En el estado activo, he hecho algo nuevo que es nuevo. Usé la propiedad transform con una función translateY(). Esto desplaza el elemento hacia abajo 0.1em en la pantalla. (Desvelaré esto un poco más cuando analicemos en profundidad las transformaciones en el capítulo 15). Luego reduje el desplazamiento vertical de la sombra del cuadro en la misma cantidad (0,3em en lugar de 0,4em). Cuando presiona el botón, el botón se mueve, pero la sombra del cuadro no. Haga clic en el botón para ver este efecto.

Los degradados y las sombras se pueden utilizar de muchas formas. A medida que pase el tiempo, surgirán nuevas tendencias de diseño. Más adelante, cuando vea un nuevo diseño en un sitio web, tómese unos minutos para inspeccionarlo en su navegador y aprender cómo se implementa. Y no tenga miedo de experimentar.

11.3. MODOS DE MEZCLA

La mayoría de las veces, un elemento tendrá solo una imagen de fondo, ya sea una imagen real o un degradado. Pero hay casos en los que es posible que desee dos o más fondos. CSS permite esto.

La propiedad background-image acepta cualquier número de valores, cada uno separado por una coma:

          
background-image: url(bear.jpg), linear-gradient(to bottom, #57b, #148);
          
        

Cuando aplica varias imágenes de fondo, las que se enumeran primero se renderizan frente a las que se enumeran a continuación. En este ejemplo, bear.jpg cubrirá el degradado lineal. El gradiente no será visible. Pero si ha agregado dos imágenes, es probable que desee que se muestre la segunda imagen. Puede hacer esto usando un modo de mezcla.

Si está familiarizado con el software de edición de fotografías, es posible que haya visto modos de fusión. Controlan la forma en que las imágenes apiladas se combinan. Tienen nombres enigmáticos como pantalla, quemado de color y luz dura. Como ejemplo, la figura 11.13 muestra dos fondos combinados con el modo de mezcla múltiple. Ambos fondos usan la misma imagen, colocada de manera diferente.

Esto produce un efecto interesante, donde ambas copias de la imagen siguen siendo claramente visibles, incluso si se superponen. Sin embargo, no se desvanece ni se desvanece el color como lo hace la transparencia simple.

Si una imagen de fondo tiene algo de transparencia, otros fondos detrás de ella se mostrarán a través de las áreas transparentes, incluso sin el uso de modos de fusión. Puede lograr esto con un png o gif transparente, o con un degradado que use la palabra clave transparent como uno de sus colores.

Creemos un elemento con dos fondos y combinémoslos para que coincidan con la figura 11.3. En una nueva página, agregue el elemento que se muestra a continuación. Volverá a utilizar este marcado para los siguientes ejemplos.

          
<div class="blend"></div>
          
          Listado 11.12. Un div para mezclar fondos
        

Utilizará un elemento vacío por ahora para ilustrar el efecto. A continuación, agregue el código de la siguiente lista a una hoja de estilo y vincúlelo a la página.

          
.blend {
    min-height: 400px;
    background-image: url(images/bear.jpg), url(images/bear.jpg);     1
    background-size: cover;                                           2
    background-repeat: no-repeat;                                     2
    background-position: -30vw, 30vw;                                 3
    background-blend-mode: multiply;                                  4
}
          
          Listado 11.13. Mezcla de dos imágenes de fondo
        

1. Una coma separa dos imágenes de fondo.
2. Especifica un valor para aplicar a ambas imágenes de fondo
3. Aplica diferentes posiciones de fondo a cada imagen
4. Aplica el modo de fusión

La mayoría de estas propiedades de fondo pueden aceptar varios valores, separados por una coma. background-position tiene dos de esos valores. El primero se aplicará a la primera imagen, el segundo a la segunda imagen. Las propiedades background-size y background-repeat también aceptan varios valores, pero al especificar solo uno, ese valor se aplica a ambas imágenes de fondo. La propiedad min-height se incluye para garantizar que el elemento no colapse a una altura de cero (porque está vacío).

La propiedad background-size acepta dos valores de palabras clave especiales, cover y contain. El uso de cover cambia el tamaño de la imagen de fondo para que ocupe todo el elemento; esto puede provocar que los bordes de la imagen se recorten. El uso de contain asegura que toda la imagen sea visible, aunque esto puede resultar en que parte del elemento no esté cubierto por el fondo (un efecto de "formato de pantalla ancha"). Esta propiedad también acepta valores de longitud para establecer explícitamente la altura y el ancho del elemento.

Intente cambiar el modo de fusión a otros valores como color-burn o difference para ver los tipos de efecto que pueden tener. Puede ser divertido jugar con esto, pero es posible que se pregunte cuáles son las aplicaciones prácticas. A continuación, presentamos algunos usos:

• Tiñe una imagen con un solo color o degradado
• Aplicar textura a una imagen, como un carrete de película rayado o granulado.
• Aclare, oscurezca o reduzca el contraste de una imagen para que el texto que tiene delante sea más legible
• Superponga un banner de texto mientras permite que la imagen se muestre

Veamos algunos ejemplos de estos. Luego, le daré un breve desglose de todos los modos de fusión disponibles.

11.3.1. Teñir una imagen

Puede utilizar un modo de fusión para tomar una imagen a todo color y teñirla con un solo tono. Para ilustrar, tomará la imagen del oso y la coloreará de azul, como en la figura 11.14. (Tenga en cuenta que si está leyendo esto en la edición impresa, la figura no está impresa en color. Consulte el libro electrónico o siga el ejemplo en su navegador para ver el efecto completo).

Un background-blend-mode fusiona no solo varias imágenes de fondo, sino también el background-color. Estas capas apiladas luego se combinan mediante el modo de fusión, por lo que puede establecer un color de fondo con el tono deseado y mezclarlo con la imagen. Para hacer esto, actualice su CSS para que coincida con este listado.

          
.blend {
    min-height: 400px;
    background-image: url("images/bear.jpg");
    background-color: #148;                     1
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: luminosity;          2
}
          
          Listado 11.14. Combinar una imagen de fondo con el tono del color de fondo
        

1. Color de fondo azul
2. Utiliza el modo de mezcla de luminosidad

El modo de fusión de luminosidad toma la luminosidad de la capa frontal (la imagen del oso) y la combina con el tono y la saturación de la capa posterior (el color de fondo azul). En otras palabras, el resultado combinado tiene todo el color del color de fondo, pero el brillo y el contraste de la imagen.

Es importante saber que este modo de fusión (y varios otros) se comportan de manera diferente, según la imagen que esté frente a la otra. En estos casos, el color de fondo es la capa más alejada con las imágenes apiladas delante.

Si, por ejemplo, colocara una capa azul delante de la imagen del oso en lugar de detrás (usando un degradado en lugar de un color de fondo), el resultado sería diferente. En ese caso, el modo de combinación de colores sería necesario para lograr el mismo resultado: el modo de combinación de colores es efectivamente un inverso de la luminosidad, tomando el tono y la saturación de la capa frontal, mientras que la luminosidad se toma de la parte posterior.

11.3.2. Comprender los tipos de modo de fusión

CSS admite 15 modos de mezcla. Cada uno usa una fórmula matemática diferente para controlar cómo se mezclan las imágenes. Para cada píxel, el color de una capa se combina con el color correspondiente en la otra, lo que da como resultado un nuevo color de píxel para la imagen compuesta.

Los modos de mezcla se muestran en la tabla 11.1. Cada uno de ellos se divide en uno de los cinco tipos: oscurecimiento, aclarado, contraste, composición o comparación. Algunos son más útiles en la práctica que otros. Elegir el correcto a menudo implica un poco de prueba y error.

En el momento de redactar este artículo, la mayoría de los modos de combinación son compatibles con la mayoría de los principales navegadores, con la excepción de IE y Edge. Los modos de mezcla compuestos tampoco son compatibles con Safari. Utilice consultas de funciones y proporcione comportamientos alternativos cuando sea necesario (consulte el capítulo 6, sección 6.5). Consulte https://caniuse.com/#feat=css-backgroundblendmode para obtener detalles de soporte actualizados.

11.3.3. Agregar textura a una imagen

Otra aplicación de los modos de fusión es agregar textura a una imagen. Es posible que tenga una imagen clara y moderna, pero a veces desea que se vea de manera diferente por razones de estilo. Puede usar una imagen en escala de grises para agregar artificialmente granulado de película o alguna otra textura a la imagen.

Considere la imagen que se muestra en la figura 11.15. Esta es la misma imagen de oso de antes, pero se ha combinado con una imagen texturizada para darle la apariencia de un lienzo tosco. Este tipo de efecto se puede lograr con uno de los modos de mezcla de contraste: overlay, hard-light o soft-light. En este caso, no quería alterar el tono de la imagen, así que utilicé una imagen en escala de grises para proporcionar la textura. De esta manera, el color del original aún se ve.

El código para esta superposición texturizada se muestra en la siguiente lista. La imagen de textura se coloca en mosaico para un patrón repetitivo y se coloca en capas sobre la parte superior de la imagen del oso. Cambie su hoja de estilo para que coincida con este listado para ver este efecto en su navegador.

          
.blend {
  min-height: 400px;
  background-image: url("images/scratches.png"), url("images/bear.jpg");   1
  background-size: 200px, cover;                                           2
  background-repeat: repeat, no-repeat;                                    2
  background-position: center center;
  background-blend-mode: soft-light;                                       3
}
          
          Listado 11.15. Usar luz dura para agregar textura a la imagen
        

1. Coloca la textura en capas frente a la imagen principal
2. Coloca la imagen de textura en mosaico cada 200 px
3. Mezclas con luz suave

El tamaño de fondo de la imagen de textura (figura 11.16) se establece en 200px, con la repetición de fondo habilitada. Esto mosaico la imagen repetidamente para llenar todo el elemento. Mientras tanto, la segunda imagen tiene un tamaño de fondo de portada y la repetición está desactivada, por lo que no está en mosaico.

Descubrí que soft-light tiende a funcionar mejor con imágenes de textura más oscura, mientras que hard-light y la overlay son más adecuadas para imágenes de textura más clara. (Esta tendencia se invierte cuando la textura está detrás de la imagen principal). Sin embargo, los resultados pueden variar según la necesidad de su diseño y la oscuridad de la imagen base.

11.3.4. Usar modos de mezcla

Aunque la propiedad background-blend-mode le permite combinar varias imágenes, está limitada a los colores de fondo o las imágenes de un elemento. Otra propiedad, mix-blend-mode, le permite combinar múltiples elementos. Esto le permite hacer más que combinar imágenes: el texto y los bordes de un elemento se pueden combinar con la imagen de fondo de su contenedor. Al usar un modo de combinación de mezcla, puede mostrar un encabezado frente a una imagen y aún permitir que se muestre parte de la imagen, como en la figura 11.17.

Esto produce un efecto interesante donde el texto parece transparente, como si estuviera recortado del banner rojo. Esto funciona porque utilicé el modo de fusión de hard-light y un color de texto gris medio. Los modos de mezcla de contraste tienen más efecto con colores muy claros o muy oscuros, pero un gris medio (#808080) permite que la capa de fondo se muestre sin cambios.

Para ver esto en su navegador, primero deberá agregar el encabezado al marcado como un elemento secundario del contenedor. Actualice su HTML para que coincida con esto.

          
<div class="blend">
  <h1>Ursa Major</h1>
</div>
          
          Listado 11.16. Agregar un encabezado dentro del contenedor
        

Diseñará este <h1> en un banner rojo con un color de fondo sólido, bordes gruesos de color gris claro en la parte superior e inferior y texto gris. Luego, aplicará un modo de mezcla de mezcla. Esto tratará todo el elemento como una capa, mezclado con la imagen de fondo del contenedor que está detrás de él. Cambie su hoja de estilo para que coincida con este código.

          
.blend {
  background-image: url("images/bear.jpg");
  background-size: cover;
  background-position: center;
  padding: 5em 0 10em;
}

.blend > h1 {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 6rem;
  text-align: center;
  mix-blend-mode: hard-light;            1
  background-color: #c33;                2
  color: #808080;                        2
  border: 0.1em solid #ccc;
  border-width: 0.1em 0;
}
          
          Listado 11.17. Uso del modo de mezcla de mezcla para combinar varios elementos
        

1. Utiliza el modo de mezcla hard-light
2. Establece el texto y el color de fondo del elemento de primer plano

El texto del título no tiene un alto contraste aquí, por lo que deberá tener cuidado. Lo hice grande y audaz para ayudar con la legibilidad. También funcionará mejor con una imagen de fondo de bajo contraste. En este ejemplo, coloqué el título sobre la parte más oscura de la imagen, que tiene un contraste más bajo.

Los modos de fusión pueden ser muy divertidos en un diseño. Úselos junto con degradados y sombras para agregar mucho interés visual a la página. Pero sea prudente: estos efectos suelen ser mejores cuando se utilizan con moderación.

RESUMEN

• Use degradados y sombras para agregar la apariencia de profundidad a la página.
• Incluso los diseños planos básicos pueden beneficiarse de algunas sombras o degradados sutiles.
• Utilice degradados con paradas de color explícitas para agregar rayas a un elemento.
• Un degradado de fondo sutil en lugar de un color plano proporciona un poco más de complejidad al diseño.
• Utilice modos de fusión para colorear o texturizar una imagen.