Размытие блока

Allusik 19.07.2014 css,javascript
Здравствуйте! Подскажите, как можно сделать, чтоб блок и всё что в нем находится сделать размытым? Нужен такой эффект, как будто на него смотришь через матовое стекло.

3 комментария

Incode 20.07.2014 00:33
@Allusik, тут не всё так радужно. Давайте хотя бы определимся с браузерами, в которых вы такой эффект хотели бы видеть. Ну, например, рассчитываете ли вы на IE8 или 9-ой версии. И что за контент в этом блоке? Изображения, текст или может быть всё вместе?

P.S. В общем, пока вы раздумываете, вот вам такой плагинчик. Он более-менее кроссбраузерный и вполне возможно, что подойдёт и вам. Или такой вариант. Только вот самой главной проблемкой, как это ни странно, остается IE10+... И седьмой и восьмой ослик поддаются дрессировке, а с этими - бяда.
Allusik 20.07.2014 15:04
Спасибо за ссылочки, пригодятся. Но как-то не очень хотелось бы для одноразовой задачи целый плагин подключать. Может есть какой-то более простой способ? Пусть даже не для всех браузеров.
Incode 20.07.2014 20:44
Да, кое-что можно придумать. Пробуйте следующее:
selector {
    -webkit-filter: blur(5px); /* Chrome, Safari 6.1+, Opera 22+, Android 4.4+ */
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='3'/></filter></svg>#blur"); /* FireFox */
    filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=5); /* IE8-9 */
}
Ваш комментарий:
X