2011-03-05 1 views
16

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 개의 튜토리얼을 읽었으며 (IE9 RC를 사용하고 있으며 심지어 표시되지도 않음) IE에서만 필터 만 작동한다는 것을 알았습니다. 따라서 실제로 빛나는 작업에 대한 자습서는 없었습니다. <p>, <a> <h1> 등과 같은 텍스트의 경우

텍스트를 가리 키도록하려면 어떻게해야합니까? (이미지 제외)

+1

CSS3는 아직 잘 지원되지 않습니다. – yoda

+0

하지만 괜찮습니다. 그것은 잘 지원되지 않습니다 ... 아직. 괜찮아. 그러나 글로우 효과는 div에서 분명히 효과가 있습니다. 텍스트로는 어떻게 작동하지 않을지 이해하지 못합니다. –

+2

IE9는'filter'에 대한 지원을 중단 시켰습니다. 비표준이기 때문에 믿습니다. 그러나 어쨌든 * 매우 성가신'text-shadow' 속성을 지원하지 않습니다. –

답변

32

아마도 CSS3 텍스트 그림자로 게임을하십시오.

text-shadow: #EEEE00 0 0 10px; 

는 IE8 이하는 지원하지 않지만 filter가 유용 곳이다.

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

P. CSS3 텍스트 그림자 속성의 깔끔한 작은 기능은 여러 그림자를 허용한다는 것입니다. 당신이이 질문에 대한 대답을 생각하는 경우

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

답변 해 주셔서 감사합니다. * text-shadow : # EEEE00 0 0 10px; * IE9 RC 또는 IE9 Beta에서는 작동하지 않으며 텍스트가 변경되지 않고 마지막 텍스트 그림자 샘플도 작동하지 않습니다. : -S –

+1

Ahh true, http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx 텍스트 - 그림자 검색, 지원 안 함! Microsoft는 다시 실패합니다. – Marko

+1

"CSS3는 아직 초안 작업 중"이고 "HTML5는 아직 초안 작업 중입니다"라는 일반적인 핑계를 듣는 데 지겹다. 그렇다면 Chrome이 HTML5에서 기능 X를 지원하거나 CSS3에서 기능 Y를 지원하는 이유는 무엇입니까? Flock이 왜 이것을 지원합니까? 오페라가이를 지원하는 이유는 무엇입니까? IE9가 다른 브라우저가 이미 지원하는 것을 대부분 지원하지 않는 이유는 무엇입니까? 이런 종류의 일은 저를 본격적인 정신병자 롤에 넘기기에 충분합니다. –

0

은 모든 수단에 의해 공유하시기 바랍니다. 나는 이것을 포기하지 않을 것이다. 나는 매일 아침 커피를 마시고 싶을만큼 텍스트에 글로 효과를주고 싶다.

나는 그 동안 반 좋은, 반 이러다 * 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> 
+1

음. 전체 단락을 두 번 입력하는 것을 기억하지 않습니다. –

+0

아마도 의사를 볼 시간입니까? – Marko

+0

가능합니다. 그러나, 나는 나 자신 (또는 다른 누군가 저를 저 지르게한다)을하기 전에 빛을 발하게해야한다 : P - 그러나 모든 진지함에서, 빛나는 텍스트; 웹 디자인, 심지어 HTML5/CSS3 이전까지도 달성 할 수있는 멋진 모든 것들을 생각하면 어쩌면 텍스트를 볼 수 있을지도 모른다고 생각했을 것입니다. –

1

이 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; 
    }