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

?> Обзор знаний: css-boxshadow, HTML < dialog >```markdown

<script v-pre type="text/x-template" id="blurry-weaken-background"> <style> main { width: 100%; user-select: none; font: 14px / 1 Helvetica, sans-serif; } main { transition: 0.6s filter; padding: 30px 50px; hyphens: auto; text-align: justify; } main.de-emphasized { filter: blur(5px); } main .btn { padding: 6px 1em; border-radius: 3px; outline: none; } dialog { width: 400px; height: 120px; text-align: center; line-height: 84px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.5), 0 0 0 50vmax rgba(0,0,0,0.3); z-index: 99; } dialog:not([open]) { display: none; } </style> ```Среди них нетонные джунов, ин ipsum фугят, ист тунг шорт рейбс ад брезаола просциутто. Нон миним пишанха, ад ин окаецат фугят вениам долор дезерунт. Привет~ Я диалоговое окно. Щелкните чтобы закрыть. <script> module.exports = { methods: { handleBtnClick: function(e) { this.$refs.dialog.show(); this.$refs.main.classList.add('de-emphasized'); }, handleDialogClick: function(e) { this.$refs.dialog.close ? this.$refs.dialog.close() : null; this.$refs.main.classList.remove('de-emphasized'); } } } </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>