엘리먼트에다가 그림자 효과를 적용시킬 수 있습니다. 예전에는 복잡한 방법으로 이미지를 사용해서 그림자 효과를 표현해야 했지만 이제는 그럴 필요가 없습니다.
5개의 대표 브라우저 모두가 그림자 효과를 지원합니다. 단 Internet Explorer같은 경우에는 그림자 효과가 타 브라우저와 차이가 날 수도 있습니다.
그림자 효과를 주려면 box-shadow 속성을 입력하면 됩니다. 아까도 말했듯이 모바일 브라우저는 이 속성을 지원하지 않을 수도 있으므로 브라우저의 특성을 추가로 입력해야 합니다. box-shadow 속성의 값은 엘리먼트에서부터 가로의 위치, 세로의 위치, 그림자의 크기, 스프레드, 컬러 순으로 입력합니다. 그림자 효과를 엘리먼트 안쪽으로 표현하려면 가로의 위치 값 앞에 inset이라는 문구를 추가합니다. 그림자의 컬러는 16진수가 아닌 rgba나 hsla로도 입력할 수 있습니다. 덕분에 그림자의 불투명도도 조절이 가능합니다. 만약 rgba나 hsla 값을 입력할 줄 모르신다면 CSS3 가이드북 페이지의 불투명도 조절을 참고하세요.
5개의 대표 브라우저 모두가 그림자 효과를 지원합니다. 단 Internet Explorer같은 경우에는 그림자 효과가 타 브라우저와 차이가 날 수도 있습니다.
.example-div {
width: 460px;
background-color: #696969;
color: #FFF;
font: 30px 'Myriad Pro';
text-align: center;
padding: 20px;
border-radius: 20px;
box-shadow: -3px 3px 10px 0 #CCC;
}background-color: #696969;
color: #FFF;
font: 30px 'Myriad Pro';
text-align: center;
padding: 20px;
border-radius: 20px;
box-shadow: -3px 3px 10px 0 #CCC;
그림자 효과를 주려면 box-shadow 속성을 입력하면 됩니다. 아까도 말했듯이 모바일 브라우저는 이 속성을 지원하지 않을 수도 있으므로 브라우저의 특성을 추가로 입력해야 합니다. box-shadow 속성의 값은 엘리먼트에서부터 가로의 위치, 세로의 위치, 그림자의 크기, 스프레드, 컬러 순으로 입력합니다. 그림자 효과를 엘리먼트 안쪽으로 표현하려면 가로의 위치 값 앞에 inset이라는 문구를 추가합니다. 그림자의 컬러는 16진수가 아닌 rgba나 hsla로도 입력할 수 있습니다. 덕분에 그림자의 불투명도도 조절이 가능합니다. 만약 rgba나 hsla 값을 입력할 줄 모르신다면 CSS3 가이드북 페이지의 불투명도 조절을 참고하세요.
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
코멘트 0
