Glass

<r-glass>APITokens de estiloÁrea de testesCódigo-fonte

Uma superfície de vidro líquido. Escolha um material e o painel está pronto: ele fosca o que está atrás, curva isso numa borda arredondada como faz uma lente, separa levemente as cores na beirada e ilumina a borda. Qualquer valor isolado pode ser sobrescrito por um atributo de mesmo nome. O conteúdo vai no slot padrão e recebe uma cor de tinta legível sobre o vidro.

Use quando um painel fica sobre conteúdo rico e colorido: um cartão de destaque, uma barra de ferramentas flutuante, uma camada sobre mídia. Sobre um fundo liso não há nada para curvar e o efeito desaparece.

Playground

Arraste o vidro, troque o material e o fundo e copie a marcação. O trecho só traz o que difere do material.

Painel fosco

arraste ou use as setas · ajuste os controles

Redefinir

Material

materialregularthinthickclear

Óptica

blur16pxsaturate180%displace18pxbevel28pxdispersion25%

Forma e luz

radius24pxwidth340pxspecular100%toneautodarklightrimsheeninteractive

Fundo

backdrop

Sua imagem

Copiar

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

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

Materiais

Quatro materiais cobrem a maioria dos usos. regular é o padrão.

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 uma imagem

Adicione backdrop quando o vidro estiver sobre um <img> ou <video>. Sem valor, ele usa a primeira imagem ou vídeo do pai do vidro; um seletor aponta outro. O vidro então lê os pixels desse elemento com WebGL2 e refrata cada comprimento de onda na sua própria medida, em qualquer motor com WebGL2, enquanto o caminho CSS só curva a luz no Chromium. A imagem continua na página, então o texto alternativo e o conteúdo ao redor não mudam.

Refracted with WebGL2

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

Uma imagem de outra origem precisa de crossorigin e de uma resposta CORS para ser lida; caso contrário, o vidro mantém o fosco CSS.

Tom e tinta

tone diz o que está atrás do vidro. Sobre um fundo escuro ou colorido, a borda é iluminada e o conteúdo é branco; sobre um claro, uma borda branca some, então a borda é sombreada e o conteúdo fica escuro. Sobre uma imagem backdrop, o tom acompanha o brilho da área coberta, a menos que você o defina. O tom em vigor está disponível como :state(light) e :state(dark), e --ran-glass-ink substitui a cor do conteúdo.

The tone follows the image

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

Aninhamento

O <r-glass> se compõe: aninhe um dentro do outro para ter materiais em camadas, como uma barra de ferramentas de vidro sobre um painel de vidro. Cada camada curva o que está atrás dela.

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

Referência da API

Propriedades

Refração displace

displace define quanto a borda puxa o que está atrás em direção ao centro, de modo que o fundo logo dentro da beirada se estica sobre ela, como uma borda convexa grossa amplia. bevel define a largura dessa faixa curva. Acima da metade do bevel, a borda dobra a imagem de volta sobre si mesma, como faz a beirada de um vidro grosso de verdade.

displace = 0

displace = 40

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

Brilho e interação

sheen adiciona um brilho em movimento; interactive adiciona uma elevação ao passar o cursor e um pressionar que volta ao lugar sem ressalto.

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

Rim — borda especular por GPU (opcional)

rim desenha a borda na GPU: uma parede externa brilhante e uma interna mais fraca onde o bevel encontra a face plana, iluminadas por uma luz principal vinda do canto superior esquerdo e um preenchimento fraco vindo do inferior direito, com espessura que varia ao longo da borda e reflexos ocasionais. Num tom light, as paredes são sombreadas em vez disso. Nunca amostra o fundo: o shader só conhece o tamanho, o raio e o bevel do painel. Renderiza primeiro em WebGL, passa para WebGPU em segundo plano quando o navegador tem suporte e deixa o brilho CSS como está quando nenhum dos dois existe.

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

Parts e tokens CSS

Estilize o interior com ::part(glass), ::part(specular), ::part(refraction) e, quando rim está ativo, ::part(rim), ou sobrescreva as propriedades personalizadas --ran-glass-*:

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

Notas

• Dois caminhos. Sem backdrop, o backdrop-filter fosca a página real atrás do vidro, então texto, vídeo e controles atrás dele continuam funcionando; a borda de lente com cores separadas é um filtro SVG que renderiza no Chromium, e Safari e Firefox mantêm o fosco. Com backdrop, o WebGL2 refrata aquela única imagem ou vídeo em qualquer motor que tenha WebGL2.
• Legibilidade. O conteúdo recebe --ran-glass-ink. Mantenha textos longos sobre uma superfície interna opaca em vez de deixar o contraste por conta do vidro.
• Transparência reduzida. Com a opção de sistema "reduzir transparência" ou "aumentar contraste" (prefers-reduced-transparency: reduce), o vidro vira uma superfície sólida que acompanha o tema (--ran-color-bg-elevated), sem fosco, refração nem brilhos.
• Movimento. A superfície só faz transição de transform, então uma troca de tema se resolve em um quadro. O brilho e o pressionar respeitam prefers-reduced-motion.
• Custo. O mapa de lente SVG é refeito quando o tamanho, o raio ou o bevel do painel mudam. A refração WebGL verifica o painel e a imagem uma vez por quadro enquanto está visível e só desenha quando um deles se moveu.

Área de testes

thin

regular

thick

clear

<r-glass>

interactiverim