그럼에도 불구하고

👨‍💻

[Visual Studio Code] 여러가지 shadow 이용해보기 본문

HTML, CSS/Function implementation

[Visual Studio Code] 여러가지 shadow 이용해보기

zenghyun 2022. 11. 13. 19:53

여러 가지 shadow를 이용해보자

 

 

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="ko">
<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>
        .mybox {float:left; margin: 50px; 
            width: 200px; height: 200px; 
             background-color: darkcyan;
            border: 1px solid black;
        }
        .box01 { box-shadow: 0px 0  20px blue;}
        .box02 { box-shadow: 10px 0  20px blue;}
        .box03 { box-shadow: 0px 10px  20px blue;}
        .box04 { box-shadow: 0px -10px  20px blue;}
        .box05 { box-shadow: 10px 10px  20px blue;}
        .box06 { box-shadow: 0px 10px  0px blue;} 
        .box07 { box-shadow: 0px 0px  0px 10px blue;}
        /*  x / y / 흩뿌리는 정도 / 선명도  */
        .box08 { box-shadow: 0px 0px  0px 10px blueviolet, 
                            0 0 0 20px yellow,
                            0 0 0 30px tomato;}
            .box09 { box-shadow: inset 0 0 20px crimson;}
            .box10 { box-shadow: inset 0 0 0 10px red;}
            .box11 { box-shadow: inset 0 0 0 10px red,
                                 inset 0 0 0 20px blue;}
            .box11 ~ div {font-size: 50px;
                font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
                text-transform: uppercase;
            }
            .box12 { text-shadow: 0 0 5px red;
                background-color: transparent;
            }
            /* text-shadow는 inset, spread 모드 없음 */
            .box13 { text-shadow: 0 0 1px red,
                0 0 1px red,
                0 0 1px red,
                0 0 1px red,
                0 0 1px red,
                0 0 1px red,
                0 0 1px red;
                background-color: transparent;
            }
            .box14 { text-shadow: 
                1px 1px 1px red,
                2px 2px  1px red,
                3px 3px  1px red,
                4px 4px  1px red,
                5px 5px  1px red;
                background-color: transparent;
                
            }
            .box15 { text-shadow: 
                1px 1px 1px red,
                2px 2px  1px red,
                3px 3px  1px rgb(35, 155, 202),
                4px 4px  1px red,
                5px 5px  1px red;
            }
            .box16 {
                background-color: rgb(29, 14, 14);
                text-align: center;
                line-height: 200px;
                color: white;
                text-shadow: 0 0 20px tomato,
                0 0 30px tomato,
                10px 5px 40px rgb(196, 147, 138),
                10px 0 50px tomato,
                0 10px 20px tomato;
            }
    </style>
</head>
<body>
    <div class="mybox box01"><span>box01</span></div>
    <div class="mybox box02"><span>box02</span></div>
    <div class="mybox box03"><span>box03</span></div>
    <div class="mybox box04"><span>box04</span></div>
    <div class="mybox box05"><span>box05</span></div>
    <div class="mybox box06"><span>box06</span></div>
    <div class="mybox box07"><span>box07</span></div>
    <div class="mybox box08"><span>box08</span></div>
    <div class="mybox box09"><span>box09</span></div>
    <div class="mybox box10"><span>box10</span></div>
    <div class="mybox box11"><span>box11</span></div>
    <div class="mybox box12"><span>box12</span></div>
    <div class="mybox box13"><span>box13</span></div>
    <div class="mybox box14"><span>box14</span></div>
    <div class="mybox box15"><span>box15</span></div>
    <div class="mybox box16"><span>box16</span></div>
</body>
</html>
cs

 

 

 

 

 

결과

Document
box01
box02
box03
box04
box05
box06
box07
box08
box09
box10
box11
box12
box13
box14
box15
box16

 

 

'HTML, CSS > Function implementation' 카테고리의 다른 글

[Visual Studio Code] input type="file"  (0) 2023.01.05
[Visual Studio Code] table 만들기  (0) 2022.12.10
[Visual Studio Code] 가로 / 세로 메뉴바 만들기  (0) 2022.11.13
[Visual Studio Code] mask 이용한 로고 만들기  (0) 2022.11.07
[Visual Studio Code] 애니메이션 반복하기  (0) 2022.11.07
'HTML, CSS/Function implementation' Related Articles more
Comments