[스크랩] alpha필터- 글자를 중심으로

필터 alpha  ,
일정한  패턴 (전체, 부분형, 전체타원형,전체사각형 등)  형태로 투명하게 만드는 것입니다.

글자와 그림 에 적절히 활용하면  아름다운  화면을  만들 수 있습니다.  
특히  앞으로  소개해 드릴  레이어 와  마퀴태그  표와 잘 조합하면   플래시 나  에니메이션G I F   비슷한 효과도 낼수 있습니다.

alpha 는 모두 4가지 형태(style) 있으며,  그 중 부분형(가로,세로선 을 적절히 활용구역을 정함)은 alpha의 모든 속성을 사용하며, 그외는  Opacity, FinishOpacity 만 사용합니다.

 

형태	사용예
style=0	filter:alpha(opacity=수치)  전체를  일정한   투명도로  필터.
style=1	filter:alpha(opacity=수치, FinishOpacity=수치,Style=1,StartX=수치,   FinishX=수치, StartY=수치, FinishY=수치)  일정 부분만을  한정하여 일정한 비율로 투명도를 변화하는 필터
style=2	filter:alpha(opacity=수치, FinishOpacity=수치,Style=2)  전체를 가운데를 중심으로 타원형으로 투명도를 변화하는 필터
style=3	filter:alpha(opacity=수치, FinishOpacity=수치,Style=3)  전체를 가운데를 중심으로 사각형으로 투명도를 변화하는 필터

 

alpha 의 속성 기본값

속성 기본값 이라 하면 해당 속성을 생략해도 다음과 같은 값으로 정하여 진다는 것입니다.

◈ style=0   FILTER: alpha(style=0, Opacity=100)"

◈ style=1   FILTER: alpha(style=1, Opacity=100,  FinishOpacity=0, 
                  StartX=0, FinishX=100, StartY=0,  FinishY=0 )

◈ style=2   FILTER: alpha(style=2, Opacity=100, FinishOpacity=0)

◈ style=3   FILTER: alpha(style=3, Opacity=100, FinishOpacity=0)

 

◆ 원본자료  
승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
===== 태그 소스 ====
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%; background-color:rgb(250,238,108); width:98%; height:40px;">승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span> 

 

☞ background-color:rgb(250,238,108); 은  background-color:#FAEE6C 와 같습니다.

 

=========  style0    전체를  같은  Opcacity 값으로  투명하게

◆ filter:alpha (style=0)   Opcacity 속성을 사용하지 않을 때
승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
========== 태그 소스 ===
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;
filter:alpha (style=0); background-color:rgb(250,238,108); width:98%; height:40px;">승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

 

◆◆  filter:alpha ( style=0, Opacity=40 )
승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
========== 태그 소스 ===
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;
filter:alpha (style=0, Opacity=70); background-color:rgb(250,238,108); width:98%; height:40px;">승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

 

◆◆◆  filter:alpha ( Opacity=40 )  style=0 은  생략해도 된다.
승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
========== 태그 소스 ===
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;
filter:alpha (Opacity=70); background-color:rgb(250,238,108); width:98%; height:40px;">승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

 

 

==  style2  가운데를 중심으로  전체를 Opcacity,FinishOpacity 값으로 
                타원형으로 투명하게

 

◆ filter:alpha (style=2)  Opacity, FinishOpacity 속성을 생략할 때

승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
========== 태그 소스 ===
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;
filter:alpha (style=2); background-color:rgb(250,238,108); width:98%; height:40px;">승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

 

◆◆ filter:alpha (style=2,Opacity=100, FinishOpacity=0 )  

승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
========== 태그 소스 ===
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;
filter:alpha (style=2,Opacity=100, FinishOpacity=0); background-color:rgb(250,238,108); width:98%; height:40px;">승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

 

◆◆◆ filter:alpha (style=2,Opacity=80, FinishOpacity=20 )  

승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
========== 태그 소스 ===
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;
filter:alpha (style=2,Opacity=80, FinishOpacity=20); background-color:rgb(250,238,108); width:98%; height:40px;">승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

 

 

==  style3   전체를 Opcacity,FinishOpacity 값으로  사각형 중심으로 투명하게
                 글씨에는  style2  나 별로 다른 것이 없는 것 같습니다. 
                 그러나 아래 그림은 확실히 다릅니다.

 

◆ filter:alpha (style=3)  Opacity, FinishOpacity 속성을 생략할 때

승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
========== 태그 소스 ===
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;
filter:alpha (style=2); background-color:rgb(250,238,108); width:98%; height:40px;">승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

 

◆◆ filter:alpha (style=3,Opacity=100, FinishOpacity=0 )  

승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
========== 태그 소스 ===
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;
filter:alpha (style=3,Opacity=100, FinishOpacity=0); background-color:rgb(250,238,108); width:98%; height:40px;">승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

 

◆◆◆ filter:alpha (style=3, Opacity=80, FinishOpacity=20 )  

승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
========== 태그 소스 ===
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;
filter:alpha (style=3,Opacity=80, FinishOpacity=20); background-color:rgb(250,238,108); width:98%; height:40px;">승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

 

 

=== 수평,수직 또는 수평수직선 조합으로  일정부분 투명하게   style1

그런데 style1 형태는 설명하기가 좀 어렵습니다. 
기본 개념은  수평선(startx, FinishX) 형태로  투명하게 할때는  수직선 (StartY, FinishY ) 값들을 생략해되 되지만,

