WebKit에서 먼저 CSS Gradients가 소개된 이후 CSS 3의 Gradients 표준 용법은 아직 Draft 상태이나, 현재 Safari 4, Firefox 3.6, Google Chrome에 바로 적용해서 사용할 수 있다.

따로 이미지를 쓸 필요가 없는 이점에도 불구하고 통일되지 못한 사용법과 IE 미지원으로 아직은 많이 사용되지 않고 있는데, 그나마 CSS3 Gradient Generator가 있어서 적용에는 큰 어려움이 없다.

아래는 이 곳에 적용한 예.

#page {
  background-color: #160B37;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#271362), to(#160B37));
  background-image: -webkit-linear-gradient(top, #271362, #160B37);
  background-image: -moz-linear-gradient(top, #271362, #160B37);
  background-image: -o-linear-gradient(top, #271362, #160B37);
  background-image: -ms-linear-gradient(top, #271362, #160B37);
}

미적용 브라우저들엔 전처럼 그냥 이미지로 대체해주면 될 것이다.

요즘 CSS 작성할 때 점차 그 사용이 늘어나는 vendor specific extensions로 논쟁이 많은데, 어차피 표준 제정이 마무리 되지 않는 한 불편은 계속되겠지만 시도한 만큼의 결과물 만족감은 더 크다.

관련된 주제의 글

• 앞으론 CSS property만으로 어떤 형태를 표현하고 있는지 짐작이나 할 수 있을까? (2)
• 거의 막바지에 바뀐 CSS3 Gradients 용법 (0)
• WebKit의 CSS3 Gradients 표준 용법으로 통일화되다. (0)
• 호환성을 높인 새 @font-face 문법 (0)
• 바깥 날씨 위젯 v3.0 배포 시작 (5)