[스크렙] css3으로 그라데이션 효과주기

CSS Gradient은 webkit에 의해 도입되었으나 많은 브라우져에서 호환이 되지 않는 문제로 인해 사용되어지지 않았습니다.
하지만 지금은 많은 브라우져에서 그라데이션을 지원하여 CSS 만으로도 배경에 그라데이션 효과를 줄수 있습니다. 
그러나 모든 브라우져에서 CSS Gradient를 사용할 수 있는 것은 아니니 유의하시기 바랍니다. 

지원 브라우져 현황 

 Firefox >= 3.6
MSIE > 5.5(!)
Safari >= 4
Chrome 

Webkit Browsers
사파리와 크롬과 같은 웹킷 브라우져는 아래와 같은 규칙을 따릅니다. 

Firefox 3.6+

Internet Explorer

Cross Browser CSS Gradient를 위해서는 위 세가지 코드를 모두 사용하여 CSS를 정의합니다. 만약 그라데이션을 지원하지 않는 브라우져가 있을 경우를 대비하여 상단에 배경에 대한 규칙도 추가 되었습니다. 

background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */

background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */ 

서두에도 알려드린 것과 같이 모든 브라우져에서 지원은 하지 않습니다.

이 글은 웹디자이너 및 일러스트레이터 Nick La의 블로그를 참고하여 작성되었습니다.(원문보기)

추가적으로 CSS3 Gradient Generator 사이트도 있네요.. 꼭 2가지 색상이 아니라도 여러가지 색상을 활용할 수도 있고 색상마다의 간격도 조절할 수 있는 기능이 있네요. 참고하시기 바랍니다. 

CSS3 Gradient Generator 바로가기

출처 : http://kang2oon.com/73