Как сделать размытие ограниченной области веб-страницы?

Question

[romamartynov]

Как реализовано размытие контента под блоком с надписью «Чат представлен Jivosite»?

(Посмотреть вживую — www.jivosite.ru)

Answer 1

[Everlier]

Видится box-shadow, но нужно уточнить, что вы понимаете под размытием контента :)

Comments

[romamartynov]

Вообще, мне необходимо реализовать размытие всего контента веб-страницы (текста, фонов, фотографий, чего угодно) под всплывающим блоком. CSS-3 фильтры не годятся ввиду скорости работы и плохой кроссбраузерности, но хочется какое-то более «красивое» решение, чем изобретать костыли через text-shadow.

В данном примере просто предложил вариант, от которого можно оттолкнуться при реализации подобного

Answer 2

[Alexander Sydorenko]

Для бекграунда верхней панели (там где написано Jivosite) используется png с полу-прозрачностью, текст "Чат предоставлен" написан над этим бекграундом, а текст чата при прокрутке прячется под этим бекграундом. Кажется все, больше никаких особых фокусов.

Обманул.. на самом деле этот фокус делает вот этот код

.messages-div-blurred {
    -webkit-filter: blur(5px);
    filter: url(#blur-effect); 
    opacity: .45;
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 30px;
}

Сверху еще ложиться блок с абсолютным позиционированием, высоты 30 пикселей, и фильтром blur..

Answer 3

[iDennis]

в web kit есть blur ещё есть blur js и экран можно получить канвой

Answer 4

[Виктор]

Надо сделать текст прозрачным и добавить не прозрачную тень.

color: transparent;
text-shadow: 1px 1px 4px #555;
font-size: 25px;