![[2021/12/27]국비지원 CSS3 8-(5) shadow](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FqV37E%2Fbtrr4wTovoK%2FvSfvkjoDZAZacZGRJpNWq0%2Fimg.png)
shadow : 그림자
- text-shadow
- text-shadow1
- text-shadow2
- text-shadow3
- text-shadow4
- box-shadow
- box-shadow1
- box-shadow2
- box-shadow3
- box-shadow4
1. text-shadow
- text-shadow : 텍스트에 그림자를 설정하는 property
- setting 순서 : x축offset y축offset blursize colorcode
text-shadow1
<!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>text-shadow1</title>
<style type="text/css">
body{font-family:"맑은 고딕",sans-serif;font-size: 100px;font-weight:bold;}
.text1{color: #f00;text-shadow:5px 5px 5px #000;}
/* text-shadow:가로오프셋,세로오프셋,블러,색상 */
.text2{color:#00f;text-shadow: -5px -5px 5px #000;}
</style>
</head>
<body>
<p class="text1">HTML5</p>
<p class="text2">CSS3</p>
</body>
</html>
결과물
text-shadow2
<!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>text-shadow2</title>
<style type="text/css">
body{font-family:"맑은 고딕",sans-serif;font-size: 100px;font-weight:bold;background-color: #666;}
.text1{color: #000;text-shadow: 0px 2px 2px #fff;}
.text2{color: #000;text-shadow: 0px -2px 2px #fff;}
</style>
</head>
<body>
<p class="text1">HTML5</p>
<p class="text2">CSS3</p>
</body>
</html>
결과물
text-shadow3
<!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>text-shadow3</title>
<style type="text/css">
body{font-family:"맑은 고딕",sans-serif;font-size: 50px;font-weight:bold;background-color: #005151;}
.text1{color: #fff;text-shadow: 0px -3px 8px #0f0;}
.text2{color: #000;text-shadow: 1px 1px 10px #fff;}
.text3{color:#fff;text-shadow: 0px 1px 8px #fff;;}
</style>
</head>
<body>
<p class="text1">HTML5</p>
<p class="text2">CSS3</p>
<p class="text3">JavaScript</p>
</body>
</html>
결과물
text-shadow4
<!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>text-shadow4</title>
<style type="text/css">
body{font-family:"맑은 고딕",sans-serif;font-size: 150px;font-weight:bold;background-color: #000;}
.text1{color: #000;text-shadow: 0px 0px 4px #ccc, 0px -5px 4px #ff3,2px -10px 6px #fd3,2px -20px 11px #f80,2px -30px 18px #f20;}
.text2{color: #000;text-shadow: 0px 0px 5px #f00,
0px -5px 10px orange,0px -10px 14px yellow,
0px -15px 21px green,0px -20px 28px blue,
0px -25px 35px darkblue,0px -30px 42px purple;}
</style>
</head>
<body>
<p class="text1">HTML5</p>
<p class="text2">HTML5</p>
</body>
</html>
결과물
2. box-shadow
- box-shadow : 블록, 박스에 그림자를 설정하는 property
text-shadow와 달리 블록, 박스 내부의 그림자 설정 또한 가능하다.
- setting 순서 : x축offset y축offset blursize colorcode
box-shadow1
<!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>box_shadow</title>
<style type="text/css">
figure{width: 200px; box-shadow: 5px 5px 10px #000;}
/* box-shadow:가로,세로, 블러, 그림자 */
figcaption{text-align: center;}
</style>
</head>
<body>
<figure>
<img src="images/cross.JPG" alt="건널목">
<figcaption>크로스</figcaption>
</figure>
</body>
</html>
결과물
box-shadow2
<!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>box-shadow2</title>
<style type="text/css">
body{font-size: 12px;font-family:Arial;}
button{background: #91ee91;padding:5px 30px;border-radius: 5px;border:none;
box-shadow: 0px 1px 1px #158a15,inset 0 5px 10px #ffc;
color:#006400;text-shadow: 0px 1px 1px #d7f9c3;}
</style>
</head>
<body>
<button>text</button>
</body>
</html>
결과물
box-shadow3
<!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>box-shadow3</title>
<style type="text/css">
button{background: #6fb2e5;width:100px;height:100px;margin:10px;padding:0;
border:none;box-shadow: 0px 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;}
</style>
</head>
<body>
<button></button>
</body>
</html>
결과물
box-shadow4
<!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>box-shadow4</title>
<style type="text/css">
button{background: #06c;padding:10px 40px;border-radius: 5px;border:1px solid blue;
box-shadow: 0px 2px 1px #000,inset 0px -5px 15px blue, inset 0 1px 3px #0ff;
color:#fff;text-shadow: 1 1px 1px #000;}
</style>
</head>
<body>
<button>text</button>
</body>
</html>
결과물
