Glass

<r-glass>APITokens de estiloPrueba interactivaCódigo fuente

Una superficie de vidrio líquido. Elige un material y el panel está listo: esmerila lo que tiene detrás, lo curva en un borde redondeado como lo haría una lente, separa ligeramente los colores en el filo e ilumina el borde. Cualquier valor suelto se puede sobrescribir con un atributo del mismo nombre. El contenido va en el slot por defecto y toma un color de tinta legible sobre el vidrio.

Úsalo cuando un panel quede sobre contenido rico y colorido: una tarjeta destacada, una barra de herramientas flotante, una capa sobre un vídeo. Sobre un fondo plano no hay nada que curvar y el efecto desaparece.

Campo de pruebas

Arrastra el vidrio, cambia el material y el fondo, y copia el marcado. El fragmento solo lleva lo que difiere del material.

Panel esmerilado

arrastra o usa las flechas · ajusta los controles

Restablecer

Material

materialregularthinthickclear

Óptica

blur16pxsaturate180%displace18pxbevel28pxdispersion25%

Forma y luz

radius24pxwidth340pxspecular100%toneautodarklightrimsheeninteractive

Fondo

backdrop

Tu imagen

Copiar

<r-glass style="width:340px">
  …
</r-glass>

<r-glass material="clear" backdrop>
  <div class="panel">…</div>
</r-glass>

Materiales

Cuatro materiales cubren la mayoría de los usos. regular es el predeterminado.

thin

regular

thick

clear

<r-glass material="thin">…</r-glass>
<r-glass>…regular…</r-glass>
<r-glass material="thick">…</r-glass>
<r-glass material="clear">…</r-glass>

Sobre una imagen

Añade backdrop cuando el vidrio esté sobre un <img> o un <video>. Sin valor usa la primera imagen o vídeo del padre del vidrio; un selector nombra otro. El vidrio lee entonces los píxeles de ese elemento con WebGL2 y refracta cada longitud de onda en su propia medida, en cualquier motor con WebGL2, mientras que la vía CSS solo curva la luz en Chromium. La imagen sigue en la página, así que su texto alternativo y el contenido de alrededor no cambian.

Refracted with WebGL2

<div class="hero">
  <img src="hero.jpg" alt="…" />
  <r-glass material="clear" backdrop rim>…</r-glass>
</div>

Una imagen de otro origen necesita crossorigin y una respuesta CORS para poder leerse; si no, el vidrio conserva su esmerilado CSS.

Tono y tinta

tone indica qué hay detrás del vidrio. Sobre un fondo oscuro o colorido el borde se ilumina y el contenido es blanco; sobre uno claro un borde blanco desaparece, así que el borde se sombrea y el contenido pasa a ser oscuro. Sobre una imagen backdrop el tono sigue el brillo de la zona cubierta, salvo que lo fijes. El tono en vigor está disponible como :state(light) y :state(dark), y --ran-glass-ink sustituye el color del contenido.

The tone follows the image

r-glass:state(light) .badge {
  border-color: rgb(0 0 0 / 0.2);
}

Anidamiento

<r-glass> se compone: anida uno dentro de otro para tener materiales en capas, como una barra de herramientas de vidrio sobre un panel de vidrio. Cada capa curva lo que tiene detrás.

<r-glass radius="28">
  <div class="panel">
    Outer panel
    <r-glass material="thin" radius="16">
      <div class="toolbar">Nested glass toolbar</div>
    </r-glass>
  </div>
</r-glass>

Referencia de la API

Propiedades

Refracción displace

displace fija cuánto tira el borde de lo que hay detrás hacia el centro, de modo que el fondo justo dentro del filo se estira sobre él, igual que aumenta un borde convexo grueso. bevel fija el ancho de esa franja curva. Por encima de la mitad del bevel, el borde vuelve a plegar la imagen sobre sí misma, como hace el filo de un vidrio grueso real.

displace = 0

displace = 40

<r-glass material="clear" displace="0">…flat…</r-glass> <r-glass material="clear" displace="40">…lensed edge…</r-glass>

Brillo e interacción

sheen añade un brillo en movimiento; interactive añade una elevación al pasar el cursor y una pulsación que vuelve a su sitio sin rebote.

<r-glass sheen interactive>
  <div>Hover &amp; press me</div>
</r-glass>

Rim — filo especular por GPU (opcional)

rim dibuja el borde en la GPU: una pared exterior brillante y una interior más tenue donde el bevel se une con la cara plana, iluminadas por una luz principal desde arriba a la izquierda y un relleno tenue desde abajo a la derecha, con un grosor que varía a lo largo del borde y destellos ocasionales. Con un tono light las paredes se sombrean en su lugar. Nunca muestrea el fondo: el shader solo conoce el tamaño, el radio y el bevel del panel. Se dibuja primero con WebGL, pasa a WebGPU en segundo plano cuando el navegador lo tiene y deja intacto el brillo CSS cuando no hay ninguno de los dos.

<r-glass>…CSS highlight…</r-glass> <r-glass rim>…GPU-lit edge…</r-glass>

Parts y tokens CSS

Da estilo al interior con ::part(glass), ::part(specular), ::part(refraction) y, cuando rim está activo, ::part(rim), o sobrescribe las propiedades personalizadas --ran-glass-*:

r-glass {
  --ran-glass-tint: linear-gradient(135deg, rgb(0 0 0 / 0.2), transparent);
}

Notas

• Dos vías. Sin backdrop, backdrop-filter esmerila la página real que hay detrás del vidrio, así que el texto, el vídeo y los controles de detrás siguen funcionando; el borde de lente con colores separados es un filtro SVG que se dibuja en Chromium, y Safari y Firefox conservan el esmerilado. Con backdrop, WebGL2 refracta esa única imagen o vídeo en cualquier motor que tenga WebGL2.
• Legibilidad. El contenido toma --ran-glass-ink. Mantén el texto largo sobre una superficie interior opaca en lugar de confiar el contraste al vidrio.
• Transparencia reducida. Con el ajuste del sistema «reducir transparencia» o «aumentar contraste» (prefers-reduced-transparency: reduce), el vidrio pasa a ser una superficie sólida que sigue el tema (--ran-color-bg-elevated), sin esmerilado, refracción ni brillos.
• Movimiento. La superficie solo transiciona transform, así que un cambio de tema se resuelve en un fotograma. El brillo y la pulsación respetan prefers-reduced-motion.
• Coste. El mapa de lente SVG se reconstruye cuando cambian el tamaño, el radio o el bevel del panel. La refracción WebGL comprueba el panel y la imagen una vez por fotograma mientras está visible y solo dibuja cuando alguno de los dos se ha movido.

Prueba interactiva

thin

regular

thick

clear

<r-glass>

interactiverim