Box Shadow - CSS3

CSS 로 UI를 작성하다가 BOX Shadow 를 정리합니다. 정리가 필요할듯..

먼저 HTML 문서구조를 이해하는게 정말로 중요하지만.. 어느정도 CSS 와 태그는 외워야 할듯.ㅋㅋㅋ

※ 브라우저별 지원여부

일단 예제 실행결과는 다음과 같습니다.

먼저 Outer 영역 코드입니다.

CSS

.ex-1 {

-moz-box-shadow: -5px -5px #888;

-webkit-box-shadow: -5px -5px #888;

box-shadow: -5px -5px #888;

}

.ex-2 {

-moz-box-shadow: -5px -5px 5px #888;

-webkit-box-shadow: -5px -5px 5px #888;

box-shadow: -5px -5px 5px #888;

}

.ex-3 {

-moz-box-shadow: -5px -5px 0 5px #888;

-webkit-box-shadow: -5px -5px 0 5px #888;

box-shadow: -5px -5px 0 5px #888;

}

.ex-4 {

-moz-box-shadow: -5px -5px 5px 5px #888;

-webkit-box-shadow: -5px -5px 5px 5px #888;

box-shadow: -5px -5px 5px 5px #888;

}

.ex-5 {

-moz-box-shadow: 0 0 5px #888;

-webkit-box-shadow: 0 0 5px #888;

box-shadow: 0 0 5px #888;

}

.ex-6 {

-moz-box-shadow: 0 0 5px 5px #888;

-webkit-box-shadow: 0 0 5px 5px #888;

box-shadow: 0 0 5px 5px #888;

}

HTML

<h2>Outer : 테두리 밖</h2>

<div class="ex-1">JKUN.NET<br/>Example 1</div>

<div class="ex-2">JKUN.NET<br/>Example 2</div>

<div class="ex-3">JKUN.NET<br/>Example 3</div>

<div class="ex-4">JKUN.NET<br/>Example 4</div>

<div class="ex-5">JKUN.NET<br/>Example 5</div>

<div class="ex-6">JKUN.NET<br/>Example 6</div>

---

Inner 영역 코드 입니다.

CSS

.ex-i-1 {

-moz-box-shadow: inset -5px -5px #888;

-webkit-box-shadow: inset -5px -5px #888;

box-shadow: inset -5px -5px #888;

}

.ex-i-2 {

-moz-box-shadow: inset -5px -5px 5px #888;

-webkit-box-shadow: inset -5px -5px 5px #888;

box-shadow: inset -5px -5px 5px #888;

}

.ex-i-3 {

-moz-box-shadow: inset -5px -5px 0 5px #888;

-webkit-box-shadow: inset -5px -5px 0 5px#888;

box-shadow: inset -5px -5px 0 5px #888;

}

.ex-i-4 {

-moz-box-shadow: inset -5px -5px 5px 5px #888;

-webkit-box-shadow: inset -5px -5px 5px 5px#888;

box-shadow: inset -5px -5px 5px 5px #888;

}

.ex-i-5 {

-moz-box-shadow: inset 0 0 5px #888;

-webkit-box-shadow: inset 0 0 5px#888;

box-shadow: inner 0 0 5px #888;

}

.ex-i-6 {

-moz-box-shadow: inset 0 0 5px 5px #888;

-webkit-box-shadow: inset 0 0 5px 5px#888;

box-shadow: inset 0 0 5px 5px #888;

}

HTML

<h2>Inner : 테두리 안</h2>

<div class="ex-i-1">JKUN.NET<br/>Example 1. Inner</div>

<div class="ex-i-2">JKUN.NET<br/>Example 2. Inner</div>

<div class="ex-i-3">JKUN.NET<br/>Example 3. Inner</div>

<div class="ex-i-4">JKUN.NET<br/>Example 4. Inner</div>

<div class="ex-i-5">JKUN.NET<br/>Example 5. Inner</div>

<div class="ex-i-6">JKUN.NET<br/>Example 6. Inner</div>

Mutiple 영역 코드입니다.

CSS

.ex-m-1 {

-moz-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red,

-40px 30px yellow, -40px -30px 50px blue;

-webkit-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px

red, -40px 30px yellow, -40px -30px 50px blue;

box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red,

-40px 30px yellow, -40px -30px 50px blue;

}

HTML

<div class="ex-m-1">JKUN.NET<br/>Example 1. Multi</div>

---

RGB & RGBA 영역코드 입니다.

CSS

.ex-r-1 {

-moz-box-shadow: 5px 5px rgb(0, 0, 0);

-webkit-box-shadow: 5px 5px rgb(0, 0, 0);

box-shadow: 5px 5px rgb(0, 0, 0);

}

.ex-r-2 {

-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.7);

-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.7);

box-shadow: 5px 5px rgba(0, 0, 0, 0.7);

}

.ex-r-3 {

-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.5);

box-shadow: 5px 5px rgba(0, 0, 0, 0.5);

}

HTML

<div class="ex-r-1">JKUN.NET<br/>Example 1. RGB</div>

<div class="ex-r-2">JKUN.NET<br/>Example 2. RGBA</div>

<div class="ex-r-3">JKUN.NET<br/>Example 3. RGBA</div>

---

Boarder Radius 영역코드 입니다.

CSS

.ex-rd-1 {

-moz-border-radius: 5px;

border-radius: 5px;

-moz-box-shadow: 5px 5px black;

-webkit-box-shadow: 5px 5px black;

box-shadow: 5px 5px black;

}

.ex-rd-2 {

-moz-border-radius: 5px;

border-radius: 5px;

-moz-box-shadow: 5px 5px 5px black;

-webkit-box-shadow: 5px 5px 5px black;

box-shadow: 5px 5px 5px black;

}

HTML

<div class="ex-rd-1">JKUN.NET<br/>Example 1. Radius</div>

<div class="ex-rd-2">JKUN.NET<br/>Example 2. Radius</div> 

첨부파일은 예제파일 입니다.

백문이 불여일타. 뭐든 한번 쳐보는게 쵝오!!!

boxout.html