Настройки›Свет
Свет
Задайте свет один раз на всю страницу. Его подхватит всё стекло, а любой элемент может поменять одну настройку и не трогать остальные.
import { setSceneLight } from "@edinstvo/glass";
setSceneLight({ direction: "top-left", intensity: "80%", color: "white", softness: 0.6, diffusion: 0.2 });Эти настройки управляют настоящим движком, и все примеры ниже за ними следуют.
Глобальный свет
На этих трёх ничего не задано. Все они берут свет сцены, поэтому блики двигаются вместе.
Свой свет
Здесь каждый элемент задаёт свой свет. Направление и цвет сцены больше не влияют на то, что он заменил.
Смешанный свет
Средний меняет только цвет. Покрутите направление: он двигается вместе с соседями. Смените цвет: он останется синим.
<edinstvo-glass light-color="blue"></edinstvo-glass>Каждая настройка света работает сама по себе и бывает в одном из трёх состояний:
| Значение | Что делает |
|---|---|
inherit | Берёт значение родителя: группа, затем CSS, затем сцена. То же, что не задавать |
| значение | Заменяет только эту настройку |
default | Возвращает значение движка, минуя сцену |
Динамическое преломление (бета)
Этот эффект в бете и может измениться. Стекло сильнее гнёт там, где меняется контент за ним, а насколько — задаёт форма. По умолчанию выключено и тогда ничего не стоит. Потяните стекло над словом.
Отражения окружения
Изгиб отражает то, что на самом деле вокруг стекла, а не нарисованный градиент, и окрашивается светом сцены или своим. Потяните, и отражение изменится.
Всё вместе
Свет сцены, свой цвет, преломление и отражения за один проход.
Настройки
| Атрибут | Сцена | Что делает |
|---|---|---|
light-angle | direction | Откуда идёт свет: градусы или слова вроде top-left |
light | intensity | Сила света, от 0 до 1 или в процентах |
light-color | color | Цвет света, любой цвет CSS |
light-softness | softness | Обтекание изгиба светом, от 0 до 1 |
light-diffusion | diffusion | Рассеивание по поверхности, от 0 до 1 |
dynamic-refraction (бета) и reflection принимают значения от 0 до 1 на элементе, 0 их выключает. Всё это работает и как CSS-переменные, например --glass-light-color.