CSS를 사용하여 웹 디자인에 깊이를 추가할 수 있는 다양한 그라데이션 기법에 대해 배워보겠습니다. 그라데이션은 색상이 점진적으로 변하는 시각적 효과로, 배경, 텍스트, 그리고 다양한 요소에 사용할 수 있습니다. 우리는 선형 그라데이션, 원형 그라데이션, 그리고 텍스트 그라데이션을 다룰 예정입니다. 그럼 하나씩 살펴보겠습니다.
선형 그라데이션은 색상이 한 방향으로 점진적으로 변하는 효과를 생성하는 CSS 속성입니다. 이 효과를 사용하면 배경이나 요소에 부드러운 색상 변화를 적용할 수 있습니다. linear-gradient 함수를 사용하여 CSS에서 선형 그라데이션을 설정합니다.
.CSS_네모박스1 {
width: 300px;
height: 300px;
background: linear-gradient(#e66465, #9198e5);
}
linear-gradient(#e66465, #9198e5): 이 속성은 두 가지 색상, #e66465와 #9198e5를 사용하여 선형 그라데이션을 만듭니다. 그라데이션은 기본적으로 상단에서 하단으로 진행되며, 첫 번째 색상에서 두 번째 색상으로 부드럽게 변합니다.
#e66465: 그라데이션의 시작 색상#9198e5: 그라데이션의 끝 색상
.CSS_네모박스2 {
width: 300px;
height: 300px;
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}
linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%):
217deg: 그라데이션이 217도 방향으로 진행됨을 의미합니다.rgba(255,0,0,.8): 시작 색상으로, 빨간색에 투명도를 0.8 적용합니다.rgba(255,0,0,0) 70.71%: 색상이 70.71% 위치에서 완전히 투명해집니다.