Как сделать светящийся текст в 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 обучающих онлайн, все говорят, что FILTER ONLY работает в IE (полный BS btw, я использую IE9 RC, и он даже не отображается), поэтому ни один из учебников, которые я нашел о сиянии, действительно работает текст, например <p>, <a> <h1> и т.д.

Как я могу нарисовать свой текст при наведении курсора? (без изображений)

Ответы

Ответ 1

Возможно, есть игра с текстовой тенью 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;

Ответ 2

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

enter image description here

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

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

enter image description here

Ответ 3

Попробуйте этот трюк 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;
   }

Ответ 4

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

Я нашел полуподобное решение с половиной cr * p тем временем:

<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>