그라데이션 란?

그레이디언트 란 2가지 색상을 혼합한 색을 만들어 채색하는 기능입니다. 예를들어 밑에 있는 그림처럼보면은

전체적으로 분홍빛이 나지민 밑으로 내려갈수록 분홍빛에서 약간 어둡게 보여 상하색상이 구분이되는것 이를

~~※모니터 해상도에 따라 그라데이션이 달라 보일수 있다.~~

포토샵으로는 쉽게 만드는데...

CSS3 이전의 웹에서는 그라데이션을 지원하지 도 않아 포토샵으로 만든 이미지를 배경으로 넣곤 했습니다.

하지만 CSS3는 그라데이션 기능을 지원합니다

코드를 분석해보면은 약간(?) 어려운 내용이 맞나 싶네요^^;; 제가 보기에는 뭔가 되게 많습니다.

색이 다른 배경하나 만드는데 뭐 이렇게 많이 들어가는가 싶나 생각도 해봅니다^^;;

그러나 이 복잡시러운 코드를 쉽게 만들 수 있는 툴을 사용해 그레이디언트를 만들어 보겠습니다!!

참조 URL : http://www.colorzilla.com/gradient-editor/

참조 URL를 접속해 보면은 그림과 같은 그라데이션 코드를 생성 시킬수 있는 사이트가 나옵니다

그러하면은 예제는 상단에 있던 분홍빛 그라데이션 배경을 만들볼려합니다.

지금의 색상은 파랑색임으로 저희 예제의색상으로 변경을 하겠습니다.

예제 상단 색상 : ed008c

예제 하단 색상 : da0081

왼쪽에 있는 화살표를 더블 클릭하면은 색상표가 나옵니다. 상단이기 때문에 위에 적어놓은 상단 색상코드를 넣어줍니다.

오른쪽 과 가운데에 있는 화살표도 더블클리가여 하단 색상으로 변경을합니다

색상을 다 넣어 놓고 왼쪽에 있는 화살표를 가운데쪽으로 천천히 움직이면은 Preview의 미리보기에 예제이미지와

유사하게 점점 만들어 지는것을 보게될겁니다. 완료되면은 미리보기 밑에있는 CSS코더에 마우스를 갔다대면은

출력이 잘되면은 성공적으로 마무리 되겠습니다^^

그라데이션 튤은 상하(↓) 관계 말고 ↘ , ↖ , O 관계로도 만들수 있습니다!!

CSS3 그라데이션 만들기