-webkit-gradient
- 퍼블리셔/css
- 2011. 12. 16. 19:02
현재 그라데이션은 내용이 상당이 많습니다. 각 브라우져마다 지원하는 현황이 다르기 때문입니다.
또한 정보공유가 쉽지 않아 현재 딱 뭐라 말하기는 어렵지만 현재 지원하는 현황을 위주로 써 나가겠습니다.
수정 사항이 있으면 알려주시면 수정하겠습니다.
그라데이션을 얘기하려면 벤더를 먼저 이야기 해야 합니다.
CSS 3가 공식으로 표준안이 발표되기전부터 각 브라우져들은 브라우져에 맞게 CSS 3를 지원 했습니다.
벤더 프리픽스(vendor prefix)라고 해서 각 브라우져에서 새로운 기능을 추가하고 시범적으로 운영하기 위함입니다. 이 벤더 프리픽스는 핵이 아닙니다.
이는 나중에 공식속성이 나오면 지원하지 않을 가능성이 많기 때문에 벤더 프리픽스를 먼저 선언하고 뒤에 공식(?) 속성을 선언하는것이 좋습니다.
각 브라우져가 지원하는 벤더를 알아보겠습니다.
여기서는 우선 사파리와 크롬이 지원하는 webkit 벤더를 사용하는 방법을 진행하겠습니다.
참고로 이전글에 색상부분을 참고하세요.
속성을 한번 보겠습니다.
이미지를 클릭하시면 원본 크기로 보실 수 있습니다.
1. type (유형)
type 에는 linear(선형) 과 radial(방사형 또는 원형) 중에서 선택할 수 있습니다.
2. 시작위치.
시작위치는 left top 식으로 사용해도 되고, 10 20 등과 같은 공백으로 분리된 좌표값, 또는 10% 20% 와 같은 백분율도 사용이 가능합니다.
3. 끝위치.
끝위치는 left bottom 식으로 사용해도 되고, 10 20 등과 같은 공백을로 분리된 좌표값, 또는 10% 20% 와 같은 백분율도 사용이 가능합니다.
4. 색상 시작점.
색상을 표시하는 값은 위처럼 rgb(238, 238, 238) 이나, hex(#eee or #eeeeee) 또는 키워드 등 모두 사용이 가능합니다.
빨강색으로 표시된 곳을 보면 0% 나 0 으로도 사용할 수 있습니다.
이것은 시작위치를 나타내는 것으로 시작위치는 0 입니다.
5. 색상 끝점.
색상을 표시하는 값은 위처럼 rgb(170, 170, 170) 이나 hex(#aaa or #aaaaaa) 또는 키워드 등 모두 사용이 가능합니다.
빨강색으로 표시된 곳을 보면 100% 나 1 로도 사용할 수 있습니다.
이것은 색상끝점을 나타내는 것으로 끝위치는 1 입니다.
버젼 호환성.
위처럼 표시한것은 크롬과 사파리 4 버젼대부터 사용이 가능합니다.
Chrome 10+ 버 이상과 Safari 5.1+ 이상버젼부터는 약간 다릅니다. 위의 코드를 아래코드도 포함해서 같이 표시하는것이 좋습니다.
그래서 예전 버젼과 최신버젼을 모두 가능하게 사용하려면 코드를 두개를 넣어서 사용하기를 권장합니다.
-webkit-타입-gradient(시작위치, (색상 시작 값) 시작점, (색상 끝 값) 끝점);
위처럼 코드를 넣었을 경우 결과입니다.
제가 알아보는 정보로는 위처럼 버젼이 나뉘어져 있습니다. 하지만 제가 테스트 해본 결과 Chrome 10 이상버젼에서도 위의 예전 코드도 지원했었습니다.
물론 사파리도 마찬가지구요. 그래도 크로스 브라우징을 위해 같이 써주는것을 권합니다.
위는 선형 그라데이션에 대해서 다뤘는데요. 이제는 원형 그라데이션에 대해서 이야기 해보겠습니다.
선형 그라데이션과 비슷하기 때문에 이걸 익히면 원형 그라데이션은 응용만 하면 됩니다.
먼저 속성을 보겠습니다. 선형 그라데이션은 예전 속성을 중점으로 보았으니 이번에는 신형 엔진에 사용되는 속성을 중점으로 보겠습니다.
속성에서 [] 는 옵션이고 | 는 or 입니다. 즉 둘중에 하나를 선택해야 한다는 뜻입니다.
1. type 유형.
선형 그라데이션에도 보셨듯 이것은 원형 그라데이션을 말합니다.
2. 중심점.
cirlce 또는 타원의 중심점을 말합니다. top, left, center, right 등 키워드를 사용합니다.
기본값은 center 입니다.
3. shape 모양.
원형 그라데이션에서의 모양은 그냥 radial(원형) 과 ellipse(타원형) 이 있습니다.
기본값은 타원형인 ellipse 입니다.
4. size 크기.
크기는 closest-corner , farthest-side , farthest-corner , contain , cover 등을 사용할 수 있습니다.
기본값은 cover 입니다.
5. lenght 길이.
이는 타워의 가로 세로의 길이를 말합니다. 여기서의 길이는 원의 직경이 아니라 반지름입니다. 그래서 음수는 사용이 안됩니다.
6. percentage 백분율.
타원형 즉 ellipse 의 가로 세로축의 비율을 의미합니다. 이 비율로 모양이 정해집니다. 당연이 음수는 사용이 안됩니다.
7. color_stop 색상 값.
이는 color_stop , color , stop 등을 사용할 수 있습니다. 시작과 끝을 포함하여 여러 색상을 표현할 수 있습니다.
색상의 시작값과 끝값을 정해야 합니다.
이는 생략하면 안되는 필수값입니다.
그러므로 선형 그라데이션에서 사용되었던 컬러값을 사용해보면 아래와 같습니다.
크로스 브라우징을 위해 이전 브라우져와 호환을 위해 아래처럼 코드를 추가해서 넣어줍니다.
위 처럼 넣을경우 결과입니다.
이 페이지에서 사용되는 크로스 브라우징은 웹킷 엔진에 한 한 것입니다.
즉 다른 브라우져의 벤더를 포함한 코드를 모두 넣어줘야 좋습니다. 여기서의 예제는 webkit 엔진에서의 코드만 넣었습니다.
좀더 자세한 사항은 사파리 개발자 도서관에서 보실수 있습니다.
다양한 예제의 그라데이션 예제는 사파리 개발자 도서관중에서 Safari CSS Visual Effects Guide 에서 보실 수 있습니다.
근데 이는 사파리에 특화된 것이라는 점을 잊지 마세요.
너무 깊이 들어가봐야 사파리 직원이 아니니까 우리에게 필요한것은 CSS3 의 코드 한줄입니다.^^;
또한 정보공유가 쉽지 않아 현재 딱 뭐라 말하기는 어렵지만 현재 지원하는 현황을 위주로 써 나가겠습니다.
수정 사항이 있으면 알려주시면 수정하겠습니다.
그라데이션을 얘기하려면 벤더를 먼저 이야기 해야 합니다.
CSS 3가 공식으로 표준안이 발표되기전부터 각 브라우져들은 브라우져에 맞게 CSS 3를 지원 했습니다.
벤더 프리픽스(vendor prefix)라고 해서 각 브라우져에서 새로운 기능을 추가하고 시범적으로 운영하기 위함입니다. 이 벤더 프리픽스는 핵이 아닙니다.
이는 나중에 공식속성이 나오면 지원하지 않을 가능성이 많기 때문에 벤더 프리픽스를 먼저 선언하고 뒤에 공식(?) 속성을 선언하는것이 좋습니다.
각 브라우져가 지원하는 벤더를 알아보겠습니다.
여기서는 우선 사파리와 크롬이 지원하는 webkit 벤더를 사용하는 방법을 진행하겠습니다.
참고로 이전글에 색상부분을 참고하세요.
text-shadow , box-shadow 에 관한글
-webkit-linear-gradient 보기
-webkit-linear-gradient
속성을 한번 보겠습니다.
이미지를 클릭하시면 원본 크기로 보실 수 있습니다.
1. type (유형)
type 에는 linear(선형) 과 radial(방사형 또는 원형) 중에서 선택할 수 있습니다.
2. 시작위치.
시작위치는 left top 식으로 사용해도 되고, 10 20 등과 같은 공백으로 분리된 좌표값, 또는 10% 20% 와 같은 백분율도 사용이 가능합니다.
3. 끝위치.
끝위치는 left bottom 식으로 사용해도 되고, 10 20 등과 같은 공백을로 분리된 좌표값, 또는 10% 20% 와 같은 백분율도 사용이 가능합니다.
4. 색상 시작점.
색상을 표시하는 값은 위처럼 rgb(238, 238, 238) 이나, hex(#eee or #eeeeee) 또는 키워드 등 모두 사용이 가능합니다.
빨강색으로 표시된 곳을 보면 0% 나 0 으로도 사용할 수 있습니다.
이것은 시작위치를 나타내는 것으로 시작위치는 0 입니다.
5. 색상 끝점.
색상을 표시하는 값은 위처럼 rgb(170, 170, 170) 이나 hex(#aaa or #aaaaaa) 또는 키워드 등 모두 사용이 가능합니다.
빨강색으로 표시된 곳을 보면 100% 나 1 로도 사용할 수 있습니다.
이것은 색상끝점을 나타내는 것으로 끝위치는 1 입니다.
버젼 호환성.
위처럼 표시한것은 크롬과 사파리 4 버젼대부터 사용이 가능합니다.
Chrome 10+ 버 이상과 Safari 5.1+ 이상버젼부터는 약간 다릅니다. 위의 코드를 아래코드도 포함해서 같이 표시하는것이 좋습니다.
/* Chrome10+,Safari5.1+ */ background:
-webkit-linear-gradient(top, rgb(238,238,238) 0%,rgb(170,170,170) 100%);
그래서 예전 버젼과 최신버젼을 모두 가능하게 사용하려면 코드를 두개를 넣어서 사용하기를 권장합니다.
-webkit-타입-gradient(시작위치, (색상 시작 값) 시작점, (색상 끝 값) 끝점);
/* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(238,238,238)), color-stop(100%,rgb(170,170,170))); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, rgb(238,238,238) 0%,rgb(170,170,170) 100%);
위처럼 코드를 넣었을 경우 결과입니다.
제가 알아보는 정보로는 위처럼 버젼이 나뉘어져 있습니다. 하지만 제가 테스트 해본 결과 Chrome 10 이상버젼에서도 위의 예전 코드도 지원했었습니다.
물론 사파리도 마찬가지구요. 그래도 크로스 브라우징을 위해 같이 써주는것을 권합니다.
위는 선형 그라데이션에 대해서 다뤘는데요. 이제는 원형 그라데이션에 대해서 이야기 해보겠습니다.
선형 그라데이션과 비슷하기 때문에 이걸 익히면 원형 그라데이션은 응용만 하면 됩니다.
-webkit-radial-gradient 원형 그라데이션 보기
-webkit-radial-gradient
먼저 속성을 보겠습니다. 선형 그라데이션은 예전 속성을 중점으로 보았으니 이번에는 신형 엔진에 사용되는 속성을 중점으로 보겠습니다.
속성에서 [] 는 옵션이고 | 는 or 입니다. 즉 둘중에 하나를 선택해야 한다는 뜻입니다.
1. type 유형.
선형 그라데이션에도 보셨듯 이것은 원형 그라데이션을 말합니다.
2. 중심점.
cirlce 또는 타원의 중심점을 말합니다. top, left, center, right 등 키워드를 사용합니다.
기본값은 center 입니다.
3. shape 모양.
원형 그라데이션에서의 모양은 그냥 radial(원형) 과 ellipse(타원형) 이 있습니다.
기본값은 타원형인 ellipse 입니다.
4. size 크기.
크기는 closest-corner , farthest-side , farthest-corner , contain , cover 등을 사용할 수 있습니다.
기본값은 cover 입니다.
5. lenght 길이.
이는 타워의 가로 세로의 길이를 말합니다. 여기서의 길이는 원의 직경이 아니라 반지름입니다. 그래서 음수는 사용이 안됩니다.
6. percentage 백분율.
타원형 즉 ellipse 의 가로 세로축의 비율을 의미합니다. 이 비율로 모양이 정해집니다. 당연이 음수는 사용이 안됩니다.
7. color_stop 색상 값.
이는 color_stop , color , stop 등을 사용할 수 있습니다. 시작과 끝을 포함하여 여러 색상을 표현할 수 있습니다.
색상의 시작값과 끝값을 정해야 합니다.
이는 생략하면 안되는 필수값입니다.
그러므로 선형 그라데이션에서 사용되었던 컬러값을 사용해보면 아래와 같습니다.
background: -webkit-radial-gradient(center, ellipse cover, rgb(238,238,238) 0%,rgb(170,170,170) 100%);
크로스 브라우징을 위해 이전 브라우져와 호환을 위해 아래처럼 코드를 추가해서 넣어줍니다.
/* Chrome,Safari4+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgb(238,238,238)), color-stop(100%,rgb(170,170,170))); /* Chrome10+,Safari5.1+ */ background: -webkit-radial-gradient(center, ellipse cover, rgb(238,238,238) 0%,rgb(170,170,170) 100%);
위 처럼 넣을경우 결과입니다.
이 페이지에서 사용되는 크로스 브라우징은 웹킷 엔진에 한 한 것입니다.
즉 다른 브라우져의 벤더를 포함한 코드를 모두 넣어줘야 좋습니다. 여기서의 예제는 webkit 엔진에서의 코드만 넣었습니다.
좀더 자세한 사항은 사파리 개발자 도서관에서 보실수 있습니다.
다양한 예제의 그라데이션 예제는 사파리 개발자 도서관중에서 Safari CSS Visual Effects Guide 에서 보실 수 있습니다.
근데 이는 사파리에 특화된 것이라는 점을 잊지 마세요.
너무 깊이 들어가봐야 사파리 직원이 아니니까 우리에게 필요한것은 CSS3 의 코드 한줄입니다.^^;