[CSS] 26. Filters - Texts and Image Effects ( 텍스트, 이미지 효과 )

자~ 오늘은 CSS 필터에 대해서 알아볼 텐데요~ 순수한 CSS를 이용해서 텍스트나 이미지 등등에 효과를 주는 방법을 알아볼 것입니다.

이 필터는 IE 4.0 이상에서만 작동합니다. 

( 테스트를 해봤는데 이 CSS 필터는 최근 브라우저( Chrome, IE, FireFox )에서는 지원을 안하는 것 같네요..^^;; 그냥 이런 것도 있구나 하시면 될것 같습니다.)

자, 그럼 CSS 필터에 대해서 하나하나 알아보도록 할까요?

모든 예제는 브라우저 별로 결과가 다르게 보일 수 있다는 것을 명심하세요. 적용이 안되는 브라우저도 있습니다.

Alpha Channel

이건 뭐 이미 다 아시리라 생각합니다. 알파 값이죠. 객체의 투명도를 설정하는 필터입니다.

다음은 이 필터에서 사용할 수 있는 파라미터와 그에대한 설명입니다.

Parameter	Description
opacity	Level of the opacity. 0 is fully transparent, 100 is fully opaque.
finishopacity	Level of the opacity at the other end of the object.
style	The shape of the opacity gradient. 0 = uniform 1 = linear 2 = radial 3 = rectangular
startX	X coordinate for opacity gradient to begin.
startY	Y coordinate for opacity gradient to begin.
finishX	X coordinate for opacity gradient to end.
finishY	Y coordinate for opacity gradient to end.

예제:

<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: blue; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>

Motion Blur

This will be used to create blurred pictures or text with the direction and strength. Following are the parameters which can be used in this filter:

Parameter	Description
add	True or false. If true the image is added to the blurred image and if false the image is not added to the blurred image.
direction	The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left). 0 = Top 45 = Top right 90 = Right 135 = Bottom right 180 = Bottom 225 = Bottom left 270 = Left 315 = Top left
strength	The number of pixels the blur will extend. The default is 5 pixels.

예제:

<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Blur(Add = 0, Direction = 225, Strength = 10)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: blue; Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials</div>

Chroma Filter

This will be used to make any particular color transparent and usually it is used with images. You can use it with scrollbars also.Following are the parameters which can be used in this filter:

Parameter	Description
color	The color that you'd like to be transparent.

예제:

<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Chroma(Color = #FFFFFF)"> <p>Text Example:</p> <div style="width: 580; height: 50; font-size: 30pt; font-family: Arial Black; color: #3300FF; Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>

Drop Shadow Effect

This will be used to create a shadow of your object at the specified X (horizontal) and Y (vertical) offset and color. . Following are the parameters which can be used in this filter:

Parameter	Description
color	The color, in #RRGGBB format, of the dropshadow.
offX	Number of pixels the drop shadow is offset from the visual object, along the x-axis. Positive integers move the drop shadow to the right, negative integers move the drop shadow to the left.
offY	Number of pixels the drop shadow is offset from the visual object, along the y-axis. Positive integers move the drop shadow down, negative integers move the drop shadow up.
positive	If true, all opaque pixels of the object have a dropshadow. If false, all transparent pixels have a dropshadow. The default is true.

예제:

<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Chroma(Color = #000000) DropShadow(Color=#FF0000, OffX=2, OffY=2, Positive=1)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: DropShadow(Color=#000000, OffX=2, OffY=2, Positive=1)">CSS Tutorials</div>

Flip Effect

This will be used to create a mirror image of the object. Following are the parameters which can be used in this filter:

Parameter	Description
FlipH	Creates a horizontal mirror image
FlipV	Creates a vertical mirror image

예제:

<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: FlipH"> <img src="/images/css.gif" alt="CSS Logo" style="Filter: FlipV"> <p>Text Example:</p> <div style="width: 300; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: FlipV">CSS Tutorials</div>

Glow Effect

This will be used to create a glow around the object. If it is a transparent image then glow is created around the opaque pixels of it. Following are the parameters which can be used in this filter:

Parameter	Description
color	The color you want the glow to be.
strength	The intensity of the glow (from 1 to 255).

예제:

<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>

Grayscale Effect

This will be used to convert the colors of the object to 256 shades of gray. Following are the parameters which can be used in this filter:

Parameter	Description
gray	Converts the colors of the object to 256 shades of gray.

예제:

<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Gray"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Gray">CSS Tutorials</div>

Invert Effect

This will be used to map the colors of the object to their opposite value in the color spectrum ie. to create a negative image. Following are the parameters which can be used in this filter:

Parameter	Description
Invert	Maps the colors of the object to their opposite value in the color spectrum.

예제:

<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: invert"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: invert">CSS Tutorials</div>

Mask Effect

This will be used to turn transparent pixels to a specified color and makes opaque pixels transparent. Following are the parameters which can be used in this filter:

Parameter	Description
color	The color that the transparent areas will become.

예제:

<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Mask(Color=#00FF00)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Mask(Color=#00FF00)">CSS Tutorials</div>

Shadow Filter

This will be used to create an attenuated shadow in the direction and color specified. This is a filter lies in between Dropshadow and a Glow. Following are the parameters which can be used in this filter:

Parameter	Description
color	The color that you want the shadow to be.
direction	The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left). 0 = Top 45 = Top right 90 = Right 135 = Bottom right 180 = Bottom 225 = Bottom left 270 = Left 315 = Top left

예제:

<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials</div>

Wave Effect

This will be used to gives the object a sine wave distortion to make it look wavey. Following are the parameters which can be used in this filter:

Parameter	Description
add	A value of 1 adds the original image to the waved image, 0 does not.
freq	The number of waves.
light	The strength of the light on the wave (from 0 to 100).
phase	At what degree the sine wave should start (from 0 to 100).
strength	The intensity of the wave effect.

예제:

<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials</div>

X-Ray Effect

This will be used to grayscales and flattens the color depth. Following are the parameters which can be used in this filter:

Parameter	Description
xray	Grayscales and flattens the color depth.

예제:

<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Xray""> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; style="Filter: Xray">CSS Tutorials</div>

Reference : http://www.tutorialspoint.com/css/css_text_effects.htm