Getting started›Your first glass

Your first glass

Start from an empty page. In five steps you get glass over a picture.

1. Add a picture

Glass needs something to bend, so put an image on the page first.

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

2. Load the package

This line teaches the browser a new tag. You need it once per page.

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

3. Put glass on top

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

4. Give it a place and a size

It is a normal element, so regular CSS works. Without a size it has nothing to draw.

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

5. Change how it looks

Every setting is an attribute. Try a few values, or find yours in the playground.

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

Glass needs a size. An empty tag with no width and height is 0 by 0 and draws nothing.