◈필터태그
☞필터태그의 속성과 속성값
blur는 글자나 이미지를 흐릿하게 해주는 필터속성중의 하나입니다
chroma는 필터속성중의 하나로서 이미지의 특정 색상을 투명하게 나타내고자할때 이 속성을 씁니다.
alpha의 속성은 이미지나 글자에 투명도를 나타내는 나타낼때 쓰는 필터속성중에 하나입니다.
invert는 원본 이미지의 색상이나 밝기등을 반대값으로 표현(반전)할때 쓰이는 속성입니다
이것역시 필터속성중에 하나입니다.
mask는 불투명한 픽셀을 투명하게 표현하고 투명한픽셀은 불투명하게 표현할때 쓰는 속성으로 필터속성중에 하나입니다.
flIph는 이미지나 글자가 좌우로 뒤집히게할때 쓰이며 필터속성중에 하나입니다.
flIpv는 이미지나 글자가 상하로 뒤집히게할때 쓰이며 필터속성중에 하나입니다.
add:본래의 이미지나 글자의 조합을 위한 속성으로서 속성값으로는 0과 1을 줍니다.
0을 주게되면 원본이미지나 글자를 조합하지 않는다 속성값을 1을 주면 조합하게 됩니다.
strength:글자나 이미지의 그림자가 흐릿해짐과 그렇지 않음의 강도를 주는 속성으로 속성값에는
0~100사이를 지정해줄 수 있습니다.strength앞에 어떤 필터속성을 쓰느냐에 따라 달라지며
강약을 주는 속성이라고 생각하시면 되겠습니다.
direction:글자또는 이미지의 흐릿하게 번지는 그림자의 방향(각도)을 설정합니다
속성값에는 , 45, 90, 135, 180, 225, 270, 315도의 값을 지정할 수 있습니다.
opacity:이미지또는 글자의 불투명값을 주는 속성으로 속성값은 0~100까지 지정해줄 수 있습니다
숫자가 높을수록 불투명해집니다.
lightstrength:웨이브필터에서는 빛의 강도를 나타내며0~100까지 지정해줄 수 있습니다.
phase웨이브필터에서는 웨이브효과의 시작위치를 나타내며 속성값으로는 0~100까지 지정해줄 수 있습니다.
<![CDATA[blur필터를 사용할때의 예제
예제①
<img src="http://www.shs1004.com/image/c1f/c1_filtertag.jpg" border="1" style="filter:blur(direction=315,strength=100)">
xray필터를 사용했을때의 예제
예제②
<img src="http://www.shs1004.com/image/c1f/c1_filtertag.jpg" style="filter:xray()">
gray필터를 사용했을때의 예제
예제③
<img src="http://www.shs1004.com/image/c1f/c1_filtertag.jpg" style="filter:gray()">
alpha필터를 사용했을때의 예제
예제④
<img src="http://www.shs1004.com/image/c1f/c1_filtertag.jpg" style="filter:alpha(opacity=100, style=2, finishopacity=0)">
fliph필터를 사용했을때의 예제
예제⑤
<img src="http://www.shs1004.com/image/c1f/c1_filtertag.jpg" style="filter:fliph()">
mask필터를 사용했을때의 예제
예제⑥
<img src="http://www.shs1004.com/image/c1f/c1_filtertag.jpg" style="filter:mask()">
flipv필터를 사용했을때의 예제
예제⑦
<img src="http://www.shs1004.com/image/c1f/c1_filtertag.jpg" style="filter:flipv()">
예제⑧
wave필터를 사용했을때의 예제
<img src="http://www.shs1004.com/image/c1f/c1_filtertag.jpg" style="filter:wave(strength=8,freq=3,lightstrength=10,phase=25,add=0)">
]]>
원 본 |
<![CDATA[
예제①<div style="width:100; height:16; font-size:17pt; color=#003366; filter:blur(add=1,direction=315,strength=30)">푸른나래<div>
예제②<div style="width:100; height:26; font-size:14pt; filter:shadow(color=#cccccc,direction=45)">푸른나래</div>
예제③
<div style="width:100; height:16; font-size:17pt; filter:alpha(opacity=60, style=1, finishopacity=0)">푸른나래</div>
예제④
<div style="width:100; height:16; font-size:14pt; filter:glow(color=#003366, strength=5)">푸른나래</div>
]]>
|
결과① 푸른나래 |
결과② 푸른나래 |
결과③ 푸른나래 |
결과④ 푸른나래 |