todo list를 만들면서 버튼과 배경에 그라데이션을 넣고싶어 찾아보았다!
linear-gradient()를 활용해 생각보다 간단하게 적용할 수 있었다.
linear-gradient()
CSS에서 두개 이상의 색상이 점진적으로 변화하는 이미지를 만드는 함수다.
image 의 한 종류인 gradient 타입의 객체를 반환한다. 따라서 image를 사용하는 background-image 등에 사용할 수 있다.
처음엔 별생각없이 background-color에 사용했다가 적용이 안됐는데 이 이유때문이었다!
사용법
linear-gradient(각도 || 방향, 색상1, 색상2, ...);
1) 각도 || 방향 (기본값: to bottom)
첫 색상에서 마지막 색상까지 변화하며 이어질 방향을 지정한다. 지정하지 않을 경우 위에서 아래 방향이다.
키워드를 사용하거나 deg 값으로 설정할 수 있다.
- to top (0 deg)
- to right (90 deg)
- to bottom (180 deg)
- to left (270 deg)
각도가 커질수록 시계방향으로 회전한다!
- to top left
- to right bottom
이렇게 키워드를 조합하는 것도 가능하고, 이 때 순서는 상관이없다.
2) color-stop
색상과 함께 색상의 위치를 % 혹은 길이로 지정할 수 있다. 첫번째 색상은 어디까지 위치할지, 첫번째 이후 나머지 색상은 어디부터 위치할지 설정할 수 있다.
background-image: linear-gradient(to right, blue 30%, lightgreen 70%);
blue가 시작부터 30% 위치까지, lightgreen이 70%부터 끝까지를 차지하고 그 사이 공간에 그라데이션이 생긴다.
참고자료
linear-gradient() - CSS: Cascading Style Sheets | MDN
The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.
developer.mozilla.org
탐구소년, [CSS] linear-gradient 사용법 그리고 예제
[CSS] linear-gradient 사용법 그리고 예제
소개 CSS 의 linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다(출처 MDN). 함수의 결과 생성되는 이미지는 이미지 요소의 한 종류이므로 이미지가 적
penguingoon.tistory.com
'HTML + CSS' 카테고리의 다른 글
| [CSS] position (static, relative, absolute, fixed, sticky) (0) | 2024.07.13 |
|---|---|
| [CSS] 선택자(Selector) 문법 (0) | 2024.07.11 |
| [CSS] 가상요소로 체크박스 커스텀하기 (::after, ::before) (0) | 2024.07.05 |
| [css] 자식 요소들이 일정 비율을 유지하도록 하기 (flex, flex-grow, flex-shrink) (0) | 2024.07.03 |
| [CSS] 카드 Flip 효과 만들기 (transition, transform, grid) (0) | 2024.06.21 |