점진적으로 색을 낼 수 있게 하는 그라데이션은 linear-gradient, radial-gradient, conic-gradient의 3가지 방법이 있다. 이 중에서 linear과 radial gradient에 대해 알아볼 예정이다.
- background: linear-gradient (방향, 시작색, ... ,끝색);
색상이 수직이나 수평 또는 대각선 방향으로 색이 변하는 형태로 방향의 경우에는 각도를 사용해도되며 (0deg, 45deg, 90deg 등...) 방향을 나타내는 to down, to up, to left, to right를 사용해도 된다. - background: repeating-linear-gradient(방향, 시작색 너비정도, ... , 끝색 너비정도);
repeating을 사용하면 그라데이션을 통해서 패턴처럼 만들 수 있다. - background: radial-gradient(circle|ellipse at 위치, 시작색, ... ,끝색);
원형(circle) 혹은 타원형(ellipse)의 그라데이션을 만들 수 있다. 그라데이션이 퍼져나가는 중심 부분의 위치를 설정하면 된다. 향에는 left, right, center, top, bottom과 같은 방향지시어가 들어가도 되고 %로도 지정이 가능하다. - background: radial-gradient(circle|ellipse closest-side|closest-corner|farthest-side|farthest-corner at 위치, 시작색, 끝색);
radial gradient의 경우 가까운 면까지 그라데이션을 확장하던가, 가까운 코너, 제일 먼 면, 제일 먼 코너로 확장하는 것을 설정할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 400px;
height: 200px;
border: 1px solid black;
margin: 10px;
}
div:nth-of-type(1){
background: linear-gradient(to bottom, black, rgb(0, 0, 76), rgb(36, 6, 78), rgb(195, 24, 24), rgb(181, 0, 0), rgb(255, 166, 0), yellow);
}
div:nth-of-type(2){
background: radial-gradient(circle at left top, white, rgb(253, 255, 133), rgb(255, 232, 57), rgb(255, 208, 0), orange);
}
div:nth-of-type(3){
background: radial-gradient(circle closest-side at 60% 40%, white, rgb(255, 255, 18), rgb(255, 217, 90), rgb(143, 221, 255));
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
'Frontend > CSS' 카테고리의 다른 글
| CSS에서 display를 사용해서 테이블을 만들어보자 (0) | 2024.07.07 |
|---|---|
| CSS에서의 배치 방법 (0) | 2024.07.07 |
| CSS3의 박스모델 (0) | 2024.07.07 |
| CSS에서 배경에 이미지를 넣어보자 (0) | 2024.07.04 |
| CSS로 list-style을 변경해보자 (0) | 2024.07.03 |
| CSS의 overflow 기능에 대해 알아보자 (0) | 2024.07.02 |
| CSS3에서 텍스트를 정렬하는 방법 (0) | 2024.07.02 |
| CSS에서 텍스트에 색과 그림자를 입혀보자 (0) | 2024.07.02 |