앞으론 CSS property만으로 어떤 형태를 표현하고 있는지 짐작이나 할 수 있을까?

CSS 댓글 달기

오로지 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%);
}


리본 끝의 뾰족한 부분은 border property를 사용(Triangle Top Left)한 줄 알았는데, 요놈도 multiple backgrounds의 한 부분으로서 linear gradient를 135도 비틀어서 만들어 낸 효과다. 현재의 Safari 버전(5.0.5)은 아직 CSS3 Gradients의 표준 용법을 지원하지 않아서 제대로 보이진 않고, 지원하는 브라우저에선 다음과 같이 보인다. (데모 페이지)
CSS Gradients 용법만 사용해서 만든 리본CSS3 Patterns Gallery에 쓰인 CSS3 Gradients는 거의 작품의 수준. 물론 굳이 CSS만 써서 어떤 형태를 표현하려는 것은 약간의 page loading 성능 향상도 있고 또 잦은 layout 변화에도 쉽게 대처하려는 노력의 일환이지만, 너무 복잡해지면 거의 해독 불가능한 불편함도 따르기 마련.

위 코드에서 보여주듯, CSS property 별 기다랗고 지저분한 vendor prefix도 극복해야 할 과제. 아직은 실험적인 성격이 짙고, 나중엔 웹 디자인에서 자주 표현되는 모양을 표현해주는 CSS property를 모아놓은 어떤 라이브러리가 탄생할지도 모를 일이다.

이런 다양한 모양을 CSS만으로 표현해보고자 하는 노력 몇 가지를 모아 보았다.

꼬리표:

관련된 주제의 글

“앞으론 CSS property만으로 어떤 형태를 표현하고 있는지 짐작이나 할 수 있을까?”에 달린 2개의 댓글

아무래도 CSS만으로 표현할 수 있는 영역의 한계가 더 넓어지면서 생기는, Canvas와 SVG처럼, 일반 이미지를 대체하려는 여러 실험적 시도 중 하나라고 봅니다. 말씀하신 것처럼, 어떤 전달하려는 알맹이를 대체하려는 목적이 아닌 그 내용을 둘러싼 겉치장 목적의 이미지를 대체하고자 이런 기술이 사용된다면 큰 거부감은 없을 것 같습니다.
한편으론, 그냥 해독하기도 어려운데 이렇게 구현해 놓은 것을 보면 대단한 감각과 많은 시행착오가 필요했을 것 같아서 대단하다는 생각이 드네요. 그리고 앞으로 2차원을 넘어서 CSS3 Transitions/Transforms로 x,y,z 축을 흔드는 3차원 효과까지 곁들이면 UI 접근 방식에도 엄청난 변화가 일어날 것 같습니다. 본문에서도 소개했던 WWDC 세션 비디오에 나오는 checkout process도 참 인상적이더군요.

물론 항상 접근성을 고려하고 MVC 구조에서 서로의 영역을 범하지 않는 수준에서 활용되어야 한다는 점은 동감합니다. 🙂

댓글을 남겨 주세요