감성 퍼블리셔 html,css

CSS3의 box-shadow 속성을 하위 익스플로어에 적용하는 방법 본문

HTML/CSS

CSS3의 box-shadow 속성을 하위 익스플로어에 적용하는 방법

빅범 2013. 11. 20. 11:03

 

 

 

CSS3의 box-shadow 속성을 사용하면 요소의 외부 또는 내부에 그림자를 만들 수 있습니다.
box-shadow 속성을 지원하지 않는 익스플로러에서는 익스플로러의 확장 기능인 filter를 사용합니다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<style type="text/css">
div.shadow {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    background-color: white;
    -webkit-box-shadow: 3px 3px 6px #adadad;  /* Safari and Chrome */
    -moz-box-shadow: 3px 3px 6px #adadad;  /* Firefox */
    box-shadow: 3px 3px 6px #adadad;  /* CSS3 */
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#adadad, Direction=135, Strength=6);  /* IE */
}
</style>
</head>
<body>
<div class="shadow"></div>
</body>
</html>

 

drop-shadow: x-offset y-offset blur spread color inset;

 

그림자는 2~4개의 길이 값을 지정할 수 있으며, 추가로 색상과 inset 키워드를 지정할 수 있습니다.

· x-offset: 가로 그림자의 오프셋 거리입니다. 양수를 지정하면 오른쪽으로, 음수를 지정하면 왼쪽에 그림자가 생깁니다. 필수속성이므로 반드시 지정해야 합니다.
· y-offset: 세로 그림자의 오프셋 거리입니다. 양수를 지정하면 아래로, 음수를 지정하면 위에 그림자가 생깁니다. 필수속성이므로 반드시 지정해야 합니다.
· blur: 그림자가 흐려지는 거리입니다. 음수 값은 지정할 수 없으며 값이 높을수록 그림자의 가장자리가 더 흐려지고, 값이 0 인 경우는 가장자리가 선명한 그림자입니다. 기본값은 0입니다.
· spread: 그림자가 퍼지는 거리입니다. 양수를 지정하면 그림자의 모양을 전방위로 확대하고, 음수를 지정하면 축소합니다. 기본값은 0입니다.
· color: 그림자의 색을 지정합니다.
· inset: 이 키워드를 지정하면, 요소의 안쪽에 그림자를 만듭니다.

 

filter: progid:DXImageTransform.Microsoft.Shadow()

 

· color: 그림자의 색을 지정합니다.
· direction: 그림자의 방향을 지정합니다. 
                 0도는 상단, 45도는 우측상단, 90도는 우측, 135도는 우측하단, 180도는 하단,

                  225도는 좌측하단, 270도는 좌측, 315도는 좌측 상단입니다.
· strength: 그림자의 길이로 1~255사이의 값을 지정합니다. 기본값은 5입니다.

 

 

 

 

저작자표시

'HTML/CSS' 카테고리의 다른 글

CSS word-wrap 정보, 사용법 HTML  (0) 2013.12.16
CSS box-shadow 이해와 팁  (0) 2013.11.28
임시 인터넷 파일캐싱을 위한 방지 html,css,javascript  (1) 2013.11.11
css display none과 block 속성 이해하기 [html/css]  (0) 2013.10.22
footer가 항상 최하단에 붙어있기 (HTML/CSS)  (0) 2013.10.21
'HTML/CSS' Related Articles more
Comments