CSS 모양을 사용한 웹 아트 디렉션

작년에 Rachel Andrew는 CSS Shapes를 새롭게 살펴보는 기사를 작성하여 독자들에게 CSS Shapes 사용의 기본 사항을 다시 소개했습니다. shape-outside , shape-margin 및 shape-image-threshold 와 같은 속성을 사용하는 방법을 이해하려는 사람에게는 Rachel's가 이상적인 입문서입니다.

속성을 사용하는 많은 예를 보았지만 circle() , ellipse() , inset() 을 포함하여 기본 도형을 능가하는 예는 거의 없습니다. polygon() 셰이프를 사용하는 예도 이를 훨씬 넘어서는 경우는 드뭅니다. CSS Shapes가 제공하는 창의적인 기회를 고려할 때 이것은 실망스럽습니다. 하지만 약간의 영감과 상상력으로 더 독특하고 매력적인 디자인을 만들 수 있다고 확신합니다. 그래서 CSS Shapes를 사용하여 다음 다섯 가지 유형의 레이아웃을 만드는 방법을 보여 드리겠습니다.

1. V자형
2. Z 패턴
3. 곡선 모양
4. 대각선 모양
5. 회전된 모양

작은 영감

슬프게도 CSS Shapes를 사용하는 웹사이트의 영감을 주는 예는 많지 않습니다. 그렇다고 해서 영감이 존재하지 않는다는 의미는 아닙니다. 광고, 잡지 및 포스터 디자인에서 조금 더 멀리 바라보면 됩니다. 그러나 우리가 단순히 이전 시대와 매체의 작업을 모방하는 것은 어리석은 일입니다.

지난 몇 년 동안 저는 Dropbox 폴더를 영감으로 가득 채웠고 이러한 예를 Pinterest로 옮겨야 합니다. 다행스럽게도 Kristopher Van Sant는 영감을 주는 'Shapes Of Text' 예제로 가득 찬 Pinterest 보드를 편집하는 데 나보다 더 부지런했습니다.

모양은 디자인에 에너지를 더하고 이 움직임은 사람들을 끌어들입니다. 모양 은 청중을 스토리와 연결하고 시각적 콘텐츠와 서면 콘텐츠를 더 긴밀하게 연결하는 데 도움이 됩니다.

셰이프 주위에 내용이 흐르도록 해야 하는 경우 shape-outside 속성을 사용합니다. shape-outside 가 효과를 나타내려면 요소를 왼쪽이나 오른쪽으로 띄워야 합니다.

  img { float: <values>; shape-outside: <values>; }
img { float: <values>; shape-outside: <values>; }

주의: 모양 주위에 내용을 흐를 때 텍스트 줄이 너무 좁아서 한두 단어에 맞지 않도록 주의하십시오.

동적이고 독창적인 레이아웃을 개발하기 위해 놀라울 정도로 적은 마크업이 필요한 경우가 많습니다. 이 5가지 디자인 시리즈에 대한 내 HTML은 헤더와 주요 요소, 그림 및 이미지로만 구성되며 종종 이보다 더 복잡하지 않습니다.

  <header role="banner"> <h1>Mini Cooper</h1> </header> <figure> <img src="mini.png" alt="Mini Cooper"> </figure> <main> … </main>
<header role="banner"> <h1>Mini Cooper</h1> </header> <figure> <img src="mini.png" alt="Mini Cooper"> </figure> <main> … </main>

1. V자형

저에게 현대 CSS의 가장 놀라운 측면 중 하나는 다각형 경로를 그릴 필요 없이 부분적으로 투명한 이미지의 알파 채널에서 모양을 만들 수 있다는 것입니다. 이미지를 생성하기만 하면 나머지는 브라우저가 알아서 처리합니다.

이것은 CSS에 대한 가장 흥미로운 추가 사항 중 하나라고 생각하며 특히 콘텐츠 관리 시스템과 동적으로 생성된 콘텐츠로 작업하는 경우 웹용 아트 디렉션을 보다 간단하게 개발할 수 있습니다.

  [src*="shape-left"], [src*="shape-right"] { width: 50%; height: 100%; } [src*="shape-left"] { float: left; shape-outside: url('alpha-left.png'); } [src*="shape-right"] { float: right; shape-outside: url('alpha-right.png'); }
[src*="shape-left"], [src*="shape-right"] { width: 50%; height: 100%; } [src*="shape-left"] { float: left; shape-outside: url('alpha-left.png'); } [src*="shape-right"] { float: right; shape-outside: url('alpha-right.png'); } 

생성된 콘텐츠

Rachel은 그녀의 기사에서 다음과 같이 설명했습니다.

