HTML:
Контейнер с изображением и сам блок:
|
1 2 3 |
<div class="glass-container"> <div class="glass-block">Glass</div> </div> |
SVG-фильтр, который создает эффект стекла, его можно разместить в любой части страницы:
|
1 2 3 4 5 6 7 8 |
<svg style="position: absolute; width: 0; height: 0"> <filter id="glass" x="-50%" y="-50%" width="200%" height="200%" primitiveUnits="objectBoundingBox"> <feImage x="-50%" y="-50%" width="200%" height="200%" result="map" /> <feGaussianBlur in="SourceGraphic" stdDeviation="0.02" result="blur" /> <feDisplacementMap id="disp" in="blur" in2="map" scale="0.8" xChannelSelector="R" yChannelSelector="G" ></feDisplacementMap> </filter> </svg> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.glass-container { position: relative; height: 580px; margin: 20px 0; background-color: #000; background-image: url('bg-image.jpg'); background-size: cover; background-position: center; overflow: hidden; z-index: 1; border-radius: 18px; box-shadow: 0 4px 8px rgba(0,0,0,0.15), 0 12px 18px rgba(0,0,0,0.1); } .glass-block { cursor: pointer; border: none; width: 350px; height: 350px; border-radius: 18px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 100%); backdrop-filter: url(#glass); box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); border: 2px solid #fff; color: white; font-size: 32px; font-weight: 600; text-transform: uppercase; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.5); display: flex; flex-flow: column; align-items: center; justify-content: center; } @media screen and (max-width: 991px) { .glass-block { width: 150px; height: 150px; font-size: 22px; } } |
JS:
|
1 2 3 4 5 6 7 8 9 10 |
const feImage = document.querySelector("feImage"); fetch("map.png") .then((response) => { return response.blob(); }) .then((blob) => { const objURL = URL.createObjectURL(blob); feImage.setAttribute("href", objURL); }); |
Обратите внимание:
- В скрипте используется текстура map.png
- При локальном тестировании, используйте текстуру по ссылке:
https://essykings.github.io/JavaScript/map.png
Найдено на codepen.io у пользователя Esther k

Добавить комментарий: