Задать вопрос
Alexanevsky
@Alexanevsky
Любительская web-разработка
javascript

Как слелать размытие контента сайта?

Здравствуйте!

Довольно частое явление, когда появляется всплывающее окно на сайте, а всё остальное содержимое затемняется - вот так. Это реализуется достаточно просто.

Хочется сделать так, чтобы фон не затемнялся, а размывался - как-то так.

Можете подсказать, как это сделать?
Если не сложно, дайте пожалуйста код или ссылочку, где это всё это хорошо расписано.

Толковой информации по реализации этого на jQuery я не нашёл.

С уважением,
Александр.
  • Вопрос задан
  • 12246 просмотров
Комментировать
Подписаться 14 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 5
irostovtsev
@irostovtsev
Короткий и практичный пример.
CSS:
.blur {
        filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px);
	-o-filter: blur(3px); -ms-filter: blur(3px);
	filter: url(blur.svg#blur);
}

Использовать можно так:
<body class="blur">

Так же хороший вариант предложил Вадим, могу сказать, что CSS3 класс работет. Для будущих читательей размещу код здесь, на случай исчезновения ссылки:

.css3-gaussian-blur *
{
    text-shadow: 0 0 10px rgba(0, 0, 0, .5) !important;
    color: transparent !important;
    background-image: none !important;
    border-color: rgba(0, 0, 0, .05) !important;
    /* disable the pointer events for blurred zones */
    -moz-pointer-events: none !important;
    -webkit-pointer-events: none !important;
    pointer-events: none !important;
}

 .css3-gaussian-blur input,
 .css3-gaussian-blur textarea,
 .css3-gaussian-blur button,
 .css3-gaussian-blur select
{
    box-shadow: 0 0 10px rgba(0, 0, 0, .5) !important;
    border-color: rgba(0, 0, 0, .05) !important;
    resize: none !important;
    opacity: .5 !important;
}

 .css3-gaussian-blur img,
 .css3-gaussian-blur input,
 .css3-gaussian-blur input[type="file"],
 .css3-gaussian-blur input[type="checkbox"],
 .css3-gaussian-blur input[type="radio"]
 .css3-gaussian-blur textarea,
 .css3-gaussian-blur select
{
    opacity: .2 !important;
    background: transparent none !important;
}

 .css3-gaussian-blur fieldset
{
    border-color: transparent !important;
}

/* Vendor-specific styles */
/* CSS3 filters are currently supported by Chrome only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
     .css3-gaussian-blur img
    {
        -webkit-filter: blur(15px) !important;
        filter: blur(15px) !important;
        opacity: 1 !important; /* restore the opacity for that browser */
    }
}

/* IE<10 styles using the \9 hack */
 .css3-gaussian-blur img
{
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=20)\9 !important; /* IE has native support for filters since version 5.5 */
    -ms-filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=20)\9 !important; /* IE has native support for filters since version 5.5 */
    opacity: 1\9 !important;
}

 .css3-gaussian-blur *
{
    color: #ccc !important\9;
}

Использовать можно так:
<body class="css3-gaussian-blur">
Ответ написан
5 комментариев
5 комментариев
VitaZheltyakov
@VitaZheltyakov
habrahabr.ru/post/144852
Фильтер Blur. По другому пока никак
Ответ написан
Комментировать
Комментировать
Talyutin
@Talyutin
Фильтры SVG можно попробовать
Ответ написан
1 комментарий
1 комментарий
@bogomazov_vadim
Погуглил и нашел такие линки:
acidmartin.wordpress.com/2012/12/01/css3-gaussian-...
www.blurjs.com
Ответ написан
Комментировать
Комментировать
@whats
Фон картинкой, не ?
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Смонтировать видео
23 нояб. 2024, в 01:31
1000 руб./за проект
Настроить сайт
23 нояб. 2024, в 00:16
2000 руб./за проект
Разобрать текущий ETL-процесс
22 нояб. 2024, в 23:55
3000 руб./за проект
Ещё заказы