"또한 페이지에 이미지를 포함하지 않고 곡선 텍스트 효과를 만들기 위해 모양의 경로로 이미지를 사용할 수도 있습니다. 하지만 여전히 떠 있는 것이 필요하므로 이를 위해 생성된 콘텐츠를 사용할 수 있습니다."

알파 채널의 대안으로 생성된 콘텐츠를 사용할 수 있습니다. 하나는 왼쪽에 있는 다각형 삼각형, 다른 하나는 오른쪽에 있는 두 개의 유사 요소에 적용됩니다. 내 실행 중인 텍스트는 이제 생성된 두 모양 사이를 흐릅니다.

  main::before { content: ""; display: block; float: left; width: 50%; height: 100%; shape-outside: polygon(0 0, 0 100%, 100% 100%); } main p:first-child::before { content: ""; display: block; float: right; width: 50%; height: 100%; shape-outside: polygon(100% 0, 0 100%, 100% 100%); }
main::before { content: ""; display: block; float: left; width: 50%; height: 100%; shape-outside: polygon(0 0, 0 100%, 100% 100%); } main p:first-child::before { content: ""; display: block; float: right; width: 50%; height: 100%; shape-outside: polygon(100% 0, 0 100%, 100% 100%); }

주의: Bennett Feely의 CSS 클립 경로 작성기는 CSS Shapes와 함께 사용할 좌표 값을 계산하기 위한 멋진 도구입니다.

2. Z 패턴

Z 패턴은 우리의 눈이 왼쪽에서 오른쪽으로, 위에서 아래로 콘텐츠를 읽을 때 따라가는 익숙한 경로입니다. Z를 형성하는 은선을 따라 콘텐츠를 배치함으로써 이러한 패턴은 독자가 클릭 유도문안과 같은 대상을 향해 읽기 시작하기를 원하는 이 경로를 따라 독자를 안내하는 데 도움이 됩니다. Z 패턴은 눈에 띄지 않게(초점이나 시각적 가중치가 높은 요소로 암시) CSS 모양을 사용하여 명확하게 만들 수 있습니다.

이 다음 디자인에서 신중한 z 패턴은 다음과 같이 형성됩니다.

1. 큰 이미지는 전체 페이지 너비에 걸쳐 있으며 끝점은 오른쪽 정렬된 헤드라인으로 강조됩니다.
2. 실행 중인 텍스트 블록은 두 개의 CSS 모양으로 구성됩니다.
3. 바닥글 역할을 하는 그림의 두꺼운 상단 테두리는 Z를 완성합니다.

이 디자인을 구현하기 위해 복잡한 마크업이 필요하지 않으며 내 간단한 HTML에는 다음 세 가지 요소만 포함됩니다.

  <header role="banner"> <h1>Mini Cooper:icon of the '60s</h1> <img src="banner.png" alt="Mini Cooper"> </header> <main> <img src="placeholder-left.png" alt="" aria-hidden="true"> <img src="placeholder-right.png" alt="" aria-hidden="true"> … </main> <figure role="contentinfo"> … </figure>
<header role="banner"> <h1>Mini Cooper:icon of the '60s</h1> <img src="banner.png" alt="Mini Cooper"> </header> <main> <img src="placeholder-left.png" alt="" aria-hidden="true"> <img src="placeholder-right.png" alt="" aria-hidden="true"> … </main> <figure role="contentinfo"> … </figure>

내 페이지 너비의 머리글과 그림은 설명이 필요하지 않지만 두 개의 삼각형 모양 사이에 흐르는 텍스트는 조금 더 복잡합니다. 이 z-패턴 디자인을 구현하기 위해 2개의 작은 1x1px 자리 표시자 이미지를 포함하도록 선택하고 shape-outside 를 사용하여 두 개의 더 큰 모양 형성 이미지를 적용합니다. 이러한 이미지에 aria-hidden 속성을 추가하면 스크린 리더가 이미지를 설명하지 않습니다.

두 개의 모양 이미지에 동일한 치수를 부여한 후 하나의 이미지는 왼쪽으로, 다른 하나는 오른쪽으로 띄우므로 실행 중인 텍스트가 두 이미지 사이에서 실행될 수 있습니다.

  [src*="placeholder-left"], [src*="placeholder-right"] { display: block; width: 240px; height: 100%; } [src*="placeholder-left"] { float: left; shape-outside: url('shape-right.png'); } [src*="placeholder-right"] { float: right; shape-outside: url('shape-right.png'); }
[src*="placeholder-left"], [src*="placeholder-right"] { display: block; width: 240px; height: 100%; } [src*="placeholder-left"] { float: left; shape-outside: url('shape-right.png'); } [src*="placeholder-right"] { float: right; shape-outside: url('shape-right.png'); } 

