복잡해 보이는 대부분의 CSS 텍스트 효과는 하나의 속성에서 만들어집니다. 랜딩 페이지의 네온 사인,게임 타이틀의 하드 아웃라인,1970 년대 레코드 슬리브처럼 보이는 쌓인 주황색 글자: 그 각각은 싱글입니다 text-shadow 쉼표로 구분된 여러 레이어로 선언합니다. 구문은 짧습니다. 어려운 부분은 잘 읽히는 오프셋과 흐림 값을 선택하고,위에 어떤 레이어가 칠해졌는지 기억하는 것입니다.
이 가이드는 다음을 다룹니다 text-shadow 문법,레이어링이 작동하는 방식,사용하는 정확한 값으로 일반적인 효과 뒤에 있는 레시피,그림자 텍스트를 읽기 어렵게 하거나 렌더링 속도가 느려지게 하는 실수. 모든 예제는 에서 다시 작성할 수 있습니다 CSS 텍스트 그림자 생성기결과를 실시간으로 표시하고 선언문을 작성합니다.
TL;DR:
text-shadow쉼표로 구분된 그림자 목록을 가져옵니다. 각 그림자는 다음과 같이 작성됩니다offset-x offset-y blur-radius color니다. 목록의 첫 번째 그림자가 위에 그려집니다. 그것은 확산 값과 아니오가 없습니다inset키워드, 달리box-shadow. 빛은 점점 흐려지는 몇몇 영 오프셋 그림자이고,윤곽선은 4 개의 1 화소 단단한 그림자이고,3D 원본은 더 멀리 각 1 화소 단단한 그림자의 더미입니다. The Toolz 텍스트 그림자 생성기 슬라이더와 8개의 사전 설정, 클라이언트 측, 무료, 가입 없음을 사용하여 이를 빌드합니다.
CSS 텍스트 섀도우 속성은 무엇입니까?
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 text-shadow property 는 element's 텍스트의 글리프 뒤에 하나 이상의 그림자를 그립니다. W3C 에 정의되어 있습니다 CSS 텍스트 장식 모듈 레벨 3이고, 그 값은 둘 중 하나입니다 none 또는 쉼표로 구분된 그림자 목록입니다.
각 그림자는 최대 4 개의 부분을 가지고 있습니다:
| 부분 | 필수 | 하는 일 | 허용된 값 |
|---|---|---|---|
| 수평 오프셋 | 예 | 그림자를 오른쪽 (양수) 또는 왼쪽 (음수) 으로 이동합니다 | 어떤 길이, 예를 들면. 2px, -0.1em |
| 수직 오프셋 | 예 | 그림자를 아래로 (긍정적) 또는 위로 (부정적) 이동시킵니다 | 어떤 길이 |
| 흐림 반경 | 아니요, 기본값은 다음과 같습니다 0 |
가장자리를 부드럽게 합니다; 더 크다는 것은 더 흐릿하다는 것을 의미합니다 | 0 또는 양의 길이 음수는 유효하지 않습니다 |
| 색상 | 아니요, 기본값은 다음과 같습니다 currentColor |
투명도를 포함한 그림자 색상 | 어떤 CSS 색깔 |
색상이 먼저 또는 마지막으로 갈 수 있습니다. text-shadow: #000 1px 1px 그리고 text-shadow: 1px 1px #000 는 동일한 그림자입니다. 당신이 색깔을 밖으로 남겨두는 경우에,그림자는 당신이 하락 그림자를 위해 원하고 그러나 원본 색깔에 있는 빠른 빛을 위해 경편한 드물게인 text's 자신의 색깔을 가지고 갑니다.
그림자는 레이아웃을 변경하지 않습니다. 그것은 멀리 이웃 요소를 밀어하지 않거나 element's 상자를 성장하지 않습니다,그래서 큰 흐림은 상자 밖으로 유출하고 부모에 의해 잘라 얻을 수 있습니다 와 overflow: hidden.
텍스트-그림자는 상자-그림자와 어떻게 다른가요?
text-shadow 각 문자의 모양을 따르지만 box-shadow element's 테두리 상자의 사각형을 따릅니다. 그것이 실용적인 차이이며,어느 것에 도달할지 결정합니다. 문법도 다릅니다.
| 특징 | text-shadow |
box-shadow |
|---|---|---|
| 그림자의 모양 | 각 글리프 윤곽 | 둥근 모서리를 포함한 요소's 상자 |
| 확산 반경 | 사용할 수 없음 | 네, 네 번째 길이입니다 |
inset 키워드 |
사용할 수 없음 | 예 |
| 다중 레이어 | 네, 쉼표로 구분되어 있습니다 | 네, 쉼표로 구분되어 있습니다 |
| 페인트 순서 | 맨 위에 먼저 나열됩니다 | 맨 위에 먼저 나열됩니다 |
| 기본 색상 | currentColor |
currentColor |
| 일반적인 사용 | 제목, 로고, 이미지 위의 가독성 | 카드, 버튼, 고도 |
누락된 스프레드 값은 텍스트 윤곽선에 그림자가 하나가 아닌 네 개가 필요한 이유입니다. With box-shadow 쓸 수 있습니다 0 0 0 2px black 단단한 고리를 키우려면. 텍스트로는 글리프를 확장 할 방법이 없으므로 여러 방향으로 사본을 오프셋하여 가짜로 만듭니다. 단어가 아닌 컨테이너를 스타일링하는 경우 박스 그림자 생성기 가이드 퍼짐, 삽입 및 입면 레이어를 덮습니다.
여러 텍스트 그림자를 레이어링하는 것은 어떻게 작동합니까?
하나의 선언은 쉼표로 구분하여 원하는 만큼의 그림자를 담을 수 있으며 브라우저는 뷰어에 가장 가까운 첫 번째 그림자를 그립니다. 목록의 마지막 그림자는 맨 뒤에 있습니다. 텍스트 자체는 항상 모든 그림자 위에 그려집니다.
레이어가 겹칠 때마다 그 순서가 중요합니다. 이 두 선언을 비교해 보세요:
/* Sharp dark layer on top of a soft glow */
text-shadow: 2px 2px 0 #000, 0 0 12px #ff0;
/* Soft glow painted over the sharp layer */
text-shadow: 0 0 12px #ff0, 2px 2px 0 #000;
첫 번째에서는 선명한 검정색 복사본이 날카롭게 유지되고 노란색 안개가 그 뒤에 앉습니다. 두 번째에서는 노란색 광선이 검정색 복사본 위로 씻겨서 부드럽게 만듭니다. 같은 그림자,다른 모습.
생성기는 같은 규칙을 따릅니다. 레이어 탭의 레이어 1 은 출력의 첫 번째 그림자이므로 위에 칠합니다. 레이어를 추가하면 목록의 끝에 추가되고 다른 레이어 뒤에 추가됩니다. 레이어를 앞으로 이동하려면 삭제하고 다시 만들거나 복사한 CSS 를 직접 편집합니다.
Toolz 생성기는 어떤 값을 쓰나요?
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 텍스트 그림자 생성기 각 레이어에 다섯 개의 컨트롤을 제공하고 선언문을 고정된 형식으로 작성합니다. 해당 형식을 알면 결과를 자체 규칙이 있는 코드베이스에 붙여넣을 때 도움이 됩니다.
| 제어 | 범위 | 단계 | 로 작성 |
|---|---|---|---|
| 오프셋 X | -50px ~ 50px | 1px | Npx |
| 오프셋 Y | -50px ~ 50px | 1px | Npx |
| 흐리게 하다 | 0px 에서 100px | 1px | Npx을 포함 0px |
| 색상 | 색상 선택기 | - | 6자리 16진수 |
| 불투명도 | 0% ~ 100% | 1% | 색상 뒤에 2개의 16진수로 추가되었습니다 |
불투명도는 다음에 8자리 16진수 값으로 색상으로 접혀집니다 CSS 컬러 모듈 레벨 4 육각 표기법. 마지막 두 자리는 0 에서 255 까지의 스케일의 알파 채널이므로 도구는 불투명도에 255 를 곱하고 반올림하여 16 진수로 변환합니다.
이것이 몇 가지 불투명도에 대해 어떻게 작동하는지 살펴보겠습니다:
| 불투명도 슬라이더 | 255번 | 둥글게 된 | 육각 알파 | 예시 색상 |
|---|---|---|---|---|
| 100% | 255 | 255 | ff |
#000000ff |
| 90% | 229.5 | 230 | e6 |
#4466eee6 |
| 70% | 178.5 | 179 | b3 |
#4466eeb3 |
| 60% | 153 | 153 | 99 |
#00000099 |
| 35% | 89.25 | 89 | 59 |
#00000059 |
| 25% | 63.75 | 64 | 40 |
#00000040 |
모든 현재 브라우저는 8 자리 16 진수를 읽습니다. 아주 오래된 브라우저를 지원해야 한다면 색을 로 다시 씁니다 rgba() 복사 후: #00000099 된다 rgba(0, 0, 0, 0.6).
이 도구는 슬라이더 및 피커 입력만 허용하므로 값은 전체 픽셀입니다. 에서 측정된 그림자의 경우 em글꼴 크기에 따라 크기를 조정하고 CSS 를 복사한 다음 스타일시트의 단위를 바꿉니다. A 2px 16px 본문 텍스트의 오프셋은 0.125em.
네온 글로우 텍스트 효과를 어떻게 만들 수 있나요?
네온광은 오프셋이 0 인 여러 그림자로,동일한 밝은 색과 증가하는 흐림입니다. 각 층은 더 넓고 희미한 후광을 추가하며 함께 주변 공기로 가벼운 출혈처럼 보입니다.
생성기는 다음을 생성하는 Neon Glow 사전 설정에서 열립니다:
text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;
세 개의 레이어,매번 (7,14, 28) 두 배로 흐려지고 불투명도가 100%에서 90%에서 70%로 낮아집니다. 단단한 7px 레이어는 문자에 밝은 코어를 제공하고 28px 레이어는 색상을 밖으로 퍼뜨립니다. 흰색 텍스트가있는 어두운 배경에서 이것은 조명 된 튜브로 읽습니다. 밝은 배경에서는 대부분의 효과가 사라지므로 미리보기에 Light bg / Dark bg 토글이 있습니다: 테마 스위치가있는 사이트에 빛을 보내기 전에 두 가지를 모두 확인하십시오.
빛을 더 강하게 만들려면 56px 블러에서 네 번째 레이어를 추가하거나 7px 레이어를 두 번 반복하십시오. 레이어를 반복하면 불투명도가 쌓이고 코어가 넓어지지 않고 더욱 강렬해집니다.
텍스트 그림자로 텍스트의 윤곽을 어떻게 지정합니까?
4 개의 단단한 그림자 (흐림) 를 놓습니다 0) 각 대각선에 한 픽셀 out. 그들의 중첩은 모든 글리프의 가장자리를 추적합니다.
개요 사전 설정은 다음과 같이 씁니다:
text-shadow: -1px -1px 0px #000000ff, 1px -1px 0px #000000ff, -1px 1px 0px #000000ff, 1px 1px 0px #000000ff;
이것은 한 픽셀에서 잘 작동합니다. 두세 픽셀에서 갭은 곡선과 직선 모서리의 중간점에서 나타나기 시작합니다. 왜냐하면 네 복사본은 대각선만 덮기 때문입니다. 더 두꺼운 윤곽선을 위해 직선 축에 네 개의 레이어를 더 추가합니다 (0 -2px, 2px 0, 0 2px, -2px 0) 그래서 각 글자를 8 부씩 둘러싸고 있습니다.
그림자가 아닌 대안이 있습니다. -webkit-text-stroke 글리프 경로를 따라 실제 획을 그리며 접두사에도 불구하고 현재 브라우저에서 지원됩니다. 윤곽선을 중심으로하므로 얇은 문자로 먹으며 CSS 모듈이 아닌 WHATWG 호환성 표준에 지정됩니다. 디스플레이 텍스트의 작고 선명한 윤곽선의 경우 4 그림자 트릭이 가장 예측 가능한 옵션으로 남아 있습니다.
3D 또는 압출 텍스트를 어떻게 만들 수 있습니까?
같은 색으로 여러 개의 단단한 그림자를 쌓아 올리고,각각은 한 픽셀을 더 아래쪽과 오른쪽으로 오프셋합니다. 각 복사본은 한 픽셀의 깊이를 더하고,눈은 더미를 단단한 글자의 측면으로 읽습니다.
Retro 3D 사전 설정:
text-shadow: 1px 1px 0px #e99537ff, 2px 2px 0px #e99537ff, 3px 3px 0px #e99537ff, 4px 4px 0px #00000040;
3 개의 주황색 레이어는 3 픽셀 압출을 구축하고 25% 불투명도의 네 번째 검정색 레이어는 문자를 접지하는 접촉 그림자로 한 픽셀 더 멀리 앉습니다. 더 깊은 압출의 경우 오프셋 4,5, 6 으로 주황색 레이어를 계속 추가하고 어두운 레이어를 끝까지 이동합니다. 12px 압출의 12 레이어는 큰 영웅 헤딩의 경우 정상입니다.
Long Shadow 프리셋은 간격과 희미해지는 불투명도와 함께 동일한 아이디어를 사용합니다:
text-shadow: 1px 1px 0px #00000033, 3px 3px 0px #00000026, 6px 6px 0px #0000001a, 10px 10px 0px #0000000f;
오프셋은 증가하는 반면(1, 3, 6, 10) 불투명도는 떨어지므로(20%, 15%, 10%, 6%) 그림자는 단단한 블록을 형성하는 대신 대각선으로 이어집니다.
어떤 텍스트 그림자 레시피가 어떤 효과에 맞나요?
다음은 생성기에 있는 8개의 사전 설정이며 각 사전 설정 뒤에 아이디어가 있으므로 이를 조정할 수 있습니다.
| 미리 설정 | 레이어 | 오프셋 | 흐리게 하다 | 아이디어 |
|---|---|---|---|---|
| 소프트 | 1 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 1 | 0, 2px | 4px | 35% 검정색의 미묘한 그림자, 대부분의 제목에 안전합니다 |
| 하드 | 1 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 1 | 2px, 2px | 0 | 60% 검정색의 선명한 오프셋 사본, 평면 인쇄 모양 |
| 네온 글로우 | 3 X 1000 X 1000 X 1000 X 100 X 100 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X | 0, 0 | 7, 14, 28px | 같은 색, 성장하는 흐림, 어둠에 빛을 위해 |
| 레트로 3D | 4 X 1000 X 1000 X 1000 X 400 X 400 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X | 1 에서 4px 대각선 | 0 | 단계별 하드 카피와 희미한 접촉 그림자 |
| 개요 | 4 X 1000 X 1000 X 1000 X 400 X 400 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X | +/-1px 대각선 | 0 | 글리프 가장자리를 추적하는 4개의 복사본 |
| 엠보싱 | 2 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X | -1px/-1px 및 1px/1px | 0 | 흰색 하이라이트 왼쪽 상단, 어두운 색조 오른쪽 하단 |
| 파이어 | 3 X 1000 X 1000 X 1000 X 100 X 100 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X | 0, -1 / -2 / -4px | 4, 10, 18px | 노란색에서 주황색, 빨간색까지 위쪽으로 올라갑니다 |
| 긴 그림자 | 4 X 1000 X 1000 X 1000 X 400 X 400 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X | 1, 3, 6, 10px 대각선 | 0 | 격차가 커지고 불투명도가 사라집니다 |
엠보스는 사람들이 잘못 읽은 하나입니다. 그것은 높은 왼쪽과 어두운 그림자와 오른쪽 아래 어두운 그림자와 쌍을 이루고,이는 인상 된 문자를 치는 왼쪽 상단의 빛을 모방합니다. 두 색상을 교환하고 텍스트가 대신 페이지로 눌러 보인다,고전적인 활판 인쇄 효과. 둘 다 텍스트 색상이 배경 색상에 가까울 때만 작동합니다; 고대비 텍스트에서는 하이라이트가 사라집니다.
불은 음의 수직 오프셋이 있는 유일한 사전 설정입니다. 각 층은 더 위로 이동하고 더 흐릿하고 붉어지므로 열이 글자에서 올라가는 것처럼 보입니다.
텍스트 그림자가 가독성이나 접근성을 손상시키나요?
수 있으며,위험은 흐림과 오프셋으로 커진다. 그림자는 WCAG 가 측정하는 대비 비율을 변경하지 않으며,이는 텍스트 색상과 배경 색상 사이에서 계산된다. The WCAG 2.1 대비 최소값 일반 텍스트의 경우 4.5:1, 큰 텍스트의 경우 3:1을 요구하지만 글로우는 종이에 이를 충족하는 데 도움이 되지 않습니다.
실제로,바쁜 사진에 가벼운 원본의 뒤에 얇은 어두운 그림자는 이미지에서 glyph 가장자리를 분리하기 때문에,편지를 밖으로 쑤시게 쉽게 한다. 작은 원본에 무거운 놀은 반대를 한다: 후광은 "e"와 "a" 같이 편지의 카운터를 채우고 낱말은 mush 에 돌n다.
이를 뒷받침하는 몇 가지 지침:
- 본문 텍스트 그림자를 미묘하게 유지하십시오. 같은 것
0 1px 2px rgba(0, 0, 0, 0.3)충분합니다. - 큰 전시 원본, 대략 32px 및 높은 쪽으로 다층 효력을 저장하십시오.
- 사이트에 테마 토글이 있는 경우 밝은 배경과 어두운 배경 모두에 대한 효과를 확인하세요.
- 낮은 대비를 구하기 위해 그림자에 의존하지 마십시오. 텍스트 색상을 먼저 수정하십시오.
- 그림자가 비례적으로 가장 큰 전화기에서 제목이 도달하는 가장 작은 크기로 테스트합니다.
텍스트 그림자의 속도를 늦추는 것은 무엇이며 일반적인 실수는 무엇입니까?
흐림은 비싼 부분입니다. 모든 흐린 레이어는 다시 칠할 때마다 래스터화되고 흐려져야 하며 비용은 흐림 반경과 텍스트 양에 따라 조정됩니다. The 텍스트 그림자에 대한 MDN 참조입니다 구문을 다룹니다. 성능 측면은 추론하기가 간단합니다: 단일 제목에 3 층으로 빛나는 것은 저렴하며,스크롤 중에 다시 칠해진 긴 기사의 모든 단락에서 동일한 빛은 저전력 전화에서 jank 의 일반적인 소스입니다.
계속해서 나타나는 실수:
| 실수 | 증상 | 고치다 |
|---|---|---|
다음과 같은 스프레드 값을 작성합니다 0 0 4px 2px red |
선언 전체가 무시됩니다 | 네 번째 길이를 제거하십시오; text-shadow에는 스프레드가 없습니다 |
추가 inset |
선언 무시 | 텍스트에서는 지원되지 않습니다; 대신 더 가벼운 엠보스를 사용하십시오 |
네거티브 블러, 예. -2px |
선언 무시 | 흐림은 0 또는 양수여야 합니다 |
| 레이어 사이에 쉼표가 없습니다 | 선언은 무시되고 아무것도 렌더링되지 않습니다 | 각 그림자를 쉼표로 구분합니다 |
| 가장자리에 글로우가 잘립니다 | 헤일로는 직선으로 잘립니다 | 부모는 가지고 있습니다 overflow: hidden; 패딩을 추가합니다 |
| 보이지 않는 빛 | 아무 일도 일어나지 않는 것 같습니다 | 빛 배경에 빛 빛; 어두운 테스트 |
벤더 접두사 -webkit-text-shadow |
무해하지만 쓸모없다 | 평지를 사용하세요 text-shadow; 접두사가 필요하지 않습니다 |
처음 세 개는 강조할 가치가 있습니다. 잘못된 부분 하나가 해당 레이어뿐만 아니라 전체 선언을 무효화하므로 12 레이어 3D 효과의 레이어 4 에 있는 오타가 12 개를 모두 제거합니다. generator's 출력은 항상 유효하며,이는 거기에 스택을 빌드하고 붙여넣는 한 가지 이유입니다.
텍스트-그림자를 손으로 쓰는 대신 생성기를 사용해야 하는 경우는 언제입니까?
부드러운 그림자 하나가 클릭하는 것보다 입력하는 것이 빠릅니다. 세 개 이상의 레이어가 있는 것은 시각적으로 구축하는 것이 빠릅니다. 왜냐하면 룩을 판단하기 때문이고,룩은 숫자로 판단하기 어렵기 때문입니다. 생성기는 학습에도 유용합니다: 사전 설정을 선택하고,레이어 하나를 변경하고,효과 중 어느 부분이 움직이는지 관찰할 수 있습니다.
Toolz 생성기는 브라우저에서 완전히 실행됩니다. 미리보기,레이어 목록 및 CSS 는 모두 페이지에서 계산되며 아무 것도 업로드되지 않으며 로드되면 오프라인으로 계속 작동합니다. 무료이며 가입이 없습니다. CSS 복사는 사이트의 다른 도구와 마찬가지로 일일 사용 허용량에 대해 계산됩니다; 편집 및 미리보기는 그렇지 않습니다.
하지 않는 것: 없습니다 em 또는 rem 단위,입력된 숫자 필드 없음,레이어에 대한 드래그 투 재정렬 없음,미리보기의 사용자 정의 글꼴 없음. 그런 경우 선언을 복사하고 자신의 스타일시트 또는 브라우저 개발 도구에서 조정합니다.
원하는 효과가 그림자가 아닌 흐릿하거나 다시 색칠된 요소라면, CSS 필터 등의 drop-shadow() 그리고 blur() 이미지를 포함한 전체 요소에 적용하십시오. 텍스트 뒤에 서리가 내린 패널은 작업을위한 작업입니다 유리형성 생성기및 소프트 압출 버튼이 에 속합니다 신형성 생성기. 시각적인 CSS 건축업자의 전 세트는 에 있습니다 CSS 도구 허브, 그리고 CSS 그라디언트 생성기 가이드 빛나는 제목 뒤에 그라데이션 배경을 원할 때 텍스트 효과와 잘 쌍을 이룹니다.
작업 예: 사진 위에 읽을 수 있는 영웅 제목
밝은 해변 사진 위에 흰색 64px 텍스트가 있고 글자가 모래 속으로 계속 사라진다고 가정해 보겠습니다. 목표는 가독성 우선,스타일 두번째입니다.
에서 시작 텍스트 그림자 도구 소프트 사전 설정 포함: 0px 2px 4px #00000059너무 희미한 바쁜 이미지에. 불투명도를 60%로 높이고 8px 로 흐리게하면 제공됩니다 0px 2px 8px #00000099. 가장자리는 배경에서 분리되지만 얇은 획은 여전히 깜박입니다.
오프셋이 0 인 두 번째 레이어, 2px 블러 및 50% 블랙 추가: 0px 0px 2px #00000080. 두 번째로 추가했기 때문에 첫 번째 레이어 뒤에 페인트를 칠하지만 글리프 가장자리를 감싸고 모든 스트로크에 얇고 어두운 테두리를 제공합니다. 결과:
.hero-title {
color: #fff;
font-size: 64px;
text-shadow: 0px 2px 8px #00000099, 0px 0px 2px #00000080;
}
두 레이어, 둘 다 렌더링 저렴, 그리고 제목 모래, 하늘과 서핑에 개최. 36px로 제목이 떨어지는 전화에서, 동일한 픽셀 값은 비례 무거운; 로 변환 em 보조를 맞춰줍니다(0 0.03em 0.125em 64px 에서).
