четверг, 23 ноября 2017 г.

Эффект размытия для части экрана 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

Комментариев нет:

Отправить комментарий

Linux командная строка узнаем оставшееся место

Чтобы посмотреть общую картину того, сколько места осталось в системе можно выполнить команду: df -h Чтобы вывести на экран сколько мес...