CSS에서 opacity(투명도)와 shadow(그림자) 생성하기

투명도(opacity)

 

투명도를 만들때는 뒤쪽 z-inex설정 뒤에 엘리먼트나 겹친 엘리먼트를 보이게하는 등의 모습들을 표현 할 수 있습니다. 브라우저ie가 예외이고 ie9은 지원을 합니다.  그러나 ie8이하 버전은 필터를 사용하여야합니다.

 

 

<div class="box1">box1 opctical 60% </div>  <div class="box2">box2 opctical 40% </div>

 

포지션은 겹치게 하였습니다.

 

 

div{ width:280px; height:170px; position:relative;} .box1{left:120px; top:30px;              background-color:#FF4220;             opacity:.5;             }   .box2{left:170px; top:-50px;              backgroud-color:#FF4220;              opacity:.3;             }

 

 

 

 

 

opacity(투명도)를 줄때 알아두어야 할것은

  1. 투명도는 누적이 되어 나타납니다. 첫번째 박스는 50% 두번째 박스는 30%입니다.

  2. 투명도는 자식 엘리먼트에도 마찬가지로 적용됩니다. 자식엘리먼트는 부모의것을 그대로 받아들이지 다시 원래대로 되돌릴 수 없습니다.

 

앞에서 말씀드린것 처럼 E8이하 버전에서 표현하는 방법은 다음과 같습니다.

 

# IE{ background-color:#FF4220;       filer : alpha(opacity=45);}

 

 

shadow(그림자효과)

 

폰트의 그림자 효과와 동일하며 좀더 옵션이 있습니다.  ie는 ie9부터 지원합니다.

값은 색깔 가로 옵셋, 세로 옵셋, 블루어 효과, 마지막 값은 안쪽으로 그림자 옵션입니다. (inset)

 

 

.box1 {background-color:#090;           box-shadow:#000 18px 18px  12px;           }   .box2 {background-color:#090;           box-shadow:#c00 18px 18px  25px;                      ,#000 13px  13px     3px;          }   .box3 {background-color:#090;           box-shadow:#000 18px  18px  12px  inset;         }

첫번째는 간단히 적용한 것이며, 마지막은 안쪽으로 적용한것입니다.

두번째와 같이 여러개를 줄수도 있습니다.  먼저 설정한것이 맨위에 보입니다.