[CSS3] 텍스트 그림자 효과 (text-shadow)
-
관리자 /
2011.12.07 02:00 /
hit 3,909 추천
0
이제 CSS의 효과만으로도 텍스트에 그림자를 넣을 수 있습니다.
5개의 대표 브라우저 중 Internet Explorer만 제외한 나머지 브라우저가 텍스트 그림자 효과를 지원합니다. 이 속성은 브라우저의 특성을 입력할 필요가 없습니다.
텍스트 그림자 효과는 text-shadow 속성을 사용하여 표현할 수 있습니다. text-shadow 속성의 값은 가로의 위치, 세로의 위치, 그림자의 크기, 컬러 순으로 입력합니다. 그림자의 컬러는 16진수가 아닌 rgba나 hsla로도 입력할 수 있습니다. 덕분에 그림자의 불투명도도 조절이 가능합니다. 만약 rgba나 hsla 값을 입력할 줄 모르신다면 CSS3 가이드북 페이지의 불투명도 조절을 참고하세요.
5개의 대표 브라우저 중 Internet Explorer만 제외한 나머지 브라우저가 텍스트 그림자 효과를 지원합니다. 이 속성은 브라우저의 특성을 입력할 필요가 없습니다.
.example-text {
text-align: center;
color: #F66;
font: 40px 'Myriad Pro';
text-shadow: 2px 2px 4px #696969;
}color: #F66;
font: 40px 'Myriad Pro';
text-shadow: 2px 2px 4px #696969;
텍스트 그림자 효과는 text-shadow 속성을 사용하여 표현할 수 있습니다. text-shadow 속성의 값은 가로의 위치, 세로의 위치, 그림자의 크기, 컬러 순으로 입력합니다. 그림자의 컬러는 16진수가 아닌 rgba나 hsla로도 입력할 수 있습니다. 덕분에 그림자의 불투명도도 조절이 가능합니다. 만약 rgba나 hsla 값을 입력할 줄 모르신다면 CSS3 가이드북 페이지의 불투명도 조절을 참고하세요.