Ослабление фона с помощью тени

?> Обзор: CSS box-shadow, HTML < dialog ><script v-pre type="text/x-template" id="shadow-weaken-background">

<style> main { width: 100%; user-select: none; font: 14px / 1 Helvetica, sans-serif; } main > h5 { margin: 30px 30px 15px; } main > section { width: 100%; padding: 16px; overflow: hidden; position: relative; } main > section:nth-of-type(1) .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); } main > section .lightbox { width: 60%; height: 51px; background-color: #FFF; border-radius: 8px; display: flex; justify-content: center; align-items: center; z-index: 1; } main > section:nth-of-type(1) .lightbox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } main > section:nth-of-type(2) .lightbox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 50vmax rgba(0, 0, 0, 0.8); } main > section dialog { width: 400px; height: 130px; margin: auto; padding: 53px 151px; } main > section dialog::backdrop { background: rgba(0, 0, 0, 0.8); } </style>

1️⃣ Увеличение слоя маскировки

Бекон ipsum dolor amet конспектор шорт лойн у три-тип алькатра гроун раунд жоул биф митлоф в пурк. Элит чикен еа спейр райбс. Шанг андоуилл эк будин пиканья туки версе. До донер фугят тундж.

Чук филт мингон флэнк пурк чоп моллит эним вениам сед пурк лойн аликуип сосэдж просциутто ин дезерунт. Ноструд порчэтта нон нулла сант. Капим эт велит пиканья лаборум салами капичола эксирата алкатра сосэдж циллум шоулдер миним эссе. Пиг будин аликуип ауте, тайл у ков инцидунд шорт лойн алика.

Донер алькатра пастрами пиг, стрип стэк ю ин франкфуртер оккейкат ин филт мингон чук шорт лойн нулла митлоф. Адиписцинг алика кильбаса нулла пройдент. Гроун раунд митлоф кевин, шанг адиписцинг пурк франкфуртер т-бон спейр райбс кюпидацат. Сед хэм нон дуйс эним, ин ipsum фугят ист тундж шорт рибс ад брезаола просциутто. Нон миним пиканья, ад ин оккейкат фугят вениам долор дезерунт.

2️⃣ схема box-shadow

Bacon ipsum dolor amet consectetur short loin ut tri-tip alcatra ground round jowl beef meatloaf in pork. Элит кичин, спейр райбс. Шанг андоуль, эк буадин пиканья тукесе. Донер фугят тундж.

Чук филт мингон флэнк порк чоп моллит эним вениам сед порк лойн алиquip сосэйдж прошиутто ин дезерунт. Ноструд порчэтта нон нулла сант. Капим эт velit пиканья лаборум салами капичола екзистациоин алкатра сосэйдж циллум шортер миним эссэ. Пиг буадин алиquip аут, тайл ут ков инкидентионд шорт лойн алика.

Донер алькатра пастрами пиг, стрип стэк ю ин франкфуртер оккейкат ин филт мингон чук шорт лойн нулла митлоф. Адиписцинг алика кильбаса нулла пройдент. Гроун раунд митлоф кевин, шанг адиписцинг пурк франкфуртер т-бон спейр райбс кюпидацат. Сед хэм нон дуйс эним, ин ipsum фугят ист тундж шорт рибс ад брезаола просциутто. Нон миним пиканья, ад ин оккейкат фугят вениам долор дезерунт.

3️⃣ схема backdrop

Кликните меня Привет! Закрыть <script> </script> </script>> Создание хорошего пользовательского опыта должно стать привычкой### Поддержка браузеров <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-boxshadow&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe> <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=dialog&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="528px"></iframe>