web-dev-qa-db-fra.com

Comment faire du texte lumineux en HTML et CSS

Je veux faire du texte lumineux en HTML et CSS. Je suis ce tutoriel.

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

Je veux que le texte brille, tout comme les boutons minimiser, maximiser et quitter sous Windows Vista et 7 brillent lorsque vous les survolez.

J'ai lu 8 tutoriels en ligne, tous disant que FILTER fonctionne UNIQUEMENT sur IE (Complete BS btw, j'utilise IE9 RC et il ne s'affiche même pas), donc aucun des tutoriels que j'ai trouvé sur incandescent fonctionne réellement pour le texte comme <p>, <a> <h1> etc.

Comment puis-je faire briller mon texte en survol? (sans images)

htmlinternet-explorercssglow
17
anon271334

Jouez peut-être avec CSS3 text-shadow.

text-shadow: #EEEE00 0 0 10px;

IE8 et les versions antérieures ne le prendront pas en charge, mais c'est là que filter est utile.

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

P.S. Une petite fonctionnalité intéressante de la propriété CSS3 text-shadow est qu'elle autorise plusieurs ombres.

text-shadow: #EEEE00 0 0 10px, #FF0000 5px 5px 5px;
34
Marko

trouver des exemples ici http://enjoycss.com/gallery/text_effects

enter image description here

vous pouvez ouvrir chacun d'eux dans l'éditeur et ajuster les paramètres css3, puis obtenir le code css3 dont vous avez besoin (il sera généré) par enjoycss

par exemple http://enjoycss.com/39/1#textShadow

enter image description here

10
Nedudi

Essayez cette astuce 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;
   }
1
hamidfzm

Si vous pensez avoir une réponse à cette question, n'hésitez pas à la partager. Comme je ne vais pas abandonner cela. Je veux l'effet d'éclat sur le texte autant que je veux mon café tous les matins.

J'ai trouvé une solution mi-bonne, mi-cr * p en attendant:

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