그라데이션 gradient

css3 의 멋진 기능중 하나는 바로 그라데이션입니다. 이미지가 없어도 코드 몇개로 그라데이션을 만들수가 있지요. 뿐만 아니라 이제는 포토샵이 아니더라도 멋진 버튼도 만들수 있습니다.

html5가 아니더라도 그리고 꼭 웹표준 브라우져가 아닌 IE 라도 자바스크립트를 이용한다거나 필터를 이용하면 만들수 있긴 합니다.
그러나 css3만큼 편하고 좋지는 않지요...

그중에서 css3를 이용해서 그라데이션을 만드는 방법을 알아보겠습니다.
사실 그라데이션에는 많은 글이 있습니다. 두개의 글을 쓰다가 너무 전문적이고 긴글이라 다시 씁니다.^^;

먼저 벤더 프리픽스에 대해서 안다고 가정하고 시작합니다. 만약 모르시면 이전글을 참고하세요.


웹킷 엔진을 사용하는 크롬, 사파리는 -webkit- 을 파이어폭스는 -moz- 또 오페라는 -o- 등을 사용합니다.
즉 현재는 -webkit, -moz, -o-, 그리고 w3c에서 권장하는 방법 이렇게 4개를 모두 넣어주기를 권장합니다.

웹킷 브라우져

이미지를 보시면 금방 이해가 가실겁니다.
참고로 웹킷 브라우져의 그라디언트에 대해서는 아래 링크를 참고하세요.

참고링크

-webkit-gradient


1. 유형.
선형(linear) 이나 원형(radial) 중에서 선택할 수 있습니다.

2. 3. 위치.
사용할수 있는것은 left bottom 같은 키워드, 10 20 과 같은 좌표값, 10% 20% 와 같은 백분율 모두 사용이 가능합니다.

4. 5. 색상 시작점
시작색과 끝색을 지정합니다.
color(위치, 색상) 이런형태로 지정합니다. 여기서 0은 시작을, 1은 끝을 나타냄니다.
마찬가지로 0%(처음 시작점), 50%(중간지점), 100%(끝지점) 형식으로도 가능하고, 키워드인 from과 to 도 사용가능합니다.
혼합해서 사용도 가능합니다.

하지만 최신버젼에서는 다른 브라우져와 비슷하고 간단하게 사용합니다.



이처럼 간단합니다.
즉 크로스 브라우징을 위해서라면 위코드와 아래코드 두개 모두 적어줘야 합니다.
/* Saf4+, Chrome */
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));

/* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -webkit-linear-gradient(#eee, #aaa);

파이어폭스

파이어폭스는 끝 좌표가 없습니다.


1. 유형.
위와 마찬가지로 선형과 원형을 사용할 수 있습니다.

2. 시작위치.
웹킷과는 다르게 끝점이 없고 시작점만 있습니다. 위의 경우 위에서부터 시작한다는 것을 의미합니다.

3. 4. 시작색, 끝색.
그라이언트니까 당연이 시작색과 끝색이 있어야겠지요.


3. 오페라 브라우져.
오페라 브라우져에 대한 그라데이션은 -o-linear-gradient , -o-radial-gradient 를 참고하세요. 여기서는 간단하게 사용하는 방법을 알아봅니다.
오페라 브라우져는 옵션값이 다양합니다.
아래 이미지 참고하세요.


오페라는 이렇게 복잡하게 사용하지 마시고 간단하게 아래처럼 사용하세요.


1. 유형.
마찬가지로 선형과 원형중 선택해서 사용합니다.
자세하게 하면 위치,크기, 모양까지 지정해서 사용할수도 있습니다. 자세한 것은 -o-linear-gradient -o-radial-dradient 를 참고하세요.

2. 시작색과 긑색.
모든 키워드,색상값 사용가능합니다.

4. 익스플로러 IE 10

IE가 10버젼부터는 CSS3를 본격 지원한다고 합니다. 코드또한 다른 브라우져와 비슷합니다.
이미지를 보시고 참고하세요.


IE 10 이전버젼은 다른 방법으로 해야 볼 수 있습니다. 즉 자바스크립트나 filter 등을 이용해야 합니다.

5. W3C.
아마도 나중에는 이 방법대로 모든 브라우져가 지원할겁니다. 그래서 이코드를 맨 나중에 꼭 적어주기를 권장합니다.
벤더 프리픽스가 제외된 값으로 사용하면 됩니다.
구지 설명은 없어도 되겠네요.



이래서 모든 사항을 고려할때 웹킷 브라우져, 파이어폭스,오페라, IE10, W3C 까지 모두 적어줘야 하고, 또 적용안되는 브라우져까지 적용해서 배경을 지정해주는것이 좋습니다.
아래는 예제코드 입니다. 참고로 필터는 사용하지 않았습니다.
background: #eee; /* Old browsers */
background: -moz-linear-gradient(top,  #eeeeee 0%, #aaa 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#aaa)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #eeeeee 0%,#aaa 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #eeeeee 0%,#aaa 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #eeeeee 0%,#aaa 100%); /* IE10+ */
background: linear-gradient(top,  #eeeeee 0%,#aaa 100%); /* W3C */
이런코드를 일일이 적어주기 힘드니 코드 생성기를 이용하면 좋습니다. 저도 이런걸로 사용하니 편하고 좋더군요.
참고로 필터까지 모두 나와있는것이 있으니 참고하시기 바랍니다.
Ultimate CSS Gradient Generator
개    개