728x90
반응형
text-shadow
- 첫 번째 값: 그림자의 수평 위치(x)
- 두 번째 값: 그림자의 수평 위치(y)
- 세 번째 값: 그림자의 번짐 정도
- 네 번째 값: 그림자의 색상
- ,로 여러 옵션을 겹쳐서 적용하는 것이 가능하다.
text-shadow: 5px -5px 3px 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>09_그림자.html</title>
<link rel="stylesheet" href="./assets/css09.css">
</head>
<body>
<h3># text-shadow</h3>
<ul>
<li>첫 번째 값: 그림자의 수평 위치(x)</li>
<li>두 번째 값: 그림자의 수평 위치(y)</li>
<li>세 번째 값: 그림자의 번짐 정도</li>
<li>네 번째 값: 그림자의 색상</li>
<li>,로 여러 옵션을 겹쳐서 적용하는 것이 가능하다.</li>
</ul>
<div id = "shadow1">TEXT SHADOW EFFECT</div>
<div id = "shadow2">TEXT SHADOW EFFECT</div>
<div id = "shadow3">TEXT SHADOW EFFECT</div>
<h3># box-shadow</h3>
<div id="box-shadow1">BOX SHADOW EFFECT</div>
<div id="box-shadow2">BOX SHADOW EFFECT</div>
<div id="box-shadow3">BOX SHADOW EFFECT</div>
</body>
</html>#shadow1 {
font-size: 25px;
text-shadow: 5px -5px 3px red;
}
#shadow2 {
color: white;
font-size: 35px;
text-shadow: 0 0 15px black,
0 0 13px red,
0 0 8px red,
0 0 3px red;
}
#shadow3 {
color: #90d0ee;
background: #FFFFFF;
text-shadow: 2px 2px 0px #FFFFFF, 5px 4px 0px rgba(0, 0, 0, 0.15);
font-size: 60px;
font-weight: 700;
}
#box-shadow1 {
width: 200px;
height: 200px;
font-size: 30px;
padding: 10px;
box-shadow: 1px 1px 3px, 2px 2px 3px, 3px 3px 3px;
}
#box-shadow2 {
width: 200px;
height: 200px;
padding : 30px 50px 30px 30px;
margin: 100px;
font-size: 50px;
box-shadow: blue 0px 0px 0px 2px inset, rgb(255, 255, 255) 10px -10px 0px -3px, rgb(31, 193, 27) 10px -10px, rgb(255, 255, 255) 20px -20px 0px -3px, rgb(255, 217, 19) 20px -20px, rgb(255, 255, 255) 30px -30px 0px -3px, rgb(255, 156, 85) 30px -30px, rgb(255, 255, 255) 40px -40px 0px -3px, rgb(255, 85, 85) 40px -40px;
}
#box-shadow3 {
box-sizing: border-box;
width: 200px;
height: 200px;
border-radius: 40px;
font-size: 30px;
padding : 40px 40px 40px 40px;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS] 아이콘(Icon) (0) | 2023.06.07 |
|---|---|
| [CSS] 글꼴 (0) | 2023.06.07 |
| [CSS] 텍스트(text) (0) | 2023.06.04 |
| [CSS] 단위(px, mm, cm, in) (0) | 2023.06.04 |
| [CSS] 여백(margin, padding) (0) | 2023.06.04 |
