2013-07-25 4 views
2
  1. Я ищу способ/дема, чтобы сделать дополнительную плотный текст тень от JQuery (кросс-браузера, совместимого, как JQuery есть.), Которые могут не возможно простым CSS. с поддержкой IEJQuery густой тень текста и размытый фон

    несколько теней немного покрывают его. но проблема в том, что я думаю, что проблема с совместимостью с браузером. и jQuery покрывает его. Вот почему вам нужен способ jQuery.

  2. Простой фон прозрачность легко и просто в CSS, но сделать цвет фона также с прозрачным и размыто эффект так, что картина (или что-нибудь) на спине наиболее четко не видно


Важно:

мне нужна совместимость кросс-браузер и поддержку некоторых старых браузеров, так вот почему я выбрал JQuery над CSS


Может быть так же, как в окнах 7 заголовка?

Я видел оба вышеупомянутых в прошлом, но, к сожалению, я не могу вспомнить, где.

Если кто-то знает способ или демонстрацию, я буду благодарен.

Примечание: Я НЕ хочу, чтобы на основе CSS-фона или тени текста. образец тени текста, который я нашел немного близко к тому, что я хочу. его минимальный плотный, хотя того, чего я хотел.

enter image description here

enter image description here

enter image description here

enter image description here

+0

Я знаю, что вам не нужна текстовая тень, но это работает хорошо: '.blur { цвет: черный; text-shadow: 0 0 15px rgba (0,0,0,1); } ' –

+0

нет нет. у этого есть css ограничения на интенсивность теней. вот моя проблема: –

+0

[Можно применить несколько теней текста] (https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow). –

ответ

1

Вот более кросс-браузерная реализация CSS с сложенной тенью!

.blur { 
    color: black; 

    /* Chrome, Firefox 3.5+, IE 10+, Opera 9+, Safari 1+ */ 
    text-shadow: 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1); 

    /* The webkit implementations to support more SOME older browsers */ 
    -moz-text-shadow: 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1); 
    -webkit-text-shadow: 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1); 
    -khtml-text-shadow: 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1); 
} 

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

ОТНОСИТЕЛЬНО размывание A DIV

нашел что-то УДИВИТЕЛЬНЫЙ!

http://www.blurjs.com/

Если это не работает, вот переполнение стека ответ.

Blur background of a div

Этот метод использует HTML5, и, к сожалению, не будут совместимы с супер старыми браузерами. Как правило, div должен быть в курсе фона и накладывать размытую версию этого фона сверху.

+0

Что касается IE, вероятно, это не сработает для <= IE9, но попробуйте! –

+0

есть. спасибо за хороший ответ, некоторые ответы уже говорили об этом. но главная проблема, с которой я столкнулся, - это размытие div one now –

+0

http://www.blurjs.com/ - это плагин для jquery, который делает то, что вам нужно. –

0

Это, очевидно, возможно, но только на WebKit браузерах, через

-webkit-filter: blur(123px); 
filter: blur(123px); 

See this demo и отрегулируйте свойство размытия.

+0

вот вопрос о поддержке для других браузеров: http://stackoverflow.com/questions/15803122/filter-blur1px-doesnt-work-in-firefox-ie-and-opera – mrzmyr

0

На самом деле это легко сделать, используя простой CSS3, просто складывайте тени, чтобы сделать их более интенсивными. Возможно, это лучшее решение, но это хорошо работает, и это легко сделать. Кроме того, если вы используете Less/Stylus, вы можете сделать из него функцию, чтобы лучше контролировать интенсивность тени.

.blur { color: black; text-shadow: 0 0 5pt black, 0 0 10pt black, 0 0 15pt black; } 

Что касается размытого фона, я вижу еще один ответ уже решил, что :)

+0

очень верно, но проблема в том, что я думаю старой проблемы совместимости с браузером. и jQuery покрывает его. Вот почему вам нужен способ jQuery. –

Смежные вопросы