CSS3 투명도(opacity) 그림자(shadow) 설정

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
첫번째는 간단한 적용한것. 마지막은 안으로 한 것이다.
두번째와 같이 여러개를 줄수도 있다. 여기서 먼저 설정해준것이 맨위에 보인다.