Эффект размытия для части экрана CSS с помощью iframe

Редко, но все же возникает потребность сделать что нибудь этакое.. Этот пример хорошо иллюстрирует одну из таких задач на мой взгляд. Представьте, что Вам поручили сделать фиксированное прозрачное меню на заднем фоне которого должен быть размытый контент страницы. Для решения этой задачи я вижу только один выход - использовать iframe, чтобы скопировать содержимое страницы в отдельный блок и размыть этот блок Html разметка примерно вот такая:

<iframe src="<?= $_SERVER['REQUEST_URI'] ?>" class="blured blured-region" scrolling="no">
</iframe> 
 
CSS код выглядит таким образом:

.blured-region {
    width: 100%;
    height: 100px;
    position:fixed;
    top: 0;
    left: 0;
    border: none;
    outline: none;
    overflow: hidden;
    z-index: 100;
} 
 
А в JS придется синхронизировать текущую прокрутку документа и прокрутку iframe

Комментарии

Популярные сообщения из этого блога

Установка утилиты yandex disk для ubuntu

Отправка пост запроса AngularJS