Text Shadow Generator
CSS text shadow
CSS text shadow 브라우저에서 로컬로 실행됩니다.
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.30);
About the
텍스트 그림자 생성기는 실시간 미리보기 및 CSS를 통해 텍스트 뒤 그림자의 오프셋, 흐림, 색상 및 불투명도를 설정합니다. box-shadow와 달리 스프레드 값이 없어 사람들의 관심을 끌게 됩니다. 텍스트 그림자를 더 무겁게 만드는 유일한 방법은 하나의 선언에 여러 개의 그림자를 쌓는 것입니다. 이는 사진의 밝은 텍스트 뒤에 은은한 어두운 그림자를 가미하여 가독성을 높이는 데 가장 유용하며, 배경이 바뀌는 순간 사라지기 때문에 텍스트를 읽을 수 있게 만드는 역할을 해서는 안 됩니다.
Where people use the
- 사진 위에 캡션을 읽을 수 있도록 미묘한 그림자를 추가합니다.
- 압착 또는 각인된 제목 효과 만들기.
- 복고풍 또는 네온 텍스트 처리를 생성합니다.
- 저렴해 보이기 전에 그림자가 얼마나 무거워야 하는지 테스트합니다.
How to use the
- 1
오프셋 설정
오프셋 X는 오른쪽으로 이동하고 오프셋 Y는 아래로 이동합니다. 1개 또는 2개의 픽셀 오프셋은 깊이로 읽혀집니다. 더 큰 것은 그림자처럼 보이기 시작합니다.
- 2
흐림 설정
흐림 효과는 가장자리를 부드럽게 합니다. Zero는 텍스트의 하드 복제본을 제공하여 윤곽선 및 복고풍 효과가 만들어지는 방식입니다.
- 3
색상 및 불투명도 선택
밝은 배경의 어두운 텍스트에는 밝은 그림자가 필요하고 그 반대의 경우도 마찬가지입니다. 뚜렷한 효과를 원하지 않는 한 불투명도를 낮게 유지하십시오.
- 4
CSS를 복사하세요
규칙에는 붙여넣을 준비가 된 rgba 색상이 포함되어 있습니다.
- 5
더 많은 무게가 필요한 경우 그림자를 쌓으세요.
스타일시트에 쉼표로 구분된 두 번째 그림자를 추가하세요. 스프레드가 없기 때문에 이것이 텍스트 그림자를 두껍게 하는 유일한 방법입니다.
팁 및 모범 사례
- 적을수록 좋습니다. 불투명도가 낮은 픽셀 1~2개는 흐릿한 효과보다 좋습니다.
- 접근성을 위해 그림자에만 의존하지 마십시오. 아래의 대비를 수정하세요.
- 속성이 상속된다는 점을 기억하세요. 따라서 원하는 요소로 범위를 지정하세요.
자주 묻는 질문
왜 스프레드 가치가 없나요?
text-shadow는 지원하지 않기 때문입니다. 해당 구문은 오프셋 X, 오프셋 Y, 흐림 및 색상 전용입니다. 확산을 시뮬레이션하려면 오프셋이 약간 다른 여러 개의 동일한 그림자를 쌓습니다.
이미지 위에 텍스트를 읽을 수 있게 만드는 데 사용할 수 있나요?
보충제로만. 그림자는 여백에 도움이 되지만 혼잡한 영역에서는 실패하며 배경색과 비교하여 측정되는 WCAG 명암비에 포함되지 않습니다. 가독성이 정말 중요하다면 스크림이나 단단한 패널을 추가하세요.
텍스트의 윤곽을 어떻게 잡나요?
흐림 효과가 없는 각 방향으로 플러스 및 마이너스 1픽셀에 4개의 그림자를 쌓습니다. 이는 모든 곳에서 지원되지 않는 -webkit-text-Stroke가 필요 없이 윤곽선 효과를 생성합니다.
페이지 속도가 느려지나요?
단일 정적 섀도우에는 비용이 거의 들지 않습니다. 텍스트 그림자에 애니메이션을 적용하거나 많은 텍스트에 크고 흐린 그림자를 적용하면 다시 칠하기 비용이 발생합니다.
하위 요소에 의해 상속됩니까?
예. 텍스트 그림자는 상속되므로 컨테이너에 설정하면 텍스트가 있는 모든 하위 항목에 적용되는데, 이는 때때로 놀라운 일입니다.