상징적인 Mini Cooper는 빠르고 재미있게 운전했습니다. 내 디자인은 CSS Shapes로 형성된 z-패턴 없이 완벽하게 표현될 수 있지만 이 레이아웃은 예측 가능하고 에너지가 부족합니다. 두 모양 사이에 있는 좁은 열의 텍스트를 몰아서 만든 z 패턴은 사람들이 이 상징적인 작은 차를 운전할 때의 속도와 재미를 암시합니다.

3. 곡선 모양

CSS Shapes의 가장 매력적인 측면 중 하나는 부분적으로 투명한 이미지에서 알파 채널을 사용하여 우아한 모양을 만드는 방법입니다. 이 모양은 내가 상상하는 모든 것이 될 수 있습니다. 이미지를 생성하기만 하면 브라우저가 이미지를 중심으로 콘텐츠를 흐릅니다.

CSS Shapes Module 레벨 2 사양에서 모양 내로 콘텐츠를 제한하는 것이 제안되었지만 현재로서는 이것이 브라우저에서 구현될 수 있는지 여부와 시기를 알 수 있는 방법이 없습니다. 그러나 shape-inside 를 사용할 수 없지만( 아직! ), shape-outside 를 사용하여 비슷한 결과를 만들 수 없다는 의미는 아닙니다.

 [src*="curve"] { float: right; width: 400px; height: 100vh; shape-outside: url('curve.png'); }

 [src*="curve"] { shape-margin: 3rem; }

추가 여백

이 곡선형 디자인에 움직임을 추가하는 것은 CSS 모양 이상의 것에 의존합니다. 뷰포트 너비 단위를 사용하여 헤드라인, 이미지 및 실행 중인 텍스트에 각각 뷰포트 너비에 비례하는 다른 왼쪽 여백을 부여합니다. 이렇게 하면 내 헤드라인 뒤에서 자동차 앞까지 대각선이 만들어집니다.

  h1 { margin-left: 5vw; } img { margin-left: 10vw; } p { margin-left: 20vw; }
h1 { margin-left: 5vw; } img { margin-left: 10vw; } p { margin-left: 20vw; }

4. 대각선 모양

각도를 사용하면 레이아웃이 덜 구조화되고 유기적으로 보이도록 만들 수 있습니다. 명확한 구조가 없으면 눈이 구성 주위를 자유롭게 돌아다닙니다. 이 움직임은 또한 배열이 에너지를 느끼게 합니다.

나는 매일 가로축과 세로축을 중심으로 디자인이 설정되는 것을 보지만 대각선을 기반으로 하는 것은 거의 없습니다. 가끔 저는 각진 요소(바닥이 경사진 배너 그래픽일 수 있음)를 발견하지만 디자인에 거의 필수적인 요소는 아닙니다.

CSS Grid는 열과 행 설정을 포함하지만 동적 대각선을 만드는 데 사용할 수 없는 이유는 없습니다. 이 다음 디자인에는 헤더와 주요 요소만 있으면 됩니다.

  <header role="banner"> <h1>Mini Cooper</h1> <img src="banner.png" alt="Mini Cooper"> </header> <main> <img src="shape.png" alt=""> … </main>
<header role="banner"> <h1>Mini Cooper</h1> <img src="banner.png" alt="Mini Cooper"> </header> <main> <img src="shape.png" alt=""> … </main>

이 디자인에서 대각선 디테일을 만들기 위해 왼쪽에 떠 있는 모양 이미지 주위에 콘텐츠를 다시 흐릅니다. 다시 내 보이는 이미지와 같은 URL 값과 shape-margin 을 사용하여 shape-outside 속성을 사용하여 내 모양과 그 주위를 흐르는 콘텐츠 사이의 거리를 지정합니다.

  [src*="shape"] { float: left; shape-outside: url('shape.png'); shape-margin: 3rem; }
[src*="shape"] { float: left; shape-outside: url('shape.png'); shape-margin: 3rem; }

응답성은 웹의 고유한 속성 중 하나이므로 콘텐츠의 흐름을 거의 예측할 수 없지만 이와 같은 디자인은 피합니다. 실행 중인 모든 텍스트를 모양 위에 맞추기에 공간이 너무 작은 경우 각 모양이 떠 있다는 사실은 콘텐츠가 모양 아래의 공간으로 흐를 것임을 의미합니다.

5. 회전된 모양

