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>
설명
- 아래 예제들로 설명드리겠습니다.
- 글자에 생기는 그림자 효과를 알기 원하신다면 text-shadow 를 참고해 주세요!
예제 2
실습 - 3개의 속성으로 사용하기 (그림자 위치 + 색 지정)
보기
^_^
box-shadow :
1px
1px
box-shadow : 1px 1px silver
CSS 공작소
설명
- box-shadow :1px 2px silver 처럼 사용합니다.
- 순서대로 그림자 왼쪽좌표, 위쪽좌표, 컬러 입니다.
- 왼쪽좌표가 + 값이면 오른쪽으로 그림자가, - 값이면 왼쪽으로 그림자가 생깁니다.
- 위쪽좌표가 + 값이면 아래로 그림자가, - 값이면 위로 그림자가 생깁니다.
- 이 예제는 top, left 속성만 조절해 봅니다.

참고 : 컬러 영어 이름 정리표
예제 3
실습 - 4개의 속성으로 사용하기 (그림자 위치, 강도 + 색 지정)
보기
^_^
box-shadow :
1px
1px
1px
box-shadow : 20px 20px 10px gray
CSS 공작소
설명
- box-shadow :1px 2px 3px silver 처럼 사용합니다.
- 순서대로 그림자 왼쪽좌표, 위쪽좌표, 그림자세기, 컬러 입니다.
- 그림자세기 값이 크면 그림자가 짙어지고 낮으면 흐려집니다. 블러효과를 생각하시면 좋습니다.
- 그림자세기는 - (마이너스) 값이 없습니다.
예제 4
실습 - 5개의 속성으로 사용하기 (그림자 위치, 강도, 크기 + 색 지정)
보기
^_^
box-shadow :
1px
1px
1px
1px
box-shadow : 1px 1px 1px 1px silver
CSS 공작소
설명
- 네번째 수치값이 그림자의 크기입니다.
- box-shadow : 1px 1px 1px 1px silver
예제 5
실습 - 그림자 안쪽으로 넣기 (inset)
보기
^_^
box-shadow :
1px
1px
1px
1px
box-shadow : 1px 1px 1px 1px silver inset
CSS 공작소
설명
- 컬러 뒤에 inset 을 추가하면 그림자가 안쪽으로 만들어 집니다.
- box-shadow : 1px 1px 1px 1px silver inset
예제 6
실습 - 컴마로 구분하여 두개의 그림자 조절해 보기
보기
^_^
box-shadow :
1px
1px
1px
1px
1px
1px
1px
1px
box-shadow : 1px 1px 1px 1px silver inset, 1px 1px 1px silver
설명
- 컬러 뒤에 inset 을 추가하면 그림자가 안쪽으로 만들어 집니다.
- box-shadow : 1px 1px 1px 1px silver inset
예제 7
이미지에 그림자 넣어보기
보기








소스
<img src="http://cfile5.uf.tistory.com/image/27042F3354D74FB30A489A" style="box-shadow:0 0 15px black;" /><br>
<br>
<img src="http://cfile5.uf.tistory.com/image/2132CA4F54D7351720C017" style="box-shadow:10px 10px 5px gray;" /><br>
<br>
<img src="http://cfile22.uf.tistory.com/image/21695738550B923B092EF5" style="box-shadow:0 10px 10px #A36424;" /><br>
<br>
<img src="http://cfile4.uf.tistory.com/image/2516AD3454D7331811F0D8" style="box-shadow:10px 10px 0 #A9C3DD;" /><br>
<br>
사용된 CSS (클릭시 보기) :
설명
이미지에도 넣을 수 있습니다.
적절히 사용하면 보기 좋은 효과가 나오기도 합니다. ^^;;
예제 8
두개 이상의 그림자효과 동시에 사용하기
보기
소스
<img src="http://cfile9.uf.tistory.com/image/25150D38550B923D321E76" style="box-shadow:5px 5px 10px red, -5px -5px 10px blue;" />
사용된 CSS (클릭시 보기) :
설명
컴마(,) 로 구분하여 여러개 지정하면 됩니다.

box-shadow : 5px 5px 10px red , -5px -5px 10px blue;
연구 1
두개의 이미지 겹쳐보기
보기
소스
<img src="http://cfile3.uf.tistory.com/image/232B204B550B9B39321644" style="position:absolute; box-shadow:5px 5px 10px black;" />
<img src="http://cfile22.uf.tistory.com/image/231F2B38550B923C2D9DB7" style="margin:80px 0 0 120px; box-shadow:5px 5px 10px black;" />
사용된 CSS (클릭시 보기) : box-shadow
연구 2
그림자 크게 만들어보기
보기






소스
<img src="http://cfile8.uf.tistory.com/image/223CC93854D74C4E32A1C4" style="box-shadow:100px 100px 50px #eee;" /><br><br>
<img src="http://cfile8.uf.tistory.com/image/223CC93854D74C4E32A1C4" style="box-shadow:100px 100px 100px #ddd;" /><br><br>
<img src="http://cfile8.uf.tistory.com/image/223CC93854D74C4E32A1C4" style="box-shadow:100px 100px 1000px #ccc;" /><br><br>
사용된 CSS (클릭시 보기) :
설명
- 그림자 부분은 영역을 차지하지 않습니다.
- 그림자 처리는 브라우저마다 조금씩 다릅니다.
연구 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>
연구 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>
설명
- text-shadowbox-shadow 를 다중으로 사용하였습니다. (컴마로 구분하여 사용)
- 어항 물을 갈고나니 너무 깨끗해서 찍어본 사진으로 만들어 보았습니다. ^^;