Marcação

Tudo é controlado por atributos data-* nos seus elementos, e as mudanças são percebidas sozinhas: adicione, tire ou mude um atributo e o vidro acompanha no frame seguinte.

Atributos

A tabela vem direto do código da biblioteca (descrições em inglês).

Atributo	Valores	Quem define	Efeito
data-glass	(empty) | liquid	você	Marks the element. Empty is frosted glass; "liquid" adds the bevelled rim with refraction, color split and highlight.
data-glass-bezel	px	você	Width of the bevelled rim.
data-glass-refraction	px	você	How far the rim (or the gem facets) bend the backdrop.
data-glass-dispersion	0 to 1	você	Color split on the rim and in the lenses.
data-glass-specular	0 to 1	você	Strength of the rim highlight and of the gem cut lines.
data-glass-shape	diamond	você	Diamond outline instead of the rounded box. border-radius rounds its tips.
data-glass-lens	gem | kaleidoscope	você	Faceted cut gem, or the backdrop mirrored into slices around the center.
data-glass-facets	number	você	Facets of the gem (default 8) or slices of the kaleidoscope (default 6).
data-glass-backdrop	bright | dark	a biblioteca	Brightness of what is behind the element, so the text can flip color. Hysteresis keeps it from flickering.

Qualquer atributo de ajuste fino (ou uma lente) também liga o bisel num data-glass comum.

Fosco ou liquid?

Use fosco (data-glass) em painel grande com conteúdo: lista, formulário, chat. O bisel ali disputa com o texto. Use liquid (data-glass="liquid") em peça pequena e destacada: botão, pílula, orb, dock, widget de HUD.

O formato segue o seu CSS

• border-radius (pelo border-top-left-radius) arredonda o vidro, inclusive 50% e 999px;
• a opacidade do elemento e de todos os pais esmaece o vidro, então fade em CSS funciona;
• o primeiro pai com overflow diferente de visible corta o vidro;
• scale() e translate() funcionam; rotação usa o retângulo do elemento.

Mudou o raio por style inline: chame refresh(). Mudança de classe e de data-glass* é detectada sozinha.

Cor do texto

[data-glass-backdrop='bright'] { color: #111; }
[data-glass-backdrop='dark'] { color: #fff; }