몇 년 전만 해도 상상할 수 없었던 레이아웃을 가능하게 하는 Transforms를 믹스에 추가할 때 CSS 그리드와 모양만 사용하는 것에 만족하는 이유는 무엇입니까? 이 마지막 예에서 이 이미지의 자동차 주위에 텍스트를 흐르게 하는 동시에 전체 구성을 회전하려면 이러한 모든 속성의 조합이 필요했습니다.

이 자동차의 이미지에는 투명한 알파 채널이 없고 모양 주위에 텍스트가 흐르기 때문에 알파 채널 정보만 포함하는 두 번째 이미지가 필요합니다.

이번에는 보이는 이미지를 오른쪽으로 띄우고 내 알파 채널 이미지와 일치하는 URL 값으로 shape-outside 속성을 적용합니다.

  [src*="shape"] { float: right; width: 50%; shape-outside: url('alpha.png'); shape-margin: 1rem; }
[src*="shape"] { float: right; width: 50%; shape-outside: url('alpha.png'); shape-margin: 1rem; }

두 이미지 모두 시계 방향으로 10도 회전한 요소를 포함하고 있음을 눈치채셨을 것입니다. 이러한 이미지가 있으면 전체 레이아웃을 반대 방향으로 10도 회전하여 이미지가 똑바로 세워진 것처럼 보이게 할 수 있습니다.

  body { transform: rotate(-10deg); }
body { transform: rotate(-10deg); } 

보너스 예: 다각형 모양 조각 기둥

2019년 3월 26일부터 사용 가능한 '웹을 위한 아트 디렉션'에서 발췌.

타이핑만 하면 강하고 구조적인 모양을 만들 수 있습니다. polygon() 모양과 유사 요소를 결합하면 실행 중인 텍스트의 단단한 블록에서 Alexey Brodovitch의 스타일과 Harper's Bazaar에 대한 그의 영향력 있는 작업으로 모양을 조각할 수 있습니다.

나는 두 개의 기사 요소로 이 기둥을 형성했습니다. 즉, 그들 사이에 홈통이 있고 편안한 측정을 유지하는 데 도움이 되는 최대 너비가 있습니다.

  body { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2vw; max-width: 48em; }
body { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2vw; max-width: 48em; }

두 개의 기사 요소가 있고 그리드에 대해 두 개의 열도 지정했기 때문에 해당 기사의 위치에 대해 구체적으로 설명할 필요가 없습니다. 브라우저가 대신 배치하도록 할 수 있으며, 남은 것은 각 열에서 생성된 유사 요소에 shape-outside 를 적용하는 것뿐입니다.

  article:nth-of-type(1) p:nth-of-type(1)::before { content: ""; float: left; width: 160px; height: 320px; shape-outside: polygon(0px 0px, 90px 0px, [...]); } article:nth-of-type(2) p:nth-of-type(2)::before { content: ""; float: right; width: 160px; height: 320px; shape-outside: polygon(20px 220px, 120px 0px, [...]); }
article:nth-of-type(1) p:nth-of-type(1)::before { content: ""; float: left; width: 160px; height: 320px; shape-outside: polygon(0px 0px, 90px 0px, [...]); } article:nth-of-type(2) p:nth-of-type(2)::before { content: ""; float: right; width: 160px; height: 320px; shape-outside: polygon(20px 220px, 120px 0px, [...]); }

보수

Firefox가 CSS 모양을 지원하는 버전을 출시하고 개발자 도구 내에서 모양 경로 편집기를 시작했으므로 이제 모양을 지원하지 않는 Edge만 있습니다. Microsoft가 자체 EdgeHTML 렌더링 엔진에서 Chrome 및 Opera와 동일한 엔진인 Chromium의 Blink로 변경을 발표했기 때문에 이러한 상황은 곧 바뀔 것입니다.

CSS Shapes와 같은 도구는 이제 아트 디렉션을 사용하여 독자의 관심을 끌고 계속 참여하도록 할 수 있는 수많은 기회를 제공합니다. 지금쯤이면 당신도 나만큼 그들에 대해 흥분하기를 바랍니다!

편집자 주 : Andy의 새 책인 웹을 위한 아트 디렉션(오늘 예약 주문)은 100년의 아트 디렉션과 이 지식과 ​​최신 웹 기술을 사용하여 더 나은 디지털 제품을 만드는 방법을 탐구합니다. 책이 제공하는 것을 맛보기 위해 발췌된 장을 읽으십시오.

추가 리소스

• "웹을 위한 아트 디렉션", Andy Clarke
• Rachel Andrew, "CSS 셰이프를 새롭게 살펴보세요."
• "CSS 모양", MDN 웹 문서, Mozilla
• "CSS에서 모양 경로 편집", MDN 웹 문서, Mozilla
• "웹을 위한 아트 디렉션: 새로운 스매싱 북", 스매싱 매거진