글로우(Glow) 효과란?
글로우 효과는 객체 주위에 빛이 번지는 듯한 후광을 만들어내는 CSS 필터입니다. 특히 투명 배경을 가진 이미지에 적용하면, 불투명한 픽셀 영역을 따라 자연스럽게 빛이 퍼지는 효과를 얻을 수 있습니다.
글로우 필터의 주요 매개변수
글로우 필터에서 사용할 수 있는 매개변수는 다음과 같습니다.
| 번호 | 매개변수 및 설명 |
|---|---|
| 1. | Color 글로우(빛 번짐)에 적용할 색상을 지정합니다. |
| 2. | 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>
코드 설명
이미지에는 Chroma 필터를 함께 사용하여 검은색(#000000) 배경을 투명하게 처리한 뒤, 그 위에 Glow 필터를 적용했습니다. 이렇게 하면 로고의 불투명한 부분만 남기고 그 가장자리에 초록색(#00FF00) 빛이 강도 20으로 번지게 됩니다.
텍스트가 적용된 div 요소 역시 동일한 방식으로 글로우 필터를 지정하여, 붉은색 텍스트 주위로 초록색 후광이 나타나도록 했습니다.
참고: 최신 브라우저에서의 대체 방법
위의 Filter: Glow() 문법은 구형 인터넷 익스플로러(IE) 전용 속성으로, 현재 대부분의 최신 브라우저에서는 지원되지 않습니다. 현대적인 웹 개발에서는 다음과 같은 표준 CSS 속성으로 유사한 효과를 구현하는 것이 좋습니다.
- box-shadow: 요소 박스 주위에 빛 번짐 효과를 추가합니다.
- text-shadow: 텍스트에 글로우 효과를 적용합니다.
- filter: drop-shadow(): 이미지나 투명 PNG의 실제 형태를 따라가는 그림자·빛 효과를 만듭니다.
예를 들어 텍스트 글로우는 text-shadow: 0 0 10px #00FF00;, 이미지 글로우는 filter: drop-shadow(0 0 10px #00FF00);처럼 간단히 작성할 수 있습니다.