그라디언트 쉽게 사용하기 / webgradients / 그라디언트 CSS 코드 생성기 / 그라데이션

 

오늘은 포토샵으로 그라디언트를 배웠다

쉬운 부분이긴 하지만, 보통 직접 만들어 쓰지는 않는다

 

직접 컬러 찍는거 보다 훨씬 예쁜 그라디언트가 이미 만들어져 있는 곳을

소개하려고 한다.

 

 

1. webgradients.com

 

웹그라디언트 닷컴

 

 

 

보다시피 접속하면 아주 예쁜 그라디언트들이 보인다

두 가지 색을 사용한거 뿐인데

진짜 예쁜게 많다

 

 

이 그라디언트를 사용해 보기로 했다.

첫 색인 앞의 코드를 더블 클릭해서 복사했다

 

 

포토샵 그라디언트 컬러 코드에 넣어주고 OK를 눌러

그어준다.

 

 

예뿌당...

 

 

사이트의 화살표를 클릭하면 PNG파일을 받을 수 있고

 

 

아래의 Copy CSS 버튼을 누르면

CSS 코드를 자동으로 복사해 준다

 

 

 

 

두 번째 소개할 곳은

 

uigradients.com

 

 

 

 

접속하면 이런 식으로 바로 그라디언트가 보인다

summer라는 이름의 이 그라디언트도

상큼하고 예쁘다

 

 

왼쪽 상단의 버튼을 누르면

모든 그라디언트 목록을 볼 수 있다.

 

 

세 번째 소개할 곳은

 

css3generator

 

 

 

접속하면 이거 밖에 안나오는데,

메뉴를 클릭하면

 

 

그라디언트가 보인다.

클릭해 주면 새로운 주소를 가르쳐 주는데

이동하면 된다.

 

 

그렇게 도착한 곳이 이곳!

포토샵의 그라디언트와 동일하게 편집이 가능하다.

게다가 그라디언트 방향도 설정할 수 있어서

 

CSS 코드에 관한 부분이라면 이 사이트가 가장 적합하다

 

 

 

아래로 스크롤 하면

브라우저 적합성도 확인할 수 있다

 

 

역시 익스는...(절레절레)