четверг, 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

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

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

Mysql настройка режима

Для настройки режима mysql не обязательно править конфиги можно выполнить команду mysql > set global sql_mode = 'STRICT_TRANS_TAB...