Как сделать светящийся текст в HTML и CSS

Я хочу сделать светящийся текст в HTML и CSS. Я следую этому руководству.

http://msdn.microsoft.com/en-us/library/gg589484(v=VS.85).aspx#creating_%22glow%22_effects_with_drop_shadows

Я хочу, чтобы текст светился так же, как кнопки сворачивания, развертывания и выхода в Windows Vista и 7 светятся, когда вы наводите на них курсор.

Я прочитал 8 руководств в Интернете, все говорят, что ФИЛЬТР работает ТОЛЬКО в IE (кстати, полная BS, я использую IE9 RC, и он даже не отображается), поэтому ни один из руководств, которые я нашел о свечении, на самом деле не работает для текста, такого как <p>, <a> <h1> и Т. Д.

Как сделать так, чтобы текст светился при наведении? (без изображений)


html css internet-explorer glow
person Community    schedule 05.03.2011    source источник
comment
CSS3 пока плохо поддерживается.   -  person yoda    schedule 05.03.2011
comment
Но, хорошо. Он не очень хорошо поддерживается ... пока. Это нормально. Но эффект свечения, очевидно, работает для div, я просто не понимаю, как он не будет работать для текста?   -  person    schedule 05.03.2011
comment
IE9 отказался от поддержки filter, я думаю, потому что это нестандартно. Однако почему-то он не поддерживает свойство text-shadow, что очень раздражает.   -  person Yi Jiang    schedule 05.03.2011
comment
Очень, очень раздражает. IE9 — не что иное, как чрезмерно преувеличенная шумиха. Как и продукты Apple. :-p Тем не менее, я должен признать, что у меня должно быть какое-то пристрастие к этим продуктам, так как я все равно всегда использую их.   -  person    schedule 05.03.2011

Ответы (4)


arrow_upward
34
arrow_downward

Возможно, поиграйте с текстовой тенью CSS3.

text-shadow: #EEEE00 0 0 10px;

IE8 и более ранние версии его не поддерживают, но здесь пригодится filter.

filter: glow(color=#EEEE00,strength=3);

P.S. Маленькая изящная особенность свойства text-shadow CSS3 заключается в том, что оно допускает несколько теней.

text-shadow: #EEEE00 0 0 10px, #FF0000 5px 5px 5px;
person Marko    schedule 05.03.2011
comment
Спасибо за Ваш ответ. text-shadow: #EEEE00 0 0 10px; Не работает в IE9 RC или IE9 Beta, текст не меняется, и последний образец text-shadow тоже не работает. :-С - person ; 05.03.2011
comment
Ах да, msdn.microsoft.com/en -us/library/cc351024%28v=vs.85%29.aspx поиск text-shadow, без поддержки! Microsoft снова терпит неудачу. - person Marko; 05.03.2011
comment
Мне так надоело слышать общее оправдание, что CSS3 все еще находится в рабочем проекте, а HTML5 все еще находится в рабочем проекте. Если это так, то почему Chrome уже поддерживает функцию X в HTML5 или функцию Y в CSS3? Почему Flock поддерживает это, почему Opera поддерживает это? И почему IE9 не поддерживает большую часть того, что уже поддерживает любой другой браузер? Таких вещей достаточно, чтобы превратить меня в полноценного психопата, лол. - person ; 05.03.2011
comment
Эта статья может быть полезна: workingwith.me.uk/articles /css/кросс-браузер-дроп-тени - person GlennG; 05.03.2011
comment
@GlennG, я более чем готов принять это как ответ ;) Это не совсем то, на что я надеялся, но, судя по всему, и немного поигравшись с этим, я могу заставить это работать так, как я хочу это :-) Спасибо! - person ; 05.03.2011

arrow_upward
11
arrow_downward

найти примеры здесь http://enjoycss.com/gallery/text_effects

введите здесь описание изображения

вы можете открыть каждый из них в редакторе и настроить любые параметры css3, а затем просто получить код css3, который вам нужен (он будет сгенерирован) с помощью enjoycss

например, http://enjoycss.com/39/1#textShadow

введите здесь описание изображения

person Nedudi    schedule 02.03.2014

arrow_upward
1
arrow_downward

Попробуйте этот CSS3-трюк!

.text-glow {/*Definig font could be useful!*/
   font-size:4em;
   color: #FFFFFF;
   font-family:Arial;
   }
.text-glow:hover {
text-shadow: 1px 0px 20px #ffd200;
-webkit-transition: 1s linear 0s;
-moz-transition: 1s linear 0s;
-o-transition: 1s linear 0s;
transition: 1s linear 0s;
outline: 0 none;
   }
person hamidfzm    schedule 10.02.2014

arrow_upward
0
arrow_downward

Если вы считаете, что у вас есть ответ на этот вопрос, пожалуйста, обязательно поделитесь им. Так как я не собираюсь отказываться от этого. Я хочу эффект свечения на тексте так же, как я хочу свой кофе каждое утро.

Тем временем я нашел наполовину хорошее, наполовину дерьмовое решение:

<DOCTYPE html>  
<html>
<head>
<title>HTML5 &amp; CSS3 Samples</title>
<style>
  p {
  filter:progid:DXImageTransform.Microsoft.Glow(Strength, Color, Enabled);
    }
</style>
</head>
<body>
<center>
<p>Welcome!</p>
</center>

</body>
</html>
person Community    schedule 05.03.2011
comment
Эм. Я не помню, чтобы набирал весь абзац дважды. - person ; 05.03.2011
comment
ахахаха может пора к врачу? - person Marko; 05.03.2011
comment
Возможно. Тем не менее, я должен заставить свой текст светиться, прежде чем я совершу сам (или кто-то другой совершит меня), ха-ха :P - А если серьезно, Glowing Text; Вы могли бы подумать, что со всеми потрясающими вещами, которые могут быть достигнуты прямо сейчас в веб-дизайне, даже до HTML5/CSS3, вы бы подумали, может быть, даже ожидали, что сможете подсветить текст, лол. - person ; 05.03.2011