Как да направите светещ текст в 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 работи САМО в IE (Пълен BS btw, аз използвам 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.

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/cross-browser-drop-shadows - person GlennG; 05.03.2011
comment
@GlennG, повече от готов съм да приема това като отговор ;) Не е точно това, на което се надявах, но както изглежда и като си поиграя малко с него, мога да накарам това да работи както искам до :-) Благодаря! - person ; 05.03.2011

arrow_upward
11
arrow_downward

екранна снимка може да помогне да го разберете по-добре
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

Ако смятате, че имате отговор на този въпрос, моля, непременно го споделете. Тъй като няма да се откажа от това. Искам ефекта на блясък върху Text точно толкова, колкото искам кафето си всяка сутрин.

Междувременно намерих полу-добро, полу-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>
person Community    schedule 05.03.2011
comment
Хм Не си спомням да съм писал цял абзац два пъти. - person ; 05.03.2011
comment
Хахаха може би е време да отидете на лекар? - person Marko; 05.03.2011
comment
Евентуално. Въпреки това, трябва да накарам текста си да свети, преди да се ангажирам (или някой друг да ме ангажира) хаха :P - Но съвсем сериозно, Светещ текст; Бихте си помислили, че с всички супер страхотни неща, които могат да бъдат постигнати в момента в уеб дизайна, дори и преди HTML5/CSS3, бихте си помислили, може би дори очаквали, че ще можете да осветите малко текст, хаха. - person ; 05.03.2011