- 아래 예제들로 설명드리겠습니다.
- 글자에 생기는 그림자 효과를 알기 원하신다면 text-shadow 를 참고해 주세요!
box-shadow
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
box-shadow 는 그림자를 만들어 줍니다.
예제 1
box-shadow 개요 (그림자 효과)
보기
box-shadow : 2px 2px 10px silver
box-shadow : -2px -2px 10px silver
box-shadow : 0 0 10px gray
box-shadow : 0 0 10px gray inset
box-shadow : 0 0 10px gray inset, 0 0 10px black
소스
<style type="text/css">
.css_test {
background : #f6f6f6;
border : 1px solid black;
height : 70px;
line-height : 70px !important;
margin-bottom : 25px;
text-align : center;
}
</style>
<div class="css_test" style="box-shadow:2px 2px 10px silver;">box-shadow : 2px 2px 10px silver</div>
<div class="css_test" style="box-shadow:-2px -2px 10px silver;">box-shadow : -2px -2px 10px silver</div>
<div class="css_test" style="box-shadow:0 0 10px gray;">box-shadow : 0 0 10px gray</div>
<div class="css_test" style="box-shadow:0 0 10px gray inset;">box-shadow : 0 0 10px gray inset</div>
<div class="css_test" style="box-shadow:0 0 10px gray inset, 0 0 10px black;">box-shadow : 0 0 10px gray inset, 0 0 10px black</div>
.css_test {
background : #f6f6f6;
border : 1px solid black;
height : 70px;
line-height : 70px !important;
margin-bottom : 25px;
text-align : center;
}
</style>
<div class="css_test" style="box-shadow:2px 2px 10px silver;">box-shadow : 2px 2px 10px silver</div>
<div class="css_test" style="box-shadow:-2px -2px 10px silver;">box-shadow : -2px -2px 10px silver</div>
<div class="css_test" style="box-shadow:0 0 10px gray;">box-shadow : 0 0 10px gray</div>
<div class="css_test" style="box-shadow:0 0 10px gray inset;">box-shadow : 0 0 10px gray inset</div>
<div class="css_test" style="box-shadow:0 0 10px gray inset, 0 0 10px black;">box-shadow : 0 0 10px gray inset, 0 0 10px black</div>
설명
예제 2
실습 - 3개의 속성으로 사용하기 (그림자 위치 + 색 지정)
보기
^_^
설명
- box-shadow :1px 2px silver 처럼 사용합니다.
- 순서대로 그림자 왼쪽좌표, 위쪽좌표, 컬러 입니다.
- 왼쪽좌표가 + 값이면 오른쪽으로 그림자가, - 값이면 왼쪽으로 그림자가 생깁니다.
- 위쪽좌표가 + 값이면 아래로 그림자가, - 값이면 위로 그림자가 생깁니다.
- 이 예제는 top, left 속성만 조절해 봅니다.
참고 : 컬러 영어 이름 정리표
- 순서대로 그림자 왼쪽좌표, 위쪽좌표, 컬러 입니다.
- 왼쪽좌표가 + 값이면 오른쪽으로 그림자가, - 값이면 왼쪽으로 그림자가 생깁니다.
- 위쪽좌표가 + 값이면 아래로 그림자가, - 값이면 위로 그림자가 생깁니다.
- 이 예제는 top, left 속성만 조절해 봅니다.
참고 : 컬러 영어 이름 정리표
예제 3
실습 - 4개의 속성으로 사용하기 (그림자 위치, 강도 + 색 지정)
보기
^_^
설명
- box-shadow :1px 2px 3px silver 처럼 사용합니다.
- 순서대로 그림자 왼쪽좌표, 위쪽좌표, 그림자세기, 컬러 입니다.
- 그림자세기 값이 크면 그림자가 짙어지고 낮으면 흐려집니다. 블러효과를 생각하시면 좋습니다.
- 그림자세기는 - (마이너스) 값이 없습니다.
- 순서대로 그림자 왼쪽좌표, 위쪽좌표, 그림자세기, 컬러 입니다.
- 그림자세기 값이 크면 그림자가 짙어지고 낮으면 흐려집니다. 블러효과를 생각하시면 좋습니다.
- 그림자세기는 - (마이너스) 값이 없습니다.
예제 4
실습 - 5개의 속성으로 사용하기 (그림자 위치, 강도, 크기 + 색 지정)
보기
^_^
설명
- 네번째 수치값이 그림자의 크기입니다.
- box-shadow : 1px 1px 1px 1px silver
- box-shadow : 1px 1px 1px 1px silver
예제 5
실습 - 그림자 안쪽으로 넣기 (inset)
보기
^_^
설명
- 컬러 뒤에 inset 을 추가하면 그림자가 안쪽으로 만들어 집니다.
- box-shadow : 1px 1px 1px 1px silver inset
- box-shadow : 1px 1px 1px 1px silver inset
예제 6
실습 - 컴마로 구분하여 두개의 그림자 조절해 보기
보기
^_^
설명
- 컬러 뒤에 inset 을 추가하면 그림자가 안쪽으로 만들어 집니다.
- box-shadow : 1px 1px 1px 1px silver inset
- box-shadow : 1px 1px 1px 1px silver inset
예제 7
이미지에 그림자 넣어보기
보기
소스
<img src="https://t1.daumcdn.net/cfile/tistory/231F2B38550B923C2D" style="box-shadow:0 0 15px black;" /><br>
<br>
<img src="https://t1.daumcdn.net/cfile/tistory/2129E34854D7351404" style="box-shadow:10px 10px 5px gray;" /><br>
<br>
<img src="https://t1.daumcdn.net/cfile/tistory/2227B74F54D7351631" style="box-shadow:0 10px 10px #A36424;" /><br>
<br>
<img src="https://t1.daumcdn.net/cfile/tistory/244ED638555ABF4509" style="box-shadow:10px 10px 0 #A9C3DD;" /><br>
<br>
<br>
<img src="https://t1.daumcdn.net/cfile/tistory/2129E34854D7351404" style="box-shadow:10px 10px 5px gray;" /><br>
<br>
<img src="https://t1.daumcdn.net/cfile/tistory/2227B74F54D7351631" style="box-shadow:0 10px 10px #A36424;" /><br>
<br>
<img src="https://t1.daumcdn.net/cfile/tistory/244ED638555ABF4509" style="box-shadow:10px 10px 0 #A9C3DD;" /><br>
<br>
사용된 CSS (클릭시 보기) :
https
설명
이미지에도 넣을 수 있습니다.
적절히 사용하면 보기 좋은 효과가 나오기도 합니다. ^^;;
적절히 사용하면 보기 좋은 효과가 나오기도 합니다. ^^;;
예제 8
두개 이상의 그림자효과 동시에 사용하기
보기
소스
<img src="https://t1.daumcdn.net/cfile/tistory/217BF13954D74FB720" style="box-shadow:5px 5px 10px red, -5px -5px 10px blue;" />
사용된 CSS (클릭시 보기) :
https
설명
컴마(,) 로 구분하여 여러개 지정하면 됩니다.
box-shadow : 5px 5px 10px red , -5px -5px 10px blue;
box-shadow : 5px 5px 10px red , -5px -5px 10px blue;
연구 1
두개의 이미지 겹쳐보기
보기
소스
<img src="https://t1.daumcdn.net/cfile/tistory/21385A4C550B9B3D10" style="position:absolute; box-shadow:5px 5px 10px black;" />
<img src="https://t1.daumcdn.net/cfile/tistory/261FC83454D7331705" style="margin:80px 0 0 120px; box-shadow:5px 5px 10px black;" />
<img src="https://t1.daumcdn.net/cfile/tistory/261FC83454D7331705" style="margin:80px 0 0 120px; box-shadow:5px 5px 10px black;" />
사용된 CSS (클릭시 보기) :
box-shadowhttps
연구 2
그림자 크게 만들어보기
보기
소스
<img src="https://t1.daumcdn.net/cfile/tistory/267D3750550B9B3D0D" style="box-shadow:100px 100px 50px #eee;" /><br><br>
<img src="https://t1.daumcdn.net/cfile/tistory/267D3750550B9B3D0D" style="box-shadow:100px 100px 100px #ddd;" /><br><br>
<img src="https://t1.daumcdn.net/cfile/tistory/267D3750550B9B3D0D" style="box-shadow:100px 100px 1000px #ccc;" /><br><br>
<img src="https://t1.daumcdn.net/cfile/tistory/267D3750550B9B3D0D" style="box-shadow:100px 100px 100px #ddd;" /><br><br>
<img src="https://t1.daumcdn.net/cfile/tistory/267D3750550B9B3D0D" style="box-shadow:100px 100px 1000px #ccc;" /><br><br>
사용된 CSS (클릭시 보기) :
https
설명
- 그림자 부분은 영역을 차지하지 않습니다.
- 그림자 처리는 브라우저마다 조금씩 다릅니다.
- 그림자 처리는 브라우저마다 조금씩 다릅니다.
연구 3
DIV 의 진화과정(?)을 살펴봅시다
보기
DIV 로 기본틀을 만듭니다.
배경을 넣어줍니다.
테두리를 만들어줍니다.
테두리를 좀 더 보기 좋게 바꾸어 줍니다.
모서리를 깎아줍니다.
그림자를 만들어 줍니다.
안쪽 그림자를 이용해서 좀 더 보기좋게 해줍니다.
글자에 그림자 효과를 줍니다.
CSS 공작소에 오신것을 환영합니다
소스
<div style="padding:20px;">DIV 로 기본틀을 만듭니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png');">배경을 넣어줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px solid #BC8D01;">테두리를 만들어줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01;">테두리를 좀 더 보기 좋게 바꾸어 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px;">모서리를 깎아줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver;">그림자를 만들어 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset;">안쪽 그림자를 이용해서 좀 더 보기좋게 해줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset; text-shadow:1px 1px 0 white;">글자에 그림자 효과를 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset; text-shadow:1px 1px 0 white; font-weight:bold; font-size:16pt;">CSS 공작소에 오신것을 환영합니다</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png');">배경을 넣어줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px solid #BC8D01;">테두리를 만들어줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01;">테두리를 좀 더 보기 좋게 바꾸어 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px;">모서리를 깎아줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver;">그림자를 만들어 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset;">안쪽 그림자를 이용해서 좀 더 보기좋게 해줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset; text-shadow:1px 1px 0 white;">글자에 그림자 효과를 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset; text-shadow:1px 1px 0 white; font-weight:bold; font-size:16pt;">CSS 공작소에 오신것을 환영합니다</div>
연구 4
CSS 로 꾸며보기
보기
CSS 공작소
소스
<style type="text/css">
.css_test {
background-image : url('http://cfile23.uf.tistory.com/image/225BA93954EA01760701E8');
border-radius : 10px;
border : 5px solid #006464;
box-shadow : 0 0 5px black, 0 0 7px white inset;
font-size : 12pt;
margin : 0 auto;
padding : 30px;
text-align : center;
width : 490px;
}
.css_test span {
color : white;
font-size : 55pt !important;
font-weight : bold;
line-height : 308px;
text-shadow : 0 0 15px white, 0 0 10px white, 0 0 2px black, 0 0 5px black;
}
</style>
<div class="css_test">
<span>CSS 공작소</span>
</div>
.css_test {
background-image : url('http://cfile23.uf.tistory.com/image/225BA93954EA01760701E8');
border-radius : 10px;
border : 5px solid #006464;
box-shadow : 0 0 5px black, 0 0 7px white inset;
font-size : 12pt;
margin : 0 auto;
padding : 30px;
text-align : center;
width : 490px;
}
.css_test span {
color : white;
font-size : 55pt !important;
font-weight : bold;
line-height : 308px;
text-shadow : 0 0 15px white, 0 0 10px white, 0 0 2px black, 0 0 5px black;
}
</style>
<div class="css_test">
<span>CSS 공작소</span>
</div>
사용된 CSS (클릭시 보기) :
background-imageborderborder-radiusbox-shadowcolorfont-sizefont-weightline-heightmarginpaddingtext-aligntext-shadowwidth
설명
- text-shadow 와 box-shadow 를 다중으로 사용하였습니다. (컴마로 구분하여 사용)
- 어항 물을 갈고나니 너무 깨끗해서 찍어본 사진으로 만들어 보았습니다. ^^;
- 어항 물을 갈고나니 너무 깨끗해서 찍어본 사진으로 만들어 보았습니다. ^^;