[css] css 그라디언트를 UI로 손쉽게 만들자!!

css 그라디언트를 UI로 손쉽게 만들자!!

웹 외주작업을 하면서 간혹 사용하던 사이트 입니다.

어떻게?! 그라디언트(gradient)를 쉽게 만드는지 일단 이 사이트를 보시면 알 수 있습니다.

http://www.colorzilla.com/  라는 사이트입니다.

접속하시면 처음화면입니다.

굉장히 심플하지만 굉장히 영어입니다, 원하는것 이외에는 건들지 않기로 하겠습니다ㅋㅋㅋㅋㅋ 건강에 해로우니까요...

빨간 표시부분을 클릭해주시면 됩니다.

앞에서 말씀드렸지만 다른 메뉴를 클릭하시는건 개인의 영어실력에 맡기도록 하겠습니다.

클릭하시면 아래의 페이지가 나오는데

모양만봐도 아시겠지만 간단합니다.

포토샵을 사용해 보신 분이라면 설명 따위 필요없습니다.

1 - 위쪽에는 미리설정된 샘플들이 있습니다. 아래쪽의 save 버튼은 개인적으로 생성한 (현재 설정중인)데이터를 위쪽의 프리셋에 추가 시킬 수 있습니다.

2 - 색상 조정 부분입니다. [아래 추가설명]

3 - 프리뷰 입니다. 설정된 색상의 그라디언트를 가지고 사이즈와 방향설정 후 최종결과물을 만들어냅니다.

초록박스에 생성된 결과물을 복사하시면 끗

2번박스

위/아래로 포인트들이 있는걸 보실 수 있습니다.

위쪽은 투명도

아래쪽은 색상을 조절합니다.

아래쪽의 색상포인트를 클릭하시면 Stops박스 안의 Color를 조절할 수 있으며

Color 옆의 색상을 누르면 팝업으로 색상팔레트가 띄워집니다.

추가로

색상설정 하단부에 adjustments를 이용하시면

hue/saturation - 색조/채도/밝기

reverse - 좌우 색상 반전

등의 기능을 사용하실 수 있습니다.