
Bennett Feely ha estado haciendo un buen trabajo mostrando a la gente la gloria de los modos de fusión CSS. Hay muchos efectos de diseño que estamos acostumbrados a ver en diseños estáticos (gracias a Photoshop) que no vemos mucho en la web, con contenido dinámico. Pero eso cambiará a medida que los modos de combinación CSS obtengan más soporte. Me gustaría ver las diferentes formas de hacerlo, ya que no está exactamente cortado y seco.
Modos de fusión de múltiples fondos CSS
Puedes mezclar background-image
s juntos, o mezclarlos con color de fondo. Es tan simple como:
.blended {
background-image: url(face.jpg);
background-color: red;
background-blend-mode: multiply;
}
Vea la combinación de fondo de la pluma de Chris Coyier (@chriscoyier) en CodePen.
Multiplicar es bueno y útil, pero también hay: screen
, overlay
, darken
, lighten
, color-dodge
, color-burn
, hard-light
, soft-light
, difference
, exclusion
, hue
, saturation
, color
, y luminosity
. Y también normal
que lo reinicia.
Adobe (que trabaja en las especificaciones para estas cosas) creó este lápiz para jugar con las diferentes posibilidades aquí. Actualizar: han eliminado ese lápiz, pero todavía tienen esta página explicativa.
Un solo elemento puede tener más de un fondo, apilados. Me gusta:
.graphic-or-whatever {
background:
url(grid.png),
url(building.jpg)
}
Esos pueden combinarse simplemente agregando un background-blend-mode
.
Vea la mezcla de fondo múltiple de Pen de Chris Coyier (@chriscoyier) en CodePen.
Aquí hay un ejemplo interesante y práctico de Bennett Feely:
Vea el Pen rxoAc de Bennett Feely (@bennettfeely) en CodePen.
Aquí hay otro, que combina inteligentemente una imagen en color separada en partes cian / magenta / amarillo / negro (CMYK). Sabes que así es como funciona la litografía offset en la impresión, ¿verdad? =)
Vea la impresión en color Pen CMY / CMYK con modo de mezcla de fondo de Bennett Feely (@bennettfeely) en CodePen.
Modos de fusión de elementos HTML arbitrarios
Combinar fondos es bastante bueno, pero personalmente estoy menos entusiasmado con eso que con la combinación de elementos HTML arbitrarios. Como un <h1>
título sobre un fondo, por ejemplo. O incluso texto sobre texto.
Vi esto en un aeropuerto el otro día y tomé una foto porque pensé que se veía bien y pensé que podría descubrir cómo hacerlo en la web:
Mi primer intento de recrearlo, usé opacidad. Pero la opacidad realmente opaca los colores y no hace que esos bits superpuestos tengan la oscuridad adicional que deberían tener. CJ Gammon me mostró que existe una propiedad de combinación precisamente para este propósito: mix-blend-mode
.
Entonces para reproducir esto:
<h1>hungry?</h1>
Entonces divídelo en s con Lettering.js:
$("h1").lettering();
Luego, apriete las letras junto con un espaciado negativo entre letras, configure el modo de mezcla-combinación y coloree:
h1 {
font-size: 7rem;
font-weight: 700;
letter-spacing: -1.25rem;
}
h1 span {
mix-blend-mode: multiply;
}
h1 span:nth-child(1) {
color: rgba(#AB1795, 0.75);
}
/* etc, on coloring */
Comparar:
Vea las letras superpuestas de lápiz de Chris Coyier (@chriscoyier) en CodePen.
Como mencioné, el texto web real sobre la imagen es un caso de uso bastante bueno si me preguntas:
Vea el Pen GxlBm de Chris Coyier (@chriscoyier) en CodePen.
Modos de fusión de lienzo
Las cosas del modo de mezcla DOM son las más interesantes para mí, pero debe tenerse en cuenta que <canvas>
también tiene modos de mezcla y tiene un soporte un poco más profundo (ver más abajo para todo eso).
Lo configura en el contexto del lienzo. Asi como:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'multiply';
Ese valor puede ser cualquiera de los que enumeré anteriormente. Aquí hay una demostración simple:
Vea los modos de fusión del lienzo Pen de Chris Coyier (@chriscoyier) en CodePen.
Y uno elegante en el que se puede ver la combinación que le da vida a la demostración:
Vea la demostración de Pen sketch.js de Justin Windle (@soulwire) en CodePen.
Modos de fusión SVG
Como puede sospechar, SVG tiene su propio mecanismo para hacer esto. Una forma de hacerlo es definirlo dentro del <svg>
en sí mismo, y es bastante complicado:
<svg>
<defs>
<filter id="f1" x="0" y="0" width="1" height="1">
<feImage xlink:href="https://css-tricks.com/basics-css-blend-modes/#p1" result="p1"/>
<feImage xlink:href="#p2" result="p2"/>
<feBlend mode="multiply" in="p1" in2="p2" />
</filter>
<path id="p1" d='M100 100 L200 100 L200 200 L100 200 Z' fill="#00FFFF"/>
<path id="p2" d='M150 150 L250 150 L250 250 L150 250 Z' fill="#CC3300"/>
</defs>
<rect width="100%" height="100%" filter="url(#f1)"/>
</svg>
Vea el Pen Fnvdp de Chris Coyier (@chriscoyier) en CodePen.
Y un ejemplo más complejo.
La buena noticia es que mix-blend-mode
funcionará en SVG en línea. Entonces, si está usando SVG de esa manera, puede apuntar a las formas en sí mismas con clases o lo que sea y darles el modo de fusión que desee.
Aquí hay un ejemplo de Bennet que hace precisamente eso:
Vea el Pen KDkCj de Bennett Feely (@bennettfeely) en CodePen.
Soporte del navegador
Para lienzo: Firefox 20+, Chrome 30+, Safari 6.1+, Opera 17+, iOS 7+, Android 4.4+. Las peores malas noticias: no IE.
Para HTML / CSS: Firefox 30+, Chrome 35+, Safari 6.1 (¿aparentemente no 7?). No es tan compatible como el lienzo.
En este segundo, para Chrome, tendrá que ejecutar Canary, ir a chrome: // flags / y habilitar las “funciones experimentales de la plataforma web”.
En realidad, esto es un poco más complicado, por lo que si realmente desea profundizar y conocer el soporte, consulte la Matriz de soporte de Adobe.
Mejora progresiva
Lo bueno de la combinación es que el punto central son los efectos de diseño. Si no son compatibles, puede asegurarse de que el respaldo aún sea legible (¡mejora progresiva!).
Aquí hay un pensamiento reciente de Jeremy Keith:
Es completamente posible, mejor dicho, deseable, utilizar funciones mucho antes de que sean compatibles con todos los navegadores. Así es como hacemos avanzar la web.
Entonces, una forma de hacer soporte es mirar el diseño en un navegador no compatible y si aún es legible / utilizable, está bien, no se requiere ninguna acción adicional.
Si el resultado termina siendo ilegible / inutilizable, puede modificar las cosas hasta que lo sean, o ejecutar una prueba para determinar la compatibilidad y hacer algo específico en el caso de la falta de soporte.
Para probar el soporte, supongo que podría hacer una prueba para la propiedad que desea usar:
var supportsMixBlendMode = window.getComputedStyle(document.body).mixBlendMode;
var supportsBackgroundBlendMode = window.getComputedStyle(document.body).backgroundBlendMode;
Si el valor devuelto es “normal” (o cualquier otra cosa que no sea undefined
) hay soporte, de lo contrario no. Entonces probablemente aplique una clase al <html>
para que pueda saberlo y usarlo en cualquier lugar de su CSS para ajustar cosas, estilo Modernizr. Quizás incluso hagan una prueba en el futuro.
A menos que no sea tan simple, en cuyo caso hágamelo saber.
¿Necesitas más ideas? Mira esta colección. ¡Feliz mezcla!