framework - Material acrílico solo para CSS de Fluent Design System

fluent design web (3)

Con la llegada del Sistema de Diseño Fluido de Microsoft y la propagación del nuevo Material Acrílico alrededor del ecosistema de Windows, pensé que sería fantástico utilizarlo en algunos diseños web.

De acuerdo con la especificación , la composición de una capa acrílica es:

Así que fui a probar un enfoque solo de CSS inspirado en las capas de esa imagen, de esta manera:

body { margin: 0; font: 1em/1.4 Sans-serif; background: url("http://www.wallpapers-web.com/data/out/191/5484624-sunset-wallpapers.jpg") center center; background-size: 100vw auto; } main { display: flex; align-items: center; justify-content: center; height: 100vh; } .acrylic { padding: 4em 6em; position: relative; overflow: hidden; } .acrylic::before { background: url("http://www.wallpapers-web.com/data/out/191/5484624-sunset-wallpapers.jpg") center center; background-size: 100vw auto; filter: blur(10px); content: ""; position: absolute; left: -10px; top: -10px; width: calc(100% + 20px); height: calc(100% + 20px); z-index: -1; } .acrylic::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; opacity: 0.65; border: 1px solid #fff; background: #fff; background-image: url(data:image/png;base64,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); } .shadow { border-radius: 1px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2); }

<main> <div class="acrylic shadow"> Acrylic material! </div> </main>

El resultado está muy cerca de la especificación y también es sensible, pero tiene un gran problema: simplemente .acrylic otro div. .acrylic y el truco de fondo ya no funciona.

La pregunta es: ¿existe alguna forma más inteligente de desenfoque gaussiano sin duplicar el fondo del cuerpo de cada niño? ¿O tal vez alguna forma más inteligente de calcular dinámicamente su posición?

¿Hay alguna forma más inteligente de desenfoque gaussiano sin duplicar el fondo del cuerpo de cada niño?

Por lo que sé, no hay una forma más inteligente en este caso para lograrlo, ya que la background image y el filter deben configurarse en la misma división para crear el efecto deseado.

¿O tal vez alguna forma más inteligente de calcular dinámicamente su posición?

Por lo que he entendido, el problema es que con cada .acrylic adicional, la parte de fondo de la imagen se duplica.

Ya que estás usando la misma imagen de fondo, puedes arreglar esto simplemente agregando background-attachment: fixed a la div .acrylic::before .

body { margin: 0; font: 1em/1.4 Sans-serif; background: url("http://www.wallpapers-web.com/data/out/191/5484624-sunset-wallpapers.jpg") center center; background-size: 100vw auto; } main { display: flex; align-items: center; justify-content: center; height: 100vh; } .acrylic { padding: 4em 6em; position: relative; overflow: hidden; } .acrylic::before { background: url("http://www.wallpapers-web.com/data/out/191/5484624-sunset-wallpapers.jpg") center center; background-size: 100vw auto; background-attachment: fixed; filter: blur(10px); content: ""; position: absolute; left: -10px; top: -10px; width: calc(100% + 20px); height: calc(100% + 20px); z-index: -1; } .acrylic::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; opacity: 0.65; border: 1px solid #fff; background: #fff; background-image: url(data:image/png;base64,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); } .shadow { border-radius: 1px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2); }

<main> <div class="acrylic shadow">Acrylic material!</div> <div class="acrylic shadow">Acrylic material!</div> <div class="acrylic shadow">Acrylic material!</div> </main>

Esta respuesta resuelve el problema y también lo he mejorado.

Creo que el único problema que tuvo fue la alineación de fondo aplicada a: antes y el cuerpo era diferente. Así que al combinar el CSS usado en uno, he hecho un atajo para facilitar la actualización y la edición.

Utilicé background: rgba () en lugar de valores #hex para dar más flexibilidad sobre los controles de opacidad.

He añadido notas en todo el CSS para explicar los cambios que he realizado para hacerlos más evidentes.

NOTA: Eliminar la opacidad de la clase :: after hace que la transparencia aumente y aumente la visibilidad de la textura de ruido. Creo que se debe a que la textura del ruido es semitransparente, pero es un comportamiento extraño, si alguien más lo sabe y tiene una mejor explicación, me gustaría saberlo. He añadido clases .nested y .parent. ya que puede ser preferible tener control sobre estas cosas por separado. He eliminado .parent en el segundo ejemplo y ambos en el tercero.

Actualización: Noté que el filtro de mezcla de exclusión mencionado en la especificación no se incluyó, así que también lo he agregado. Fuentes proporcionadas por debajo del fragmento.

Espero que esto haya ayudado. :)

Fragmento de CSS y HTML con 3 ejemplos:

