본문 바로가기
프로그래밍/HTML, CSS, JavaScript

[HTML/CSS] 텍스트 그림자 효과 꾸미기

by Joy [바가지] 2018. 6. 19.

텍스트 그림자효과

 

텍스트에 그림자 효과를 주는 기능에 대하여 알아 보도록 하겠습니다. 그림자 효과 CSS를 사용하여 밋밋한 텍스트를 더욱 풍성하고 멋지게 꾸며 볼 수 있습니다.

 

  HTML/CSS 소스

<!DOCTYPE html>
<html>
  <head>
    <title>텍스트 그림자 효과</title>
  </head> 
 

  <style type="text/css">
    body {
      background: #fff;
      font-size: 40px;
      font-weight: bold;
    }
    txt {

    }
    txt1 {
      text-shadow: 0px 5px 0px #FFB2F5;
    }
    txt2 {
      text-shadow: 0px 1px #ffffff, 4px 4px 0px #EAEAEA;
    }
    txt3 {
      color: #FFFFB4;
      text-shadow: -1px -1px 0px #FFBB00, 3px 3px 0px #FFBB00, 6px 6px 0px #B77300;
    }
    txt4 {
      color: #00D8FF;
      text-shadow: -1px -1px 0px #0090B7, 2px 2px 0px #0090B7, 4px 4px 4px #005A81;
    }
  </style>

  <body>
    <txt>ERun-Joy</txt>
    <br>
    <txt1>ERun-Joy</txt1>
    <br>
    <txt2>ERun-Joy</txt2>
    <br>
    <txt3>ERun-Joy</txt3>
    <br>
    <txt4>ERun-Joy</txt4>

  </body>
</html>

 

  브라우저 실행 결과

 

 

  소스설명

- font-weight: bold;

 → font-weight(글자굵기) : bold(진하게)

 → font-weight 의 속성으로는 bold 이외에 100~900까지 100단위로 설정 할 수 있습니다.

 → 400은 normal과 같으며, 700은 bold와 동일합니다. 즉 숫자가 높을 수록 진하게 표시 됩니다.

 

- text-shadow: 0px 5px 0px #FFB2F5;

 → text-shadow(그림자효과) : 0px(수평그림자) 5px(수직 그림자) 0px(흐림정도) #FFBB00(색상지정)

 → 속성(0px 5px 0px #FFB2F5) 부분은 콤마(,) 구분자를 이용하여 여러번 지정 할 수 있습니다.

     ex)text-shadow: -1px -1px 0px #0090B7, 2px 2px 0px #0090B7, 4px 4px 4px #005A81;

 

  마무리

그림자 효과 스타일을 잘 이용하면 더욱 멋진 텍스트를 만들 수 있을 것 입니다.

 

반응형

댓글4