-o-linear-gradient , -o-radial-gradient
- 퍼블리셔/css
- 2011. 12. 16. 18:53
-o- 는 오페라 브라우져의 벤더 프리픽스 입니다.
각 브라우져에 대한 벤더 프리픽스는 -webkit-gradient 에서 확인 할 수 있습니다.
오페라는 원형 그라디언트에 대해서는 문서화하여 정확하게 나와 있는데 선형 그라디언트에 대해서는 좀 모호하게 나와 있습니다.
문서의 링크를 먼저 알려드리고 시작하겠습니다.
다양한 예제와 정확한 원문이 있으니 참고하시기 바랍니다.
오페라 원형 그라디언트 문서 바고가기 , 선형 그라디언트 문서 바로가기
그래서 일단 원형 그라디언트에 대해서 이야기 합니다.
우선 원형 그라디언트의 구문을 보겠습니다.
1. position 위치.
위치는 원형 그라데이션이 어느 위치에 있는지를 지정합니다.
위처럼 키워드로 center 로 지정해도 되고 left top, left bottom 등등 키워드로 지정이 가능합니다.
px 나 % 같은 백분율로도 설정할 수 있습니다.
중요한 것은 여기서 지정하는것은 그라데이션이 중심이라는 점입니다.
예를들어 여기서 70px 80px 이렇게 지정하면 가운데 위치에서 X축으로 70px 우측으로 이동한 지점에서 Y축으로 80px 이동한 지점에 그라데이션이 있다라는 점입니다.
또 숫자로 지정하되 하나만 지정할 경우. 즉 position 위치에서 0% 라고 지정한 경우 입니다.
이런경우 X축이 0이라는 말입니다. 그러니까 맨 왼쪽을 말하는겁니다. 그리고 생략한 값에 대해서는 오페라가 50% 또는 center 을 자동으로 설정합니다.
기본값이 되는거죠.
즉 position은 그라데이션의 위치를 말합니다.
2. size (크기) , shape(모양).
크기와 모양을 한번에 묶은것은 사이즈에 의해서 모양이 결정되기 때문입니다.
그리고 오페라 문서에서는 이것을 노골적으로 표기하느냐? 암시적 형태로 표기하느냐? 나뉘는군요.
40px 40px 이렇게 지정한 경우 원형이 되며 이 수치는 가로 세로 반지름을 뜻합니다.
20px 40px 이러면 타원형이 되겠죠.
하나의 값만 지정하면 안되며 키워드로 지정하면 됩니다.
생략도 가능하며 생략할경우 크기와 모양은 각각 ellipse cover 지정됩니다.
3. 색.
색은 시작점색을 지정하고 그 색의 시작위치를 지정합니다. 색의 위치는 0은 시작을 100은 끝을 의미합니다.
기본은 이렇습니다.
rgb(color) 0%, rgb(color) 100%
여러색을 넣을경우는 아래처럼 되겠죠.
rgb(color), rgt(color) 25%, rgb(color) 50%, rgb(color) 75%, rgb(color) 100%
여기서 맨처음에는 당연이 0%가 되고 맨끝에는 자동으로 100%가 됩니다.
또한 투명도를 넣을 경우는 rgba(255,255,255,0.5) 이런식을로 쓰면 됩니다.
4. 반복.
원형 그라디언트도 반복을하여 여러가지 그라디언트를 만들수 있습니다.
아래는 예제입니다.
반복을 통해 엄청난 효과를 낼 수 있습니다. 반복을 통해 패턴을 만드는건데요.CSS3 Patterns Gallery 에서 예제를 보시고 참고하시기 바랍니다.
자세한 것은 오페라 원문을 참고하세요.
이번에는 선형 그라디언트에 대해서 보겠습니다.
먼저 코드부터 보시죠.
원형 그라데이션과 겹치는 부분이 있으니 나머지만 설명하겠습니다.
모든것은 원형과 같고 선형 그라디언트에서는 각도에 대한 부분이 있습니다.
위에서 position 위치에 해당이 됩니다.
각도는 위처럼 키워드로 top left 로 지정해도 되지만 deg 각도를 사용해서 지정해도 됩니다.
deg 각도는 아래와 같습니다.
반복.
반복은 repeating 라는 코드가 추가되어 약간 다릅니다. 예제는 아래와 같습니다.
결과는 아래와 같습니다.
이 코드는 시작점에서 255,0,0 즉 빨강색으로 지정하고 100,0,0 은 약간 어두운 빨강색 즉 20px 후부터는 어두운 빨강색시작 다시 20px 후부터는 빨강색 시작해서 총 구간은 40px 가 되며 이구간이 계속 반복되는겁니다.
원형 그라데이션에도 좋은 패턴 갤러리가 있지만 선형 그라데이션에도 좋은 선형 패펀이 있습니다.
스트라이프 백드라운드 패턴
Beveled 모서리
각 브라우져에 대한 벤더 프리픽스는 -webkit-gradient 에서 확인 할 수 있습니다.
오페라는 원형 그라디언트에 대해서는 문서화하여 정확하게 나와 있는데 선형 그라디언트에 대해서는 좀 모호하게 나와 있습니다.
문서의 링크를 먼저 알려드리고 시작하겠습니다.
다양한 예제와 정확한 원문이 있으니 참고하시기 바랍니다.
오페라 원형 그라디언트 문서 바고가기 , 선형 그라디언트 문서 바로가기
그래서 일단 원형 그라디언트에 대해서 이야기 합니다.
-o-radial-gradient 원형 그라디언트 글 보기
-o-radial-gradient
우선 원형 그라디언트의 구문을 보겠습니다.
1. position 위치.
위치는 원형 그라데이션이 어느 위치에 있는지를 지정합니다.
위처럼 키워드로 center 로 지정해도 되고 left top, left bottom 등등 키워드로 지정이 가능합니다.
px 나 % 같은 백분율로도 설정할 수 있습니다.
중요한 것은 여기서 지정하는것은 그라데이션이 중심이라는 점입니다.
예를들어 여기서 70px 80px 이렇게 지정하면 가운데 위치에서 X축으로 70px 우측으로 이동한 지점에서 Y축으로 80px 이동한 지점에 그라데이션이 있다라는 점입니다.
또 숫자로 지정하되 하나만 지정할 경우. 즉 position 위치에서 0% 라고 지정한 경우 입니다.
이런경우 X축이 0이라는 말입니다. 그러니까 맨 왼쪽을 말하는겁니다. 그리고 생략한 값에 대해서는 오페라가 50% 또는 center 을 자동으로 설정합니다.
기본값이 되는거죠.
즉 position은 그라데이션의 위치를 말합니다.
2. size (크기) , shape(모양).
크기와 모양을 한번에 묶은것은 사이즈에 의해서 모양이 결정되기 때문입니다.
그리고 오페라 문서에서는 이것을 노골적으로 표기하느냐? 암시적 형태로 표기하느냐? 나뉘는군요.
40px 40px 이렇게 지정한 경우 원형이 되며 이 수치는 가로 세로 반지름을 뜻합니다.
20px 40px 이러면 타원형이 되겠죠.
하나의 값만 지정하면 안되며 키워드로 지정하면 됩니다.
생략도 가능하며 생략할경우 크기와 모양은 각각 ellipse cover 지정됩니다.
3. 색.
색은 시작점색을 지정하고 그 색의 시작위치를 지정합니다. 색의 위치는 0은 시작을 100은 끝을 의미합니다.
기본은 이렇습니다.
rgb(color) 0%, rgb(color) 100%
여러색을 넣을경우는 아래처럼 되겠죠.
rgb(color), rgt(color) 25%, rgb(color) 50%, rgb(color) 75%, rgb(color) 100%
여기서 맨처음에는 당연이 0%가 되고 맨끝에는 자동으로 100%가 됩니다.
또한 투명도를 넣을 경우는 rgba(255,255,255,0.5) 이런식을로 쓰면 됩니다.
4. 반복.
원형 그라디언트도 반복을하여 여러가지 그라디언트를 만들수 있습니다.
아래는 예제입니다.
반복을 통해 엄청난 효과를 낼 수 있습니다. 반복을 통해 패턴을 만드는건데요.CSS3 Patterns Gallery 에서 예제를 보시고 참고하시기 바랍니다.
자세한 것은 오페라 원문을 참고하세요.
이번에는 선형 그라디언트에 대해서 보겠습니다.
-o-linear-gradient 선형 그라디언트 글 보기
-o-linear-gradient
먼저 코드부터 보시죠.
원형 그라데이션과 겹치는 부분이 있으니 나머지만 설명하겠습니다.
모든것은 원형과 같고 선형 그라디언트에서는 각도에 대한 부분이 있습니다.
위에서 position 위치에 해당이 됩니다.
각도는 위처럼 키워드로 top left 로 지정해도 되지만 deg 각도를 사용해서 지정해도 됩니다.
deg 각도는 아래와 같습니다.
- 0deg 는 왼쪽
- 90deg 는 아래
- 180deg 는 오른쪽
- 270deg 는 상단
- 360deg 는 왼쪽
반복.
반복은 repeating 라는 코드가 추가되어 약간 다릅니다. 예제는 아래와 같습니다.
background-image: -o-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
결과는 아래와 같습니다.
이 코드는 시작점에서 255,0,0 즉 빨강색으로 지정하고 100,0,0 은 약간 어두운 빨강색 즉 20px 후부터는 어두운 빨강색시작 다시 20px 후부터는 빨강색 시작해서 총 구간은 40px 가 되며 이구간이 계속 반복되는겁니다.
원형 그라데이션에도 좋은 패턴 갤러리가 있지만 선형 그라데이션에도 좋은 선형 패펀이 있습니다.
스트라이프 백드라운드 패턴
Beveled 모서리