CSS3 투명도(opacity) 그림자(shadow) 설정
초창기 부터 주목되었던 투명도와 그림자에 대해 알아본다
투명도(opacity)
투명도를 설정함으로서 뒤의 z-inex설정에서 뒤에 엘리먼트라던가 겹친 엘리먼트를 보이게하는 등의 모습을 구현 할 수 있다.브라우저는 역시 IE가 예외 IE9는 지원한다. 단 IE8이하버전은 필터를 사용해야한다.
<div class="box1">box1 opctical 50%</div>
<div class="box2">box2 opctical 30%</div>포지션은 겹치게 했다.
div{ width:300px; height:150px; position:relative;}
.box1{ left:100px; top:30px;
background-color:#F00;
opacity:.5;
}
.box2{ left:150px; top:-50px;
background-color:#00F;
opacity:.3;
}
투명도 쓸때 생각할것
1. 투명도는 누적되어 나타난다. 첫번째 박스는 50% 두번째 박스는 30%이다.
2. 투명도는 자식 엘리먼트에도 역시 적용된다. 자식엘리먼트는 부모것을 그대로 받아들이지 다시 원래대로 돌릴 수 없다.
문제의 IE8이하 버전을 해결할 필터를 이용한 방법은 다음과 같다.
#IE{ background-color:#00F;
filter: alpha(opacity=75); }투명도로 0~100%를 나타낸다.
그림자(shadow)
텍스트 그림자 효과와 같다. 좀더 옵션이 있다. IE는 IE9부터 지원한다
값은 색깔 가로 옵셋, 세로 옵셋, 블루어 효과, 그리고 마지막 값은 안쪽으로 그림자 옵션이다(inset)
.box3{ background-color:#090;
box-shadow:#000 15px 15px 10px;
}
.box4{ background-color:#090;
box-shadow:#C00 15px 15px 30px
,#000 10px 10px 3px;
}
.box5{ background-color:#090;
box-shadow:#000 15px 15px 10px inset;
} 결과는 여기서 확인 http://sianasiatiger.cafe24.com/study/css3-box_03.html
첫번째는 간단한 적용한것. 마지막은 안으로 한 것이다.
두번째와 같이 여러개를 줄수도 있다. 여기서 먼저 설정해준것이 맨위에 보인다.
'프로그래밍 > CSS' 카테고리의 다른 글
| CSS 리스트 스타일 (0) | 2012.04.13 |
|---|
- 메타 태그 문자 선언
