그라데이션 란?

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

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

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

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

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

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

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

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

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

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

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

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

예제 상단 색상 : ed008c

예제 하단 색상 : da0081

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

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

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

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

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

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

CSS3 그라데이션 만들기