7.1 text-shadow 속성
CSS의 text-shadow 속성은 텍스트에 그림자를 추가하여 입체감을 더하고 시각적인 인식을 개선시킬 수 있습니다.
이 속성은 그림자의 오프셋, 블러 및 색상을 제어하는 유연한 설정을 제공합니다.
text-shadow 속성은 요소 내의 텍스트에 그림자를 설정합니다. 이 속성을 사용하면 그림자의 위치, 블러 및
색상을 제어하여 텍스트 요소에 시각적인 강조를 줄 수 있습니다.
문법:
element {
text-shadow: offset-x offset-y blur-radius spread-radius color;
}
파라미터:
offset-x: 수평 오프셋offset-y: 수직 오프셋blur-radius: 그림자의 블러 반경 (옵션)color: 그림자의 색상 (옵션)
값:
offset-x와offset-y: 텍스트에 대한 그림자의 오프셋을 설정합니다. 양수 또는 음수 값을 가질 수 있습니다blur-radius: 그림자의 블러 정도를 결정합니다. 값이 클수록 더 흐릿해집니다. 기본값은 0 (흐림 없음)입니다color: 그림자의 색상을 설정합니다. 색상이 지정되지 않은 경우 텍스트 색상이 사용됩니다
사용 예제:
.shadow-basic {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.shadow-blur {
font-size: 24px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.shadow-color {
font-size: 24px;
text-shadow: 2px 2px 2px red;
}
.shadow-multiple {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 2px rgba(0, 0, 0, 0.3);
}
<body>
<p class="shadow-basic">기본 그림자</p>
<p class="shadow-blur">블러 처리된 그림자</p>
<p class="shadow-color">색상 있는 그림자</p>
<p class="shadow-multiple">다중 그림자</p>
</body>
코드 설명:
.shadow-basic: 수평 및 수직 오프셋2px, 블러 반경2px및 반투명 블랙 색상으로 간단한 그림자를 적용합니다.shadow-blur: 더 큰 블러(5px)를 추가하여 더욱 흐릿한 그림자를 만듭니다.shadow-color: 색상(빨강)이 있는 그림자를 적용합니다.shadow-multiple: 다른 오프셋 및 블러가 있는 두 개의 그림자를 적용하여 복합적인 다중 레이어 효과를 만듭니다
7.2 예시
1. 부드러운 그림자
큰 블러 반경의 부드러운 그림자:
.soft-shadow {
font-size: 24px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
<body>
<p class="soft-shadow">부드러운 텍스트 그림자</p>
</body>
코드 설명:
.soft-shadow: 오프셋 없이 큰 블러 반경(10px)으로 부드러운 그림자를 적용하여 텍스트 주위에 부드러운 빛나는 효과를 만듭니다
2. 밝은 그림자
밝은 색상과 약간의 블러가 있는 그림자:
.colorful-shadow {
font-size: 24px;
text-shadow: 3px 3px 5px blue;
}
<body>
<p class="colorful-shadow">밝은 색상의 그림자</p>
</body>
코드 설명:
.colorful-shadow: 밝은 색상(파랑), 오프셋3px및 블러 반경5px의 그림자를 적용합니다
3. 여러 그림자
다양한 파라미터를 가진 여러 그림자:
.multi-shadow {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 0, 0, 0.5);
}
<body>
<p class="multi-shadow">여러 텍스트 그림자</p>
</body>
코드 설명:
.multi-shadow: 서로 다른 파라미터를 가진 두 개의 그림자를 적용합니다: 하나는 작은 오프셋과 블러가 있고, 다른 하나는 큰 오프셋과 붉은 색상의 큰 블러가 있습니다
7.3 중요한 포인트
text-shadow 사용 시 중요한 포인트
브라우저 호환성
text-shadow 속성은 Google Chrome, Firefox, Safari, Edge 및 Opera와 같은 모든 최신 브라우저에서 지원됩니다.
그러나 크로스 브라우저 호환성을 보장하기 위해 오래된 브라우저 버전에서의 그림자 표시를 확인하는 것이 중요합니다.
성능
여러 오프셋과 블러를 가진 복잡한 그림자는 특히 모바일 기기에서 성능에 영향을 미칠 수 있습니다. 성능을 최적화하고 다양한 기기에서 테스트하여 더 나은 성능을 위해 최적화해보세요.
접근성
그림자가 텍스트의 가독성을 저해하지 않도록 하세요. 텍스트와 배경 사이의 대비는 시각 장애가 있는 사람들을 포함한 모든 사용자를 위해 충분히 유지되어야 합니다.
text-shadow 속성은 CSS에서 텍스트 그림자를 만드는 강력한 도구를 제공합니다. 이 속성을 사용하면
간단한 그림자부터 다양한 색상과 블러가 있는 복합적인 다층 그림자까지 다양한 효과를 추가할 수 있습니다.
text-shadow를 사용하면 텍스트의 시각적 인식을 개선하고 웹 페이지 디자인에 깊이와 입체감을 더할 수 있습니다. 복잡한 그림자를 적용할 때는 브라우저 호환성과 성능을 기억하는 것이 중요하며, 모든 사용자를 위한 접근성을 항상 염두에 두세요.
GO TO FULL VERSION