728x90

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

728x90

'프로그래밍 > CSS' 카테고리의 다른 글

CSS 리스트 스타일  (0) 2012.04.13
728x90

<html>
<head>
<style type="text/css">
ul.circle {list-style-type:circle;}
ul.disc {list-style-type:disc;}
ul.square {list-style-type:square;}
ol.decimal {list-style-type:decimal;}
ol.lower_alpha {list-style-type:lower-alpha;}
ol.lower_roman {list-style-type:lower-roman;}
ol.upper_alpha {list-style-type:upper-alpha;}
ol.upper_roman {list-style-type:upper-roman;}
ol.none {list-style-type:none;}
</style>
</head>

<body>
<ul class="circle">
    <li>Circle type</li>
    <li>HTML</li>
    <li>CSS</li>
</ul>
<ul class="disc">
<li>Circle type</li>
<li>HTML</li>
<li>CSS</li>
</ul>
<ol class="decimal ">
<li>Circle type</li>
<li>HTML</li>
<li>CSS</li>
</ol>
<ol class="upper_alpha">
<li>Circle type</li>
<li>HTML</li>
<li>CSS</li>
</ol>

</body>

</htm>

  • Circle type
  • HTML
  • CSS
  • Circle type
  • HTML
  • CSS
  1. Circle type
  2. HTML
  3. CSS
  1. Circle type
  2. HTML
  3. CSS
728x90

'프로그래밍 > CSS' 카테고리의 다른 글

CSS3 투명도(opacity) 그림자(shadow)  (0) 2013.08.26

+ Recent posts