css / box-shadow / text-shadow / 그림자 효과 주기 / 박스 그림자

2016. 1. 14. 15:03language/css

css를 이용하여 태그에 간단하게 그림자 효과를 주는 방법이다.

 

box-shadow 를 사용하면

 

기본적인 그림자 효과를 구현 할 수 있다.

 

 

 

 

IE 는 9 이상부터 지원 가능하고 다른 브라우저들(크롬, 파폭, 사파리 등)은 모두 가능하다.

 

box-shadow 의 각 항목들의 순서는 우, 좌, 흐릿한 정도(블러) 색상 순서이다.

 

각 항목을 잘 조정하면 간편하게 그림자 효과를 구현 할 수 있다.

 

 

 

 

text-shadow 도 사용 방법 및 각 항목들의 순서는 동일하나

 

IE 는 10 이상부터 지원 가능하고 다른 브라우저들(크롬, 파폭, 사파리 등)은 모두 가능하다.

 

 

 

 

 

 

box-shadow 예제소스

 

<style>
.divBox {
    width : 200px;
    height : 200px;
    background-color : green;
    border : 1px solid black;
}
.shadow {
    box-shadow : 2px 2px 5px #999;
}
</style>
 <BODY>
  <div class="divBox">
  </div>
 
  <br/>
  <br/>
 
   <div class="divBox shadow">
  </div>
 </BODY>
cs

 

예제 소스 결과

 

 

 

1 2 3