Размывание Div с CSS - PullRequest
       4

Размывание Div с CSS

1 голос
/ 18 декабря 2010

Можно ли размыть div с CSS3? И я не имею в виду размытие javascript, я имею в виду размытие в фотошопе.

Я не хочу, чтобы края div были размытыми, я хочу, чтобы содержимое div тоже было размытым. (Я слишком много спрашиваю из браузеров?)

Если это невозможно, какие бы хорошие методы обхода?

Ответы [ 2 ]

3 голосов
/ 18 декабря 2010

Это возможно с SVG-фильтром.

Основа этого в том, что это просто feGaussianBlur.

Вот оно: http://jsfiddle.net/aXUtU/1/

Это работает в Firefox 4 и должно работать с 3.5 и выше, за исключением использования элемента svg без содержимого namespace / xmlns (я думаю, что это должно работать в 3.6).

Есть некоторые проблемы с тем, какмного места он дает ему течь;если вы укажете этот текст на одну строку, вы увидите, что последнее, в частности, обрезается.


В зависимости от вашего контента, объединение нескольких box-shadow s (inset и outset) и text-shadow может достичь аналогичного эффекта.Ссылка выше также содержит начало для достижения аналогичного эффекта на текст.

1 голос
/ 18 декабря 2010

Ну ... я придумал это:

.blur {
    color: transparent;
    text-shadow: 0px 0px 2px #000000;
}

Это сделает текст размытым, наверняка! Единственное, что это сделает только текст размытым. Нет изображения затронуты или что-нибудь. Но я думаю, что вместе с этим http://plugins.jquery.com/project/blurimage вы могли бы сделать его более мощным!

Веселитесь с экспериментами!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...