Как сделать светящийся текст в HTML и CSS - PullRequest
Новая
       23

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

17 голосов
/ 05 марта 2011

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

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

Ответы [ 4 ]

34 голосов
/ 05 марта 2011

Поиграйте с CSS3 text-shadow, возможно. 

text-shadow: #EEEE00 0 0 10px;

IE8 и ниже его не поддержат, но тут пригодится filter. 

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

PS Небольшая небольшая особенность свойства text-shadow в CSS3 заключается в том, что оно допускает несколько теней. 

text-shadow: #EEEE00 0 0 10px, #FF0000 5px 5px 5px;
10 голосов
/ 02 марта 2014

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

enter image description here

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

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

enter image description here

1 голос
/ 11 февраля 2014

Попробуйте этот трюк 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;
   }
0 голосов
/ 05 марта 2011

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

Тем временем я нашел полу-хорошее, пол-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>
...