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 |
결과
box01
box02
box03
box04
box05
box06
box07
box08
box09
box10
box11
box12
box13
box14
box15
box16