web-dev-qa-db-ja.com

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ですが、IE9 RCを使用しており、表示さえしません）で機能すると言っているので、持っているチュートリアルはありません。輝きについて見つかった実際には<p>, <a> <h1>など.

ホバー時にテキストを光らせるにはどうすればよいですか？ （画像なし）

htmlinternet-explorercssglow
17
anon271334

CSS3のテキストシャドウを試してみてください。

text-shadow: #EEEE00 0 0 10px;

IE8以前ではサポートされていませんが、filterが役に立ちます。

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

P.S。 CSS3のtext-shadowプロパティの優れた小さな機能は、複数の影を許可することです。

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

ここに例を見つける http://enjoycss.com/gallery/text_effects

enter image description here

それぞれをエディターで開き、css3パラメーターを調整して、enjoycssで必要な（生成される）css3コードを取得するだけです。

たとえば http://enjoycss.com/39/1#textShadow

enter image description here

10
Nedudi

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

この質問への回答があると思われる場合は、ぜひ共有してください。これをあきらめるつもりはないので。私は毎朝コーヒーを飲みたいのと同じくらいテキストにグロー効果を加えたいです。

その間、私は半分良い、半分の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>
0
anon271334