들어가며

최근 프로젝트에서 특정 텍스트를 블러 처리해야 하는 요구사항이 있었습니다. 처음에는 단순히 모자이크 효과만 생각했는데, CSS만으로도 여러 가지 흥미로운 방법이 있다는 걸 알게 되었습니다. 이전에는 텍스트를 감싸는 div를 relative로 만들고 그 안에 absolute, z-index 등을 조정한 반투명한 레이어를 올리는 식으로 구현했었는데 다른 방법이 없나 찾아보다가 공부하게 되었습니다.

 text-shadow로 블러 효과 구현하기

가장 먼저 시도해본 방법은 text-shadow와 color: transparent를 조합하는 것이었습니다:

<style>
.blur-text {
  color: transparent;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
</syle>

...

<div class="blur-text">이 텍스트는 블러 처리됩니다.</div>

...

이 방식의 특징은:

  1. 텍스트 자체는 투명하게 처리하고
  2. 그림자 효과로 블러된 모양을 만듭니다
  3. text-shadow의 세 번째 값(blur-radius)을 조절해서 블러 강도를 조절할 수 있습니다

 

 text-shadow의 응용

다른 활용방법은 없나 찾아보다가 예제를 만들어보게 되었습니다.

/* 네온 사인 효과 */
.neon-text {
  color: #fff;
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #0ff,
    0 0 40px #0ff;
}

/* 텍스트 외곽선 효과 */
.outline-text {
  color: white;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

text-shadow의 값들을 여러 번 지정하면 레이어처럼 쌓이는 효과를 만들 수 있습니다.

네온 사인 효과의 경우:
1. 가장 안쪽부터 바깥쪽으로 점점 커지는 흰색 그림자(0 0 5px #fff, 0 0 10px #fff)로 빛나는 듯한 느낌을 주고
2. 그 위에 하늘색 그림자(0 0 20px #0ff, 0 0 40px #0ff)를 더해 네온 특유의 번짐 효과를 만듭니다

외곽선 효과는 좀 더 재미있는 접근인데요:
1. 텍스트의 상하좌우 네 방향에 1px 크기의 검정 그림자를 배치해서
2. 마치 텍스트에 외곽선을 그린 것처럼 보이게 만듭니다

 

 

 filter: blur 활용하기

/* 기본 블러 */
.blur-element {
  filter: blur(5px);
}

/* 블러와 밝기 조절 */
.blur-and-dark {
  filter: blur(3px) brightness(80%);
}

/* 여러 필터 조합하기 */
.filter-combo {
  filter: blur(2px) brightness(150%) grayscale(50%);
}

filter 속성은 포토샵의 필터처럼 다양한 시각적 효과를 줄 수 있습니다:

기본 블러의 경우:
- blur(5px)는 요소를 마치 핀트가 안 맞는 사진처럼 흐릿하게 만듭니다
- 픽셀값이 클수록 더 흐릿해집니다 블러와 밝기를 조절한 경우:
- blur(3px)로 약간의 흐림 효과를 주고
- brightness(80%)로 전체적인 밝기를 20% 낮춰서
- 마치 서리유리를 통해 보는 것 같은 효과를 만듭니다

필터 조합의 경우:
- blur(2px)로 살짝 흐리게 하고
- brightness(150%)로 밝기를 50% 높이고
- grayscale(50%)로 컬러를 절반만 남겨서
- 마치 빛에 바랜 듯한 효과를 만들어냅니다 이렇게 여러 필터를 조합하면 단순한 블러 이상의 다양한 효과를 만들 수 있습니다.

 예제 통합

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      max-width: 800px;
      margin: 40px auto;
      padding: 0 20px;
    }
    
    .demo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin: 20px 0;
    }
    
    .demo-item {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
    }
    
    .demo-label {
      font-size: 14px;
      color: #666;
      margin-bottom: 10px;
    }
    
    .blur-text {
      color: transparent;
      text-shadow: 0 0 5px rgba(0,0,0,0.5);
      font-size: 20px;
    }
    
    .neon-text {
      color: #fff;
      text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #0ff,
        0 0 40px #0ff;
      font-size: 20px;
      background: #333;
      padding: 10px;
    }
    
    .outline-text {
      color: white;
      text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
      font-size: 20px;
      background: #f0f0f0;
    }
    
    .blur-element {
      filter: blur(5px);
      font-size: 20px;
    }
    
    .blur-and-dark {
      filter: blur(3px) brightness(80%);
      font-size: 20px;
    }
    
    .filter-combo {
      filter: blur(2px) brightness(150%) grayscale(50%);
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h2>CSS 블러 효과 데모</h2>
  
  <div class="demo-grid">
    <div class="demo-item">
      <div class="demo-label">text-shadow 블러</div>
      <div class="blur-text">안녕하세요</div>
    </div>
    
    <div class="demo-item">
      <div class="demo-label">네온 효과</div>
      <div class="neon-text">네온사인</div>
    </div>
    
    <div class="demo-item">
      <div class="demo-label">외곽선 효과</div>
      <div class="outline-text">외곽선</div>
    </div>
    
    <div class="demo-item">
      <div class="demo-label">filter: blur()</div>
      <div class="blur-element">블러 필터</div>
    </div>
    
    <div class="demo-item">
      <div class="demo-label">blur + brightness</div>
      <div class="blur-and-dark">블러 + 어둡게</div>
    </div>
    
    <div class="demo-item">
      <div class="demo-label">여러 필터 조합</div>
      <div class="filter-combo">필터 조합</div>
    </div>
  </div>
</body>
</html>

 

 실제 구현 결과

생각보다 네온사인은 적절히 사용하면 꽤 괜찮은 상황이 있을 것 같고

개인적인 저의 취향에는 text-shadow 블러를 가볍게 사용하거나 filter blur를 쓸 때는 brightness를 같이 사용하고 싶네요

 

각 효과의 특징과 활용법

실제로 구현해보니 각각의 방식이 장단점이 있었습니다

  1. text-shadow 방식:
    • 텍스트만 블러 처리가 필요할 때 좋습니다
    • 투명도와 그림자 강도를 조절해 다양한 효과를 낼 수 있습니다
    • 네온사인이나 외곽선 같은 특수한 효과도 만들 수 있습니다
  2. filter: blur 방식:
    • 요소 전체에 블러를 주고 싶을 때 좋습니다
      • 이미지에 대한 블러라던지 페이지 자체에 대한 블러처리에선 더 간편하게 줄 수 있습니다.
    • brightness, grayscale 등 다른 필터와 조합이 가능합니다
    • 블러 정도를 픽셀 단위로 정확하게 조절할 수 있습니다
저작자표시

'코딩이야기 > HTML & CSS' 카테고리의 다른 글

[CSS] aspect-ratio로 반응형 캐러셀 최적화하기 - DOM 중첩 없이 비율 유지하는 방법  (2) 2024.10.24
[HTML/CSS] hover 이벤트시 다른 클래스, id 에도 효과를 주는 법  (0) 2023.02.07
[HTML & CSS] Hover의 이벤트들 cursor의 속성들.  (0) 2022.10.23
[HTML5 & CSS] 속성 선택자  (0) 2022.08.09
입력에 필요한 태그와 속성 (HTML & CSS) 01  (0) 2022.07.18

+ Recent posts

티스토리툴바