텍스트에 그림자 효과를 줄 수 있습니다. 그림자 효과는 본문에서 자주 사용하면 지저분해 보이지만 사이트 제목이나 강조해야 할 글자에 사용하면 글자를 눈에 띄게 할 수 있습니다.
text-shadow
text-shadow는 글자에 그림자 효과를 주어 텍스트를 좀 더 입체적으로 보이게 하는 속성입니다.
기본형
text-shadow : offset-x | offset-y | blur-radius | color | none
- offset-x : 그림자의 가로 거리를 정합니다. (필수)
- offset-y : 그림자의 세로 거리를 정합니다. (필수)
- blur-radius : 번짐 정도를 정합니다. (기본값 0)
- color : 그림자 색상을 정합니다.
- none : 글림자 효과를 없앱니다.
예제
예제 1
offset-x 속성 값을 증가시키면 그림자의 위치가 오른쪽으로 이동합니다.
<p class="s1">Lorem ipsum</p>
<p class="s2">Lorem ipsum</p>
<p class="s3">Lorem ipsum</p>
.s1 {
text-shadow: 2px 2px 2px gray;
}
.s2 {
text-shadow: 4px 2px 2px gray;
}
.s3 {
text-shadow: 6px 2px 2px gray;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 2
offset-y 속성 값을 증가시키면 그림자의 위치가 아래로 이동합니다.
<p class="s1">Lorem ipsum</p>
<p class="s2">Lorem ipsum</p>
<p class="s3">Lorem ipsum</p>
.s1 {
text-shadow: 2px 2px 2px gray;
}
.s2 {
text-shadow: 2px 4px 2px gray;
}
.s3 {
text-shadow: 2px 6px 2px gray;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 3
blur-radius 속성 값을 증가시키면 그림자가 번지고 흐려집니다.
<p class="s1">Lorem ipsum</p>
<p class="s2">Lorem ipsum</p>
<p class="s3">Lorem ipsum</p>
.s1 {
text-shadow: 2px 2px 2px gray;
}
.s2 {
text-shadow: 2px 2px 4px gray;
}
.s3 {
text-shadow: 2px 2px 6px gray;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 4
그림자 속성 값을 쉼표로 구분하여 여러 번 쓰면 여러 개의 그림자가 생깁니다.
맨 먼저 지정한 그림자 값이 텍스트에 가장 가까히 표시됩니다.
.s1 {
color: #000;
text-shadow: 0px 0px 4px #ccc, 0px -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -19px 18px, #f20;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.