/* Adding the background source for both elements together simplifies editing. Changing the background color #333 to #fff will produce much more intence effect on the filter blend */ html, .acrylic:before { background: #333 url(https://source.unsplash.com/1600x900/?nature) 50% 100% fixed; background-size: cover; } body { margin: 0; font: 1em/1.4 Sans-serif; } /*div spacings*/ div { margin: 5px; } main { display: flex; align-items: center; justify-content: center; flex-flow: row wrap; height: 100vh; } .acrylic { padding: 4em 6em; position: relative; overflow: hidden; } /*Added browser compatibility for blurring added the exclusion blend filter as explained in the original document*/ .acrylic::before { content: ''''; position: absolute; z-index: -1; height: 100%; top: 0; right: 0; left: 0; filter: blur(8px); -webkit-filter: blur(8px); -moz-filter: blur(8px); -o-filter: blur(8px); -ms-filter: blur(8px); background-blend-mode: exclusion; } /*made color rgba removed opacity property*/ .acrylic::after { content: ""; position: absolute; height: 100%; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; border: 1px solid #fff; background-image: url(data:image/png;base64,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); } /*Individual control over .nested and .parent opacity and color.*/ .parent::after { background-color: rgba(230, 240, 255, 0.50); opacity: 0.60; } .child::after { background-color: rgba(230, 240, 255, 0.30); opacity: 0.60; } .shadow { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 1px 8px rgba(0, 0, 0, 0.4); }

<body> <main> <div class="acrylic shadow parent"> <div class="acrylic child"> Acrylic material! <br />.parent on .child on </div> </div> <div class="acrylic shadow"> <div class="acrylic child"> Acrylic material! <br />.parent off .child on </div> </div> <div class="acrylic shadow"> <div class="acrylic"> Acrylic material! <br />.parent off .child off </div> </div> </main> </body>

Fuentes y notas extra:

Puedes encontrar una fuente para el efecto de cristal frontal en CSS Tricks aquí.

La técnica de imagen duplicada requiere mantener una imagen borrosa junto con la original, lo que puede convertirse en un dolor si necesita reutilizar el efecto para varias imágenes. Por ejemplo, los diseños sensibles pueden requerir el intercambio de diferentes imágenes en diferentes tamaños de pantalla. O, los diseños de plantillas pueden caer en imágenes dinámicamente (por ejemplo, una imagen de encabezado diferente para cada publicación de blog). Para estos casos, sería bueno generar el efecto utilizando solo la imagen de origen. Después de todo, simplemente lo estamos difuminando.

También dicen que si quieres ofrecer aún más compatibilidad con el navegador, puedes agregar el filtro SVG como un retroceso, aunque no lo he agregado a mi propio fragmento de código, dicen esto:

Los filtros CSS son algo nuevos. Eso significa que pueden tener prefijo de proveedor y que la compatibilidad de su navegador aún no es universal. Sin embargo, los filtros tienen un historial más largo en SVG, y la aplicación de filtros SVG a contenido HTML a través de CSS tiene un soporte de navegador más amplio. Puede agregarlos fácilmente como un respaldo para cuando los filtros CSS no son compatibles. La demostración anterior en realidad hace eso.
Para agregar un filtro SVG, incluimos algunos SVG en línea en nuestra marca HTML y hacemos referencia al filtro con una url (). Consejo profesional: una alternativa es codificar el filtro SVG y la referencia como una URL de datos, pero ese formato es un poco más difícil de leer en un artículo.

Y proporcionó un ejemplo de código

SVG:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="blur"> <feGaussianBlur stdDeviation="5" /> </filter> </defs> </svg>

CSS

.glass::before { background-image: url(''pelican.jpg''); /* Fallback to SVG filters */ filter: url(''#blur''); filter: blur(5px); }

Para obtener más información sobre las mezclas de filtros CSS, vaya aquí https://css-tricks.com/basics-css-blend-modes

Hay dos maneras de hacer esto...

Borrosa bg en la implementación del complejo .acrylic , pero se ejecuta en la mayoría de los navegadores modernos.
.acrylic backdrop-filter en .acrylic muy simple pero carece de soporte para el navegador.

1. Borrosa bg en `.acrylic`

Necesitamos duplicar bg en los chicos .acrylic también, porque solo reducir la opacidad mostrará el contenido detrás de ellos, no AFAIK, que no está cubierto por el filtro de desenfoque ...

La forma inteligente de calcular las posiciones sería establecer background-attachment: fixed tanto para el elemento padre ( body ) como .acrylic tipos .acrylic , esto le permitirá tener también varios tipos .acrylic ;)

Ya que usamos el mismo fondo para padres e hijos, podemos agruparlos juntos;)

body, .acrylic::before { background: url("IMG_URL_HERE") center/cover; background-attachment: fixed; }

Aquí hay un fragmento de trabajo;) .acrylic:after opacidad en .acrylic:after un poco hacia abajo, el fondo es un poco más visible;)

body { margin: 0; font: 1em/1.4 Sans-serif; } body, .acrylic::before { background: url("https://images.unsplash.com/photo-1452723312111-3a7d0db0e024?w=700") center/cover; background-attachment: fixed; } main { display: flex; align-items: center; justify-content: center; height: 100vh; } .acrylic { padding: 4em 6em; position: relative; overflow: hidden; margin: 1em; } .acrylic::before { filter: blur(10px); content: ""; position: absolute; left: -10px; top: -10px; width: calc(100% + 20px); height: calc(100% + 20px); z-index: -1; } .acrylic::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; opacity: 0.35; border: 1px solid #fff; background: #fff; background-image: url(data:image/png;base64,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); } .shadow { border-radius: 1px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2); }

<main> <div class="acrylic shadow"> Acrylic material! </div> <div class="acrylic shadow"> Acrylic material! </div> </main> <main> <div class="acrylic shadow"> Acrylic material! </div> <div class="acrylic shadow"> Acrylic material! </div> </main> <main> <div class="acrylic shadow"> Acrylic material! </div> </main>

2. (Menos apoyado) `backdrop-filter` en. `.acrylic`

main { display: flex; align-items: center; justify-content: center; height: 100vh; } .acrylic { padding: 4em 6em; position: relative; background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); margin: 7px; } body { background: url("https://images.unsplash.com/photo-1452723312111-3a7d0db0e024?w=700") center/cover; background-attachment: fixed; margin: 0; font: 1em/1.4 Sans-serif; color: #fff; }