Design

CSS Gradient Generator를 사용하여 그라디언트 css코드를 쉽게 만들자

디자인에서 그라디언트가 들어가면 이미지로 만들어서 넣기도 하지만, css로 그라디언트를 표현할 수 있습니다.
그라디언트 css는 코드가 많기때문에 삽입하거나 수정하기가 대단히 힘들죠. 그래서 그라디언트 만들어주는 사이트를 알게되어서 편하게 그라디언트 css를 만들게 되었습니다.

그 사이트는 Ultimate CSS Gradient Generator 입니다.

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

 

사이트의 회면은 아래와 같습니다.

 

포토샵 작업을 해봤으면 익숙한 화면이 보입니다.
프리셋에서 완성된 형태로 선택할 수 있거나 직접 색상을 수정할 수 있습니다.
프리셋 아래쪽에 직접 수정할 수 있는 컨트롤러가 있는데 포토샵과 똑같습니다.

위의 그림과 같이 작은 부분을 더블클릭하면 색상을 선택하는 인터페이스가 나옵니다. 여기서 입맛대로 색을 선택합니다. 색을 찍으면 오른쪽 위 프리뷰에서 바뀐 색을 확인할 수 있어서 좀더 정확하게 색을 선택할 수 있도록 도와줍니다.
 

아래 그림과 같이 슬라이드 바 아래쪽에 클릭하면 포인터가 하나 더 추가됩니다. 드래그하여 위치를 이동하고, 색을 변경할 수 있습니다.

포토샵에서 그라디언트를 만들어봤으면 쉽게 색을 바꿀 수 있습니다.

 

다음은 그라디언트 타입을 바꿔봅니다.
프리뷰 섹션에서 아래 그림에 표시된 셀렉트박스에서 타입을 바꿀 수 있습니다.

바뀐 그라디언트 타입을 프리뷰로 확인해볼 수 있습니다.

모든걸 정했으면 프리뷰 아래쪽에 CSS 섹션에서 css코드를 복사하니다. 코드쪽을 마우스로 갖다대면 오른쪽 아래에 "copy"라는 작은 버튼이 나오는데 그것을 누르면 코드가 전부 복사됩니다.
마지막으로 복사된걸로 적용하려는 곳에다 붙여넣으면 끝납니다.

 

- 그라디언트를 적용한 데모
http://codepen.io/anon/pen/zGADI

 

게시글 공유 URL복사
댓글작성

열기 닫기

댓글작성

top