Стеклянный блок на изображении

HTML:

Контейнер с изображением и сам блок:

<div class="glass-container">
	<div class="glass-block">Glass</div>
</div>

<div class="glass-block">Glass</div>

</div>

SVG-фильтр, который создает эффект стекла, его можно разместить в любой части страницы:

<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>

<feDisplacementMap id="disp" in="blur" in2="map" scale="0.8" xChannelSelector="R" yChannelSelector="G"

></feDisplacementMap>

</filter>

</svg>

CSS:

.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;
	}
}

.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:

const feImage = document.querySelector("feImage");
fetch("map.png")
.then((response) => {
    return response.blob();
})
.then((blob) => {
    const objURL = URL.createObjectURL(blob);
	
    feImage.setAttribute("href", objURL);
});

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

Пример:

HTML:

CSS:

JS:

Смотрите также:

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