새로운 CSS 기술인 CSS Shapes를 이용하면 부정형 모양으로 컨텐츠를 감싸 웹에서 편집디자인 같은 레이아웃으로 재창조 할 수 있습니다. 이번에 (포토샵이 아닌!) CSS Shapes를 가지고 약간의 흥미로운 웹 페이지 디자인을 시도해 봤습니다.

 

 

여기서 사용하는 CSS 기술은 모든 브라우져에서 작동되지 않습니다. 위아래에 스크린캡쳐 이미지로 결과물을 볼 수는 있지만, 데모 페이지를 돌려 보고 싶으신 분은 자신의 브라우져가 최신 CSS를 작동할 수 있게끔 만들어줘야 합니다.

우선 크롬 버젼 31+나 크롬 카나리가 CSS Shapes를 지원하지만, about://flags에서 '실험용 웹 플랫폼 기능 사용'을 활성화 시켜줘야 합니다.

 

스크린캡쳐 이미지를 클릭하면 데모를 볼 수 있습니다.