Jam's story

[CSS] text-shadow, box-shadow 본문

WEB/CSS

[CSS] text-shadow, box-shadow

애플쩀 2022. 5. 26. 11:57
text-shadow:수평 그림자 , 수직 그림자  번짐효과 색상
예)      text-shadow: 5px 5px 10px red; 

box-shadow: 0 0 3px red;

 box-shadow: 0 0 10px blue, 3px 3px 20px red;
그림자 색상을 두개  줄 수 있다.
<!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>Document</title>
    <style>
        h1{
            color:yellow;
            /* 수평 그림자 , 수직 그림자  번짐효과 색상 */
            text-shadow: 5px 5px 10px red; 
            box-shadow: 0 0 10px blue, 3px 3px 20px red;

        }
    </style>
</head>
<body>
    <h1>그림자효과 (text-shadow)</h1>
    <p>박스 그림자 효과(box-shadow)</p>
</body>
</html>
Document

그림자효과 (text-shadow)

박스 그림자 효과(box-shadow)

 

 

 

    <style>
        h1{
            color:white;
            text-shadow: -1px 0 black,0 -1px black, 1px 0 black, 0 1px black;
        }
    </style>
Document

그림자효과 (text-shadow)

박스 그림자 효과(box-shadow)

h1{
            color:white;
            text-shadow: -3px 0 black, 0 3px blue, 3px 0 red, 0 -3px green;
        }

writing-mode: 가로로 쓰기, 세로로 쓰기 
 
horizontal-tb; 가로로 쓰기 
vertical-lr ,vertical-rl 세로로 쓰기 
 <style>
  p.test1{
      writing-mode: horizontal-tb;
  }
  p.test2{
      writing-mode: vertical-lr;
  }
  p.test3{
      writing-mode: vertical-rl;
  }
    </style>

'WEB > CSS' 카테고리의 다른 글

[CSS] 웹글꼴  (0) 2022.05.26
[CSS] 텍스트 속성  (0) 2022.05.26
[CSS] 그라디언트  (0) 2022.05.26
[CSS] 배경이미지사이즈 -contain, cover, origin, clip,parallex  (0) 2022.05.26
[CSS] 사원이미지 출력  (0) 2022.05.26
Comments