웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
[tip]간단한 반투명 필터 적용법
2004.04.21 20:12
간단하게 본문을 시작하기 전에 몇가지 알아두셔야 할 사항입니다.
CSS의 필터는 인터넷 익스플로러가 독자적으로 확장하여 웹페이지에 보여주는 것이므로
window판 인터넷 익스플로러에서만 보여지게 됩니다.
또한 필터 중에서는 익스플로러 4.0 이상에서 적용되는 필터가 있는거 하면
다이렉트X가 필요한 익스플로러 5.5 이상에서 표시되는 필터들이 있습니다.
글에서는 간단한 팁만 설명하므로...[그리고 제가 잘 아는 것도 아니므로]
이 팁은 익스플로러 6.0에서 제작되었습니다.
대략 이정도에서 본문으로 넘어 갑니다.
1. 텍스트에 이미지 같은 그라데이션을 주고 싶다!
- <font size="7" style="filter:alpha(opacity=100,finishopacity=0,style=1);height:10">Document example</font>
아주 간단합니다. <font>태그 내에 style="filter:alpha(opacity=100,finishopacity=0,style=1);height:10" 이 부분만
넣어주면 되는 것으로 스타일 부분에 대해 약간의 설명을 하도록 하겠습니다.
filter:alpha - 반투명효과의 필터를 적용합니다.
opacity=100 - 시작지점의 반투명도를 지정합니다. 이 때에 100은 100%를 의미하므로 투명도가 0% 입니다.
finishopacity=0 - 종료지점의 반투명도를 지정합니다. 0이므로 투명도 100% 겠지요.
style=1 - 반투명 필터의 종류를 지정합니다. 0 부터 3 까지 있으며, 0은 기본값이므로 지정하지 않으셔도 되며,
1은 부채꼴 모양, 2는 방사선꼴 모양, 3은 직사각형 모양으로 그라데이션을 지정합니다. 스타일을 1부터 3 중 한개를
설정하시면 시작 지점과 종료지점의 반투명도를 각각 지정해주셔야 하며, 기본값 0을 지정 시 시작지점의
반투명도만을 지정해주시면 됩니다.
간단히 이정도만 하겠습니다.
그리고 height:10 를 넣지 않으면 필터 적용이 되지 않습니다. height 내에 숫자는 관계없지만(0을 넣으도 무방)
높이를 지정하지 않으면 필터 적용이 되지 않습니다.
[정확히 말해서 크기지정을 하지 않으면 적용되지 않는다 입니다.]
2. 그럼 이미지에는 어떻게 필터를 적용하는가!
<img src="http://img.ragnarok.co.kr/download/wallpaper/wallpaper_64_1024.jpg" style="filter:alpha(opacity=100,finishopacity=0,style=1);width:1024;height:768;">
간단합니다.
위의 내용을 제대로 숙지하셨다면 당신은 어느새 필터의 달인![틀려!]
그럼 허접한 팁을 봐주셔서 감사합니다.
이미지까지 넣어서 보여드리고 싶었으나 귀찮은즘으로 인해 이만 사라집니다.
[주석 - 잘못된 내용은 언제나 겸허한 마음으로 받습니다]
CSS의 필터는 인터넷 익스플로러가 독자적으로 확장하여 웹페이지에 보여주는 것이므로
window판 인터넷 익스플로러에서만 보여지게 됩니다.
또한 필터 중에서는 익스플로러 4.0 이상에서 적용되는 필터가 있는거 하면
다이렉트X가 필요한 익스플로러 5.5 이상에서 표시되는 필터들이 있습니다.
글에서는 간단한 팁만 설명하므로...[그리고 제가 잘 아는 것도 아니므로]
이 팁은 익스플로러 6.0에서 제작되었습니다.
대략 이정도에서 본문으로 넘어 갑니다.
1. 텍스트에 이미지 같은 그라데이션을 주고 싶다!
- <font size="7" style="filter:alpha(opacity=100,finishopacity=0,style=1);height:10">Document example</font>
아주 간단합니다. <font>태그 내에 style="filter:alpha(opacity=100,finishopacity=0,style=1);height:10" 이 부분만
넣어주면 되는 것으로 스타일 부분에 대해 약간의 설명을 하도록 하겠습니다.
filter:alpha - 반투명효과의 필터를 적용합니다.
opacity=100 - 시작지점의 반투명도를 지정합니다. 이 때에 100은 100%를 의미하므로 투명도가 0% 입니다.
finishopacity=0 - 종료지점의 반투명도를 지정합니다. 0이므로 투명도 100% 겠지요.
style=1 - 반투명 필터의 종류를 지정합니다. 0 부터 3 까지 있으며, 0은 기본값이므로 지정하지 않으셔도 되며,
1은 부채꼴 모양, 2는 방사선꼴 모양, 3은 직사각형 모양으로 그라데이션을 지정합니다. 스타일을 1부터 3 중 한개를
설정하시면 시작 지점과 종료지점의 반투명도를 각각 지정해주셔야 하며, 기본값 0을 지정 시 시작지점의
반투명도만을 지정해주시면 됩니다.
간단히 이정도만 하겠습니다.
그리고 height:10 를 넣지 않으면 필터 적용이 되지 않습니다. height 내에 숫자는 관계없지만(0을 넣으도 무방)
높이를 지정하지 않으면 필터 적용이 되지 않습니다.
[정확히 말해서 크기지정을 하지 않으면 적용되지 않는다 입니다.]
2. 그럼 이미지에는 어떻게 필터를 적용하는가!
<img src="http://img.ragnarok.co.kr/download/wallpaper/wallpaper_64_1024.jpg" style="filter:alpha(opacity=100,finishopacity=0,style=1);width:1024;height:768;">
간단합니다.
위의 내용을 제대로 숙지하셨다면 당신은 어느새 필터의 달인![틀려!]
그럼 허접한 팁을 봐주셔서 감사합니다.
이미지까지 넣어서 보여드리고 싶었으나 귀찮은즘으로 인해 이만 사라집니다.
[주석 - 잘못된 내용은 언제나 겸허한 마음으로 받습니다]
댓글 2
제목 | 글쓴이 | 날짜 |
---|---|---|
자동으로 새로고침되게 하기 [5] | 권대건 | 2004.01.05 |
그림위에 마우스를 올렸을때 그림저장 버튼 안나타나게 하기...
[17]
![]() | PHASE | 2004.01.19 |
마우스 오버시 서브메뉴 나타나게 하는방법 입니다 [12] | 키드 | 2004.01.26 |
옅은 그레이 쓸때 붉은빛 들어가는경우 [10] | 김영호 | 2004.01.29 |
nzeo처럼 배너누르면 배너다는법 나오게하기! [6] | Rollrang | 2004.02.05 |
전송버튼의 테두리를 없애 BoA요 >_< [7] | 플로렐라 | 2004.02.14 |
스타일시트를 이용한 텍스트박스 스타일 제어(밑줄,점선) [8] | 01CODE.com | 2004.02.26 |
몇 가지 팁..( 좀 깁니다.. 어느 정도 안다고 생각하시는 분들, 추천 ) [3] | naughtykidd | 2004.02.26 |
간단하게, 색깔있는 밑줄 긋기. [4] | naughtykidd | 2004.02.27 |
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝!
[22]
![]() | CoolUnit | 2004.03.01 |
스타일 시트파일을 만들기 .. [4] | 박종익 | 2004.03.07 |
모든 스킨에서 중국어 간체 볼 수 있도록 해주는 법... [6] | 학몽 | 2004.03.09 |
(For 초보)폼안에 내용을 자동선택+자동복사해줍니다. [6] | 쉬드 | 2004.04.10 |
제로보드에서 손쉽게 복사하는 소스 (아래보다 더 편함..) [2] | Danggn™ | 2004.04.17 |
[tip]간단한 반투명 필터 적용법 [2] | 드래군 | 2004.04.21 |
홈페이지 빠르게하는 [로딩속도를 높히는 10가지방법] [20] | kim's | 2004.04.29 |
자동 스크롤 메뉴 (끄기 기능, 무한 스크롤 X) [6] | ☺심심 | 2004.05.02 |
허접 팁....레이어로 플래시 뺨치는 홈페이지 만들기 -추가-
[17]
![]() | 남규성 | 2004.05.05 |
플래시 swf파일 배경 투명하게 하기 ~~~ [8] | kim's | 2004.05.09 |
아기창 뜨고 부모창 닫기 [6] | 임소식 | 2004.05.19 |