수직선 형태로  투명하게 만들때는  반드시 startx=0, FinishX=0 으로 주어야 한다는 것입니다.  

또한 X,Y 좌표의 시작점은 좌측 제일 상단 부분입니다.

여기서는  width와 height값도 중요하게 작용하며,  아래는 예시이고  Opacity와
FinishOpacity 값을  임의로 변경하여 보다 멋있는  작품을 만들 수 있습니다.

수만은 변화가 있는  것이라  노력도 많이 필요합니다.

   

= == 수평형태로 투명하게  style=1  

◆ filter:alpha (style=1)  속성을 사용하지 않고 style=1 로 할때
승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
========== 태그 소스 ===
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;
filter:alpha (style=1); background-color:rgb(250,238,108); width:98%; height:40px;">승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

 

위와 같이 하여도   기본값인 (Opacity=100,  FinishOpacity=0,  StartX=0,   
   FinishX=100,  StartY=0, FinishX=0 ) 으로 정하여 투명도를 정합니다.

 

◆  filter:alpha (style=1,Opacity=100, FinishOpacity=0,
                                                   startx=0, finishx=100) 
승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
=== 태그 소스 ===
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;
filter:alpha (style=1,Opacity=100, FinishOpacity=0, startx=90, finishx=100);
background-color:rgb(250,238,108); width:60%; height:40px;">
승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

 

◆  filter:alpha (style=1,Opacity=100, FinishOpacity=0,
                                                        startx=50, finishx=60);
승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
=== 태그 소스 ===
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;
filter:alpha (style=1,Opacity=100, FinishOpacity=0, startx=50, finishx=60);
background-color:rgb(250,238,108); width:98%; height:40px;">
승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

 

FinishX=60 은  수평의 60% 정도에서 100% 투명하게 되니까 그외 부분은
보이지 않게 됩니다.  즉  FinishX의 값을 넘어 가는 지점은 전부 FinishOpacity 값
으로 처리됩니다.

또한  수직선과 수평선이 만날 때도  교차되지 않는 지점도 전부 FinishOpacity값
으로 처리됩니다.  ( 참 어려운 이야기 같은데요???  수학으로 말하면, 교집합 부분이외는 전부  FinishOpacity 으로 투명도를 정합니다.  그런데 퍼짐의 정도도 고려되어야 하므로 좀 복잡합니다...)

 

◆  filter:alpha (style=1,Opacity=100, FinishOpacity=0,
                                 startx=50, finishx=60,  startY=0, finishY=0)

승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
=== 태그 소스 ===
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;
filter:alpha (style=1,Opacity=100, FinishOpacity=0, startx=50, finishx=60,startY=0, finishY=0 );  width:98%; height:40px;">승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

 

◆ filter:alpha (style=1,Opacity=100, FinishOpacity=0,
                                startx=90, finishx=100, starty=0, finishy=0)
 승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
==== 태그 소스 ====
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;filter:alpha (style=1,Opacity=100, FinishOpacity=0, startX=90, finishX=100, startY=0, finishY=0); background-color:rgb(250,238,108); width:98%; height:40px;">승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

===============수직으로  style=1

◆  filter:alpha (style=1,Opacity=100, FinishOpacity=0,
                                   startX=0, finishx=0, startY=0, finishY=100 )

승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
========== 태그 소스 ===
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;
filter:alpha (style=1,Opacity=100, FinishOpacity=0, startx=0, finishx=0,startY=0, finishY=100 ); width:98%; height:40px;">승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

 

◆  filter:alpha (style=1,Opacity=100, FinishOpacity=0,
                                 startX=0, finishx=0,  startY=30, finishY=60)

승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
===== 태그 소스 ====<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;filter:alpha (style=1,Opacity=100, FinishOpacity=0, startx=0, finishx=0,startY=30, finishY=60 ); width:98%; height:40px;">승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

 

◆ filter:alpha (style=1,Opacity=100, FinishOpacity=0,
                                                      startY=30,  finishY=60)
승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
===== 태그 소스 ====
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;
filter:alpha (style=1,Opacity=100, FinishOpacity=0, startx=0, finishx=0,startY=0, finishY=40 );
width:98%; height:40px;">승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

 

style=1의  기본값인 (Opacity=100,  FinishOpacity=0,  StartX=0,   
FinishX=100,  StartY=0, FinishX=0 ) 중 여기서는 StartX와 FinishX 값을 생략하니까 아래와 같이 기본값으로 간주되어  수직의 투명도가  다르게 나타나게 되었습니다.

 

 

◆  filter:alpha (style=1,Opacity=100, FinishOpacity=0,
                          startX=0, finishx=100, startY=30, finishY=60)
승객들의 얼굴에는 작은 미소가 떠오르고 있었다...
===== 태그 소스 ====
<span style="font-family:굴림; font-size:19pt; color:black; line-height:170%;
filter:alpha (style=1,Opacity=100, FinishOpacity=0, startx=0, finishx=0,startY=0, finishY=40 );
width:98%; height:40px;">승객들의 얼굴에는 작은 미소가 떠오르고 있었다...</span>

 

 

다음은 그림의  Alpha 필터 효과 입니다.  style=1은 다음에 설명드리겠습니다.

 

그림 원본	style="filter:alpha(opacity=60)"
style="filter:alpha(style=2)"	style="filter:alpha(style=3)"

출처 : 아름다운 설악

글쓴이 : 바다소리 원글보기

메모 :