글로우(Glow) 효과는 개체 주위에 빛이 번지는 듯한 광선을 만들어 주는 시각 효과입니다. 특히 투명한 이미지에 적용하면 불투명한 픽셀 영역을 따라 자연스럽게 빛이 감싸이도록 표현할 수 있습니다.
글로우 필터의 매개변수
글로우 필터에서 사용할 수 있는 주요 매개변수는 다음과 같습니다.
| 매개변수 | 설명 |
|---|---|
| Color | 광선에 적용할 색상을 지정합니다. |
| Strength | 광선의 세기를 지정합니다. 값 범위는 1부터 255까지입니다. |
예제 코드
아래 예제를 실행하면 이미지와 텍스트 주위에 녹색 광선 효과가 적용되는 것을 확인할 수 있습니다.
<html> <head> </head> <body> <img src="/css/images/logo.png" alt="CSS Logo" style="Filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)"> <p>텍스트 예제:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div> </body> </html>
참고: 최신 CSS에서의 대안
위의 Glow 필터는 구버전 Internet Explorer에서만 동작하는 비표준 속성으로, 현재는 더 이상 사용되지 않습니다. 최신 브라우저에서 유사한 효과를 구현하려면 다음과 같은 표준 CSS 속성을 사용하는 것이 좋습니다.
- box-shadow: 이미지나 박스 요소 주위에 빛 번짐 효과를 줄 수 있습니다. 예:
box-shadow: 0 0 20px #00FF00; - text-shadow: 텍스트 주위에 광선 효과를 적용할 수 있습니다. 예:
text-shadow: 0 0 10px #00FF00; - filter: drop-shadow(): 투명 배경을 가진 PNG 이미지의 실제 모양을 따라 광선을 만들어 줍니다.
이러한 표준 속성은 크로스 브라우저 호환성이 뛰어나므로 실무에서는 이를 활용해 글로우 효과를 구현하는 것이 바람직합니다.