JunO3O
그림자 / 그레이디언트 속성
그림자 / 그레이디언트 속성
2023. 3. 21. 03:05ㆍCSS
그림자
ㅁ text-shadow 속성 / box-shadow 속성
: 그림자 속성에는 글자에 그림자를 부여하는 text-shadow 속성과 박스에 그림자를 부여하는 box-shadow 속성이 있습니다.
text-shadow : 오른쪽 아래 흐림도 색상;
/* text-shadow : 10px 10px 5px blue; */
box-shadow : 오른쪽 아래 흐림도 색상;
/* box-shadow : 10px 10px 5px red; */
ㅁ text-shadow 속성
<!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 {
text-shadow: 10px 10px 5px blue;
}
</style>
</head>
<body>
<h1>text-shadow 속성은 글자에 그림자를 주는 속성입니다.</h1>
</body>
</html>
ㅁ 박스에 그림자 만드는 방법
<!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>
div {
border: 3px solid blue;
box-shadow: 10px 10px 30px yellow;
text-shadow: 5px 5px 5px green;
}
</style>
</head>
<body>
<div class="box">
<h1>박스에 그림자를 만드는 방법입니다.</h1>
</div>
</body>
</html>
ㅁ 그림자를 중첩하는 방법
<!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>
.box {
border: 5px solid blue;
box-shadow: 10px 10px 10px green, 10px 10px 30px orange,
10px 10px 50px yellow;
text-shadow: 10px 10px 10px purple, 10px 10px 30px pink,
10px 10px 50px yellowgreen;
}
</style>
</head>
<body>
<div class="box">
<h1>그림자를 중첩하는 방법입니다.</h1>
</div>
</body>
</html>
ㅁ CSS3 Generator 를 사용하여 그림자 생성하기
: https://CSS3gen.com 에 접속하여 원하는 형태의 스타일을 지정한 후 생성된 코드를 복사하여 스타일시트에 붙여넣으면 box-shadow 속성과 text-shadow 속성을 쉽게 생성할 수 있습니다.
ㅁ Ultimate CSS Gradient 그레이디언트 생성기 사용하기
: http://www.colorzilla.com/gradient-editor/ 에 접속하여 원하는 형태의 그레이디언트를 생성한 후 코드를 복사하여 스타일시트에 붙여넣어 사용이 가능합니다.
ㅁ linear-gradient() 함수 사용
: 색상 블록의 왼쪽에는 색상 단위를 지정하고, 오른쪽에는 퍼센트 단위를 입력하여 그레이디언트 색상과 위치를 지정할 수 있습니다.
linear-gradient(각도, 색상 블록, 색상 블록)
/* linear-gradient(45deg, red 10%, blue 50%) */