[css3] text-shadow 속성(글자 그림자 효과)

 

 

[css3] text-shadow 속성(글자 그림자 효과)

 

 

예전에 box-shadow 속성에 배웠죠.

 

box-shadow 속성은 박스에 그림자를 만들고,

 

text-shadow 속성은 글자에 그림자를 만듧니다.

 

속성값은 비슷한 점이 많아 box-shadow를 미리 둘러 보고 오시면 좋을 것 같아요

 

box-shadow 속성(그림자 효과)

 

 

 

▶문법

 

text-shadow: h-shadow v-shadow blur color | none | initial

h-shadow 필수 지정. 수평 그림자 위치. 길이값(px, em, pc, in, 등..)

               양수 값을 지정하면 박스 오른쪽에 그림자가 드리워지며, 음수 값은 박스 왼쪽에 그림자가 드리워짐

v-shadow 필수 지정. 수직 그림자 위치.  길이값(px, em, pc, in, 등..)

               양수 값은 박스 위쪽에 그림자가 드리워지며, 음수 값은 박스 아래 쪽에

 

blur 선택 지정, 그림자의 흐림 반경. 길이값(px, em, pc, in, 등..)

       0으로 지정하면 그림자가 진하고, 숫자가 높아질수록 점점 흐릿해짐(양수값만 허용)

       따로 지정하지 않으면 0임.

 

color 선택 지정. 그림자 색깔

        ie9, firefox, opera 기본값은 검은색이며, 
        safari, chrome은 color 값을 지정하지 않으면 그림자가 생기지 않음.

 

none 기본값으로, 그림자가 표시되지 않음

initial 초기화

 

상속여부 : yes

 

▶브라우저 지원: ie 10.0+, chrome 4.0+, firefox 3.5+, safari 4.0+, opera 9.6+

 

 

▶사용 예:

 

h3{text-shadow: 5px 10px 5px grey;}

 

첫번째 5px는 수평 그림자, 두번째 10xp는 수직 그림자, 세번째 5px는 흐림 정도, grey는 그림자 색상입니다.

 

h3{text-shadow: -5px -5px 2px blue, -7px -7px 2px grey;}

 

쉼표로 분리하여 여러 개의 그림자를 만들 수 있습니다.

 

html/css 작성 예입니다.

text-shadow.htm

 

 

html

 

 

css

p:nth-of-type(1){text-shadow: 40px 0px #BCE55C;}

 

 

:nth-of-type(n)은 같은 유형의 n번째 형제를 선택하는 선택자입니다.

 

:nth-of-type() 가상 클래스

 

여기서는 첫번째 p에 수평 그림자를 드리웠습니다

 

 

css

p:nth-of-type(2){text-shadow: 0px 10px#BCE55C;}

 

2번째 p에 수직 그림자를 드리웠습니다

 

 

 

css

p:nth-of-type(3){text-shadow: 5px 10px #BCE55C;}

 

 3번째 p에 수평5px 수직 10px 그림자

 

 

css

p:nth-of-type(4){text-shadow: 5px 10px 1px #BCE55C;} 

 

4번째 p에 수평 5px 수직 10px 흐림 정도 1px

 

 

css

p:nth-of-type(5){color:white; text-shadow: 0.1em 0.1em 0.2em black;}

 

 

css

p:nth-of-type(6){color:white;text-shadow:-1px 0 #4374D9, 0 1px #4374D9,1px 0 #4374D9, 0 -1px #4374D9;}

 

 

 

css

 

 h1은 아래 사이트를 참조했습니다

http://css-tricks.com/almanac/properties/t/text-shadow/

 

맨 위에 'text-shadow 그림자 효과'는 아래 소스 다운 받아 확인하세요~

 

text-shadow2.htm

 

 

참조 :

http://css3gen.com/text-shadow/
http://www.w3.org/Style/Examples/007/text-shadow

 

 

 

border-radius 속성(둥근 모서리)

 

rgba, opacity 차이

 

opacity 속성(투명도 지정)

 

색상값 단위 5가지(rgba 포함)