13. Gradient 그레이디언트

https://poiemaweb.com/css3-gradient

CSS3 Gradient | PoiemaWeb

 

그레이디언트(Gradient)는 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성하는 것이다. 

 

 

포토샵 등의 소프트웨어를 사용하여 그레이디언트 효과의 이미지를 제작 시 단점

• 이미지 다운로드에 시간이 소요되는 문제
• 이미지를 확대하였을 때 해상도가 나빠지는 문제 등

 

선형 그레이디언트 (Linear Gradient: goes down/up/left/right/diagonally)
방사형 그레이디언트 (Radial Gradient: defined by their center)

 

CSS3가 비교적 최근부터 제공하는 기술로서 대부분의 브라우저에 벤더프리픽스를 사용

브라우저에 따라 조금씩 문법이 상이하여 작성 툴을 이용하는 것이 보편적이다.

 

 

https://www.colorzilla.com/gradient-editor/

Ultimate CSS Gradient Generator from ColorZilla

 

 

 

css 부분을 카피하여 원하는 요소의 background 속성으로 넣게 되면 원하는 Gradient 배경을 적용 할 수있다.