14-2

TO AC·2022년 3월 15일

CCS

목록 보기

14/20

텍스트 그림자

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>글자 그림자효과</title>
  <style>
    h1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 5rem;
      }

      h1.a {
        /* 가로 | 세로 | color */
        text-shadow: 10px 10px 5px coral;
      }

      h1.b {
        /* 가로 | 세로 | 번짐 */
        text-shadow: 0.4rem 0.3rem 0.7rem steelblue;
      }

      h1.c {
        /* 글자가 흰색일때 쉐도우로 나타냄 */
        color: #fff;
        text-shadow: 0.2rem 0.2rem 1rem steelblue;
      }

      h1.d {
        /* 음수일때 반대쪽 */
        text-shadow: -0.4rem -0.3rem 0.7rem steelblue;
      }
  </style>
</head>


<body>
  <h1 class="a">Welcome To My Course</h1>
    <h1 class="b">Welcome To My Course</h1>
    <h1 class="c">Welcome To My Course</h1>
    <h1 class="d">Welcome To My Course</h1>
</body>
</html>

TO AC

유망주

이전 포스트

14-1

다음 포스트

14-2

CCS

14-1

14-3

0개의 댓글