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