Menu

글자에 효과넣기

2016.06.03 00:53

안개핑 Html & Css

 

앞의 것과 반복 되는 것도 있습니다.

(1)Glow 효괍니다....

(1)Glow의 효괍니다. 포토샵에서 outer grow와 비슷.

FILTER: Glow(color=#0080ff,strength:2);FONT-FAMILY: 바탕; FONT-SIZE: 12pt; HEIGHT: 20px;LINE-HEIGHT: 200%; WIDTH: 100%" >

파란색으로 된 부분이 여기서 포인트지요. #0080ff 라는 색상으로 두께를 2만큼 주어서 그로우 효과를 표현했다는 이야깁니다.

글꼴은 바탕체로 글 크기는 12pt로 설정했다는 이야기지요. 폭은 20px로 설정하고요. 글 색깔은 white 로 설정했습니다.

빨간색으로 된 이 부분이 중요한데 먼저 width와 height 를 꼭 설정해 주셔야 효과가 먹습니다.px 단위나 % 단위 아무거나 가능합니다.

line-height를 쓰는 이유는 필터 효과가 적용되는 범위가 커지면. 효과가 짤릴 위험이 있습니다.

보통 9pt나 10pt 글꼴에서는 150% 이상의 줄건격을 설정해 주셔야 합니다. 15pt에서는 200%가 적당하구요.

(2)그림자 Shadow 효과...

(2)번 효과도 멋있지요.포토샵에서 drop shadow 비슷

FILTER:Shadow(color=#9999FF,direction=115); FONT-FAMILY: 바탕; FONT-SIZE:12pt; FONT-WEIGHT: bold; HEIGHT: 23px; LINE-HEIGHT: 200%;WIDTH: 100%" >

파란색 부분에서 #9999ff가 새도우 색깔이고, direction=115는 새도우 효과의 적용 각도입니다. 참고로 direction=0은 새도우가 위로된 효과,direction=180은 밑으로 된 효과입니다.

(1)번과 같이 빨간색으로 된 부분을 주의하셔야 합니다.

(3)웨이브효과

(3)번 효과는 Wave 필터를 적용

FILTER:Wave(add=0,freq=2,lightstrength=5,phase=50,strength=3);FONT-FAMILY: 바탕; FONT-SIZE: 12pt; FONT-WEIGHT: bold; HEIGHT: 10px; LINE-HEIGHT: 200%; WIDTH: 100%" >

파란색 부분에서 딴건 재껴두고 freq와 lightstreng,strength에 대해서만 설명드릴께요. 나머진 잘 몰라서freq :: wave 필터 적용값

lightstrength :: 적용되는 글자의 밝기를

strength :: wave 필터의 강도(freq하고 유사함)

여기서도 저기 빨간색으로 되어있는 곳에 유념하시구요

(4)Blur필터를 적용

(4)번 효과는 원래 글자에 blur필터를 적용

FILTER:Blur(add=1,direction=145,strength=4);FONT-FAMILY: 바탕; FONT-SIZE: 12pt; FONT-WEIGHT: bold; HEIGHT: 10px; LINE-HEIGHT: 200%; WIDTH:100%">

파란색 부분에서 add :: 0일때 글자 색상과 그림자 색상이 같게 설정 , 1 일때 유사한 색상으로 설정 됩니다.

direction :: shadow 효과에서 본 옵션이죠. 그림자 각도를 나타내는 겁니다. strength :: 효과가 나타나는 범위랍니다. 3이나 4정도가 적당합니다.

(5)글자가 투명해지는 효과

(5)번 효과는 알파 필터를 글자에 적용시켜 본 것입니다.

FILTER:Alpha(opacity=80,finishopacity=0,style=1,startX=0,startY=0,finishX=90,finishY=0);FONT-FAMILY: 바탕; FONT-SIZE: 12pt; FONT-WEIGHT: bold; HEIGHT: 10px; LINE-HEIGHT: 200%; WIDTH: 300px" >

파란색 부분을 설명드리죠. 좀 복잡해 보이죠

opacity :: 투명 적용 시작부분의 투명도를 설정하는 부분입니다.

finishopacity :: 투명도가 끝나는 지점의 투명도를 설정하는 부분입니다.

style :: 1로 설정하시면 서서히 투명해지는 fade 효과가 나옵니다. 2,3은 글자에 뿌옇게 구름과 같은 효과가 적용되더군요

startX, startY :: 효과가 시작되는 X지점(가로)과 Y지점(세로)의 위치를 설정하는 곳입니다.

finishX, finishY :: 효과가 끝나는 끝지점을 나타냅니다.

마찬가지로 빨간색 부분을 주의하셔야 하는데

height,weight 옵션을 반드시 px 단위로 주셔야 합니다. % 단위로 하면 효과가 이상하게 나옵니다.

적용될 글자 길이를 적당히 계산하셔서 px 단위로 설정하세요. 이것도 상당히 괜찮은 효과니 잘 활용하세요

 

부시시한 필터효과~

 

많이보는효과죠~~!

보기 좋죠!

저작자 표시 비영리 변경 금지
신고

'Html & Css' 카테고리의 다른 글

이미지 흐리게 표현하기(포토샵효과)  (0) 2016.06.03
페이지에 테두리입히기  (0) 2016.06.03
글자에 효과넣기  (2) 2016.06.03
fleldset으로 Box만들기  (0) 2016.06.03
링크된 곳에 CURSOR모양 제어하기  (0) 2016.06.03
테이블에 MouseOver효과  (0) 2016.06.03

댓글 2

  • 개봉성
    2016.12.30 10:56 신고 modify reply

    filter를 적용했을때의 글자모양도 같이 보여주었으면. 좋겠는데,
    filter를 넣어도 변화가 없고, 안됨니다

    • 2017.01.01 02:58 신고 modify

      안녕하세요?
      게사판 속성상 효과가 반영되지 않는것도 있습니다.
      앞에 '글자에 여러가지 효과넣기' 게시물을 보시면 조금더 이해가 되실겁니다.
      저도 오래전에 하던 공부라 설명이 어렵습니다..ㅠㅜ