Начало›Первое стекло

Первое стекло

Начнём с пустой страницы. За пять шагов получится стекло поверх картинки.

1. Добавьте картинку

Стеклу нужно что-то изгибать, поэтому сначала положите на страницу картинку.

<div class="scene">
  <img src="photo.jpg" alt="">
</div>

Эта строка учит браузер новому тегу. Она нужна один раз на страницу.

<script type="module">
  import "@edinstvo/glass/define";
</script>

<div class="scene">
  <img src="photo.jpg" alt="">
  <edinstvo-glass class="card">Hello</edinstvo-glass>
</div>

Это обычный элемент, поэтому работает обычный CSS. Без размера рисовать нечего.

.scene { position: relative; }
.card { position: absolute; inset: 40px auto auto 40px; width: 280px; height: 160px; }

Каждая настройка это атрибут. Попробуйте разные значения или подберите их в песочнице.

<edinstvo-glass class="card" refraction="0.5" depth="24" frost="0.3">Hello</edinstvo-glass>

Стеклу нужен размер. Пустой тег без ширины и высоты равен 0 на 0 и ничего не рисует.