기초) text-shadow 정리

 

 

 

{text-shadow: 1px 2px 3px red;}

 

 

텍스트 그림자 효과

 

 

값은

 

: X축(좌->우) / Y 축 (상->하) / 번짐 정도 / 색깔;

 

순으로 적용되며 x, y 축의 경우에

값을 양수가 아닌 마이너스 (-)로

입력하면 방향이 반대로 적용됨

 

 

<style>
    div { 
      width:500px; height:200px; border: 1px solid red;
      text-align: center; line-height: 200px;
      font-size: 50px; font-weight: bold;
      text-shadow: 3px -2px 7px red;
     }
</style>

<div>Takudaddy</div>

 

 

---

 

활용 팁

 

무지개+애니메이션 효과 콜라보

 

 

드롭 섀도의 경우 콤마(,)를 찍으면

복수로 사용이 가능하다.

 

무지개색 값을 추가로 준 뒤

 

transition+ hover를 활용해

animation 효과를 주면,

 

 

  div { font-size: 100px; fort-weight: bold;
                  letter-spacing: -5px;
                  transition : all 0.5s;
                  text-shadow: 0 0 0 black;
                  }
 div:hover {
            text-shadow: 2px 2px 0 red,
                         4px 4px 0 orange,
                         6px 6px 0 yellow,
                         8px 8px 0 green,
                         10px 10px 0 skyblue,
                         12px 12px 0 blue,
                         14px 14px 0 purple;
                 }
</style>


<div>Takudaddy</div>

 

 

 

촌스러운 무지개색

 

 

마우스를 올려놓으면

효과가 나타나는 장난을 칠 수 있다.

 

 

---

 

 

 

기타

 

 

* 포토샵의 드롭 섀도와 같은데

나중에 디자이너에게 시안을 받았을 때

어떤 수치를 보고 어떻게 코딩에 반영할지

알아보자.

 

 

1. 드롭 섀도를 레이어 스타일로 가지고 온다.

 

 

2.layer style들어가서drop shadow클릭

 

 

3. 들어가서 확인할 수치들

 

 

ⓐ 그림자 angle 확인

 

ⓑ distance 값(그림자 위치 / x축 y 축)

: 주어진 값대로 넣으면 다를 수 있다.

글자 크기를 키워 글자와 그림자와의 간격이

몇 px 인지 확인하고 넣어주면 된다

 

ⓒ size (번짐 정도)

 

ⓓ opacity (투명도) 값

: 값이 100%인 경우 색 코드만 넣어주면 된다