이미 널리 쓰이고 있는 CSS3 Gradients의 용법이 이번에 또 바뀌었는데, 관련 CSS Image Values and Replaced Content Module Level 3가 지난 1월 12일에 “Last Call” draft 상태로 진입한 것을 보면 어떤 커다란 용법의 변경은 더는 없으리라 예상(기대)된다.

우선 Linear Gradient 용법의 달라진 점.

Linear Gradient의 가장 단순한 사용 예로 다름과 같은 것이 있다. (vendor prefix는 생략함)

div { background: linear-gradient(white, black); }

적용하면 위에서 아래 방향으로 흰색을 시작으로 점점 짙어지면서 마지막은 검은색으로 표시된다.

linear gradient function의 첫 번째 argument는 gradient의 시작점과 끝점을 잇는 기준 축인 gradient-line을 지정하게 되는데, 위의 예에서처럼 생략되면 위에서 아래방향을 가리킨다. 그리고 gradient-line은 deg 단위를 써서 각도를 지정해 주거나, 혹은 몇몇 정의된 keywords를 쓸 수도 있다. 거의 막바지에 바뀐 CSS3 Gradients 용법(이)란 제목의 글 마저 읽기 →

오로지 CSS만으로 어떤 사물을 그럴듯하게 표현해 놓은 것을 보면 항상 신기해하는데 이번에 목격한 것(WWDC 2011 Session Video 중)은 오직 CSS의 Linear Gradient property를 써서 리본(ribbon)을 그려낸 것으로 다음과 같이 쓰였다.

.ribbon {
  background-image: 
    -webkit-linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    -webkit-linear-gradient(135deg, transparent 25%, red 25%); /* Chrome 10+, Saf5.1+ */
  background-image: 
    -moz-linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    -moz-linear-gradient(135deg, transparent 25%, red 25%); /* FF3.6 */
  background-image: 
    -ms-linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    -ms-linear-gradient(135deg, transparent 25%, red 25%); /* IE10 */
  background-image: 
    -o-linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    -o-linear-gradient(135deg, transparent 25%, red 25%); /* Opera 11.10+ */
  background-image: 
    linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    linear-gradient(135deg, transparent 25%, red 25%);
}

앞으론 CSS property만으로 어떤 형태를 표현하고 있는지 짐작이나 할 수 있을까?(이)란 제목의 글 마저 읽기 →

과거 WebKit 브라우저에서의 CSS3 Gradients 용법은 Mozilla에서 사용되던 것과 달리 독자적인 문법이 사용되었는데, 이것이 CSS Image Values and Replaced Content Module Level 3에 제시된 용법을 지원하기 시작하면서 통일화되었다는 소식.

당장은 먼저 WebKit nightly build부터 적용되고 나중에 Safari의 정식 버전에서도 이 용법을 지원하게 된다. 물론 과거 사용되던 용법도 얼마간 계속 지원될 예정이다.

div {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, red), color-stop(51%, green), color-stop(100%, blue)); /* Safari */
  background-image: -webkit-linear-gradient(left, red, green, blue); /* WebKit nightly */
  background-image: -moz-linear-gradient(left, red, green, blue); /* Modzilla Firefox */
}

물론, 아직 Opera와 IE9의 지원 상황은 불투명해서 이들만을 위한 대체 용법도 신경 써야 하지만 그동안 혼용되어 사용되던 용법의 통일은 환영할 일. 현재 제안된 표준안은 아직 draft 상태로 앞으로 그 용법이 또 바뀔 가능성은 남아 있다.

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로 논쟁이 많은데, 어차피 표준 제정이 마무리 되지 않는 한 불편은 계속되겠지만 시도한 만큼의 결과물 만족감은 더 크다.