Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Размытие фона (https://javascript.ru/forum/events/50584-razmytie-fona.html)

devastor 02.10.2014 19:37

Размытие фона
 
Друзья, сегодня я наткнулся на потрясающую вещь: http://callbackhunter.com/
Кто может объяснить как размывается фон, при нажатии на Демо?
Я думал такое сделать невозможно...

devastor 02.10.2014 19:40

Вопрос снимаю, нашёл отличную библиотеку - http://www.blurjs.com/

danik.js 02.10.2014 20:00

Не лучший вариант. Тяжелая библиотека с ограниченными возможностями. Вот простой вариант:
<style>
.blur{
    -webkit-filter: blur(3px);
    -ms-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    filter: blur(3px);
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='3'/></filter></svg>#blur");
}
</style>

<div class="blur">Это замытый блок <img src="http://javascript.ru/forum/images/smilies/tongue.gif" /></div>


Именно этот способ используется на сайте callbackhunter

Поддержка - смотри на caniuse. Вроде работает в хроме и файрфоксе. ИЕ и старая опера - в пролете, но много ли их пользователи потеряют?

devastor 02.10.2014 20:04

Шикарно! Спасибо!

kostyanet 04.10.2014 19:51

Буквальная реализация событий focus и blur, это кажется упыри в Микрософте придумали первыми, или нет? Чтобы вообще никаких шансов работать в окнах - МС Дос рулит.

kostyanet 04.10.2014 20:07

Сайтец оказывается безответный, на такой можно знаете что сделать - снимок, в ФШ размыть и зафигачить фоном в оверлей.


Часовой пояс GMT +3, время: 17:26.