css / box-shadow / text-shadow / 그림자 효과 주기 / 박스 그림자
2016. 1. 14. 15:03ㆍlanguage/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 |
예제 소스 결과
'language > css' 카테고리의 다른 글
| CSS | cursor 종류 속성 / 마우스 커서 변경 (0) | 2016.08.08 |
|---|---|
| 무료 버튼 아이콘 사이트 추천 / Font Awesome Icons / 폰트 아이콘 (0) | 2016.01.05 |