Direcția artistică pentru web folosind forme CSS

Publicat: 2022-03-10

Rezumat rapid ↬ Designerul și autorul cărții „Art Direction for the Web”, Andy Clarke, nu i-a fost niciodată frică să depășească limitele atunci când folosește CSS pentru a crea modele noi interesante. În acest tutorial, el depășește formele CSS de bază și arată cum le puteți utiliza pentru a crea cinci tipuri de machete distinctive și captivante pentru design-urile dvs. orientate către artă.

Anul trecut, Rachel Andrew a scris un articol care a aruncat o nouă privire asupra formelor CSS, în care le-a reintrodus cititorilor la elementele de bază ale utilizării formelor CSS. Pentru oricine dornic să înțeleagă cum să folosească proprietăți precum shape-outside , shape-margin și shape-image-threshold , Rachel's este primerul ideal.

Am văzut multe exemple de utilizare a proprietăților, dar foarte puține depășesc formele de bază, inclusiv circle() , ellipse() , inset() . Chiar și exemplele care utilizează forme polygon() rareori depășesc cu mult ele. Având în vedere oportunitățile creative oferite de CSS Shapes, acest lucru este dezamăgitor. Dar, sunt sigur că, cu puțină inspirație și imaginație, putem realiza modele mai distinctive și mai captivante. Așadar, vă voi arăta cum să utilizați formele CSS pentru a crea următoarele cinci tipuri diferite de aspect:

forme de V
Z-modele
Forme curbate
Forme diagonale
Forme rotite

Puțină inspirație

Din păcate, nu veți găsi multe exemple inspiratoare de site-uri web care utilizează forme CSS. Asta nu înseamnă că inspirația nu există – trebuie doar să priviți puțin mai departe la reclame, reviste și afișe. Cu toate acestea, ar fi o prostie pentru noi să imităm doar lucrări dintr-o epocă și un mediu anterioare.

Puteți găsi inspirație în locuri surprinzătoare, cum ar fi aceste reclame de epocă.

În ultimii câțiva ani, am umplut folderele Dropbox cu inspirație și chiar ar trebui să mut acele exemple pe Pinterest. Din fericire, Kristopher Van Sant a fost mai sârguincios decât mine în alcătuirea unui panou Pinterest plin de exemple inspiratoare „Shapes Of Text”.

Formele adaugă energie designului, iar această mișcare îi atrage pe oameni. Ele ajută la conectarea publicului cu povestea dvs. și la crearea de conexiuni mai strânse între conținutul dvs. vizual și scris.

Când aveți nevoie de conținut pentru a curge în jurul unei forme, utilizați proprietatea shape-outside . Trebuie să plutiți un element la stânga sau la dreapta pentru ca shape-outside să aibă efect.

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

NB: Când curgeți conținutul în jurul formelor, aveți grijă să nu permiteți niciunei linii de text să devină prea înguste și să se potrivească doar cu unul sau două cuvinte.

Adesea, are nevoie de un marcaj surprinzător de puțin pentru a dezvolta machete dinamice și originale. HTML-ul meu pentru această serie de cinci modele constă doar dintr-un antet și elemente principale, figuri și imagini și adesea nu este mai complicat decât acesta:

  <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. Forme în V

Pentru mine, unul dintre cele mai incredibile aspecte ale CSS-ului modern este că pot crea o formă din canalul alfa al unei imagini parțial transparente, fără a fi nevoie să desenez o cale de poligon. Trebuie doar să creez o imagine, iar apoi un browser se va ocupa de restul.

Cred că aceasta este una dintre cele mai interesante completări la CSS și face dezvoltarea direcției artistice pentru web mai simplă, mai ales dacă lucrați cu un sistem de management al conținutului și conținut generat dinamic.

Stânga: Fără forme CSS, acest design pare plictisitor și lipsit de viață. Dreapta: Crearea formelor în V face acest design mai distinctiv și mai captivant.

Pentru a dezvolta forme din imagini, acestea trebuie să aibă un canal alfa care este fie total, fie parțial transparent. Nu trebuie să desenez un poligon pentru a permite conținutului să curgă între formele triunghiulare de fiecare parte a conținutului meu în acest prim design; în schimb, trebuie să specific doar adresa URL a unui fișier imagine ca valoare shape-outside :

  [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'); }

Exemplu de formă CSS — Atenție la CORS (partajarea resurselor între origini) atunci când utilizați imagini pentru a vă dezvolta formele. Trebuie să găzduiți imagini pe același domeniu cu produsul sau site-ul dvs. Dacă utilizați un CDN, asigurați-vă că trimite anteturile corecte pentru a activa formele. De asemenea, merită remarcat faptul că singura modalitate de a testa formele la nivel local este utilizarea unui server web. Protocolul `file://` pur și simplu nu va funcționa.

Conținut generat

După cum a explicat Rachel în articolul ei:

„De asemenea, puteți utiliza o imagine ca cale pentru formă pentru a crea un efect de text curbat fără a include și imaginea pe pagină. Totuși, mai aveți nevoie de ceva care să plutească și, pentru aceasta, putem folosi conținut generat.”

Ca o alternativă la canalul alfa, pot folosi Conținut generat - aplicat la două pseudo-elemente - unul pentru un triunghi poligon în stânga, celălalt pentru dreapta. Textul meu rulant va curge acum între cele două forme generate:

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

NB: Creatorul de trasee CSS de la Bennett Feely este un instrument fabulos pentru elaborarea valorilor de coordonate pentru utilizare cu Forme CSS.

Ajustarea lățimii imaginilor alfa la mai multe puncte de întrerupere permite formei acestui text care rulează să se potrivească cel mai bine cu portul de vizualizare.

2. Z-Patterns

Un model Z este o cale familiară pe care o urmăm ochii noștri atunci când citesc conținut de la stânga la dreapta, sus-jos. Prin plasarea conținutului de-a lungul liniilor ascunse care formează un Z, aceste modele ajută la ghidarea cititorului pe această cale, de unde ne-am dori să înceapă să citească către o destinație, cum ar fi un îndemn. Modelele Z pot fi fie discrete - implicate de puncte focale sau elemente cu greutate vizuală mai mare - sau făcute evidente folosind Forme CSS.

Modelul în Z creat prin conducerea unei coloane înguste de text între două forme sugerează viteza și distracția pe care o vor avea oamenii când conduc această mașină iconică.

În acest design următor, un model z discret este format ca:

Imaginea mare se întinde pe toată lățimea paginii, punctul final subliniat cu un titlu aliniat la dreapta.
Un bloc de text rulant este format din două forme CSS.
Marginea superioară groasă a unei figuri care acționează ca un subsol completează Z.

Nu este nevoie de un marcaj complicat pentru a implementa acest design, iar HTML-ul meu simplu include doar trei elemente:

  <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>

Antetul și figura mea pe lățimea paginii nu are nevoie de explicații, dar textul care curge între două forme triunghiulare este puțin mai complicat. Pentru a implementa acest design cu model Z, am ales să includ două imagini de substituție minuscule de 1×1px pe care aplic două imagini mai mari, care formează forme, folosind shape-outside . Atașând un atribut aria-hidden la aceste imagini, un cititor de ecran nu le va descrie.

După ce le dau celor două imagini de formă aceleași dimensiuni, plutesc o imagine la stânga și cealaltă la dreapta, ceea ce permite textului meu rulant să ruleze între ele:

  [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'); }

Stânga: un design prezentabil, dar previzibil, care nu are energie. Dreapta: Formele CSS sugerează distracție și viteză.

Emblematicul Mini Cooper a fost rapid și distractiv de condus. În timp ce designul meu ar fi perfect prezentabil fără un model z format din Forme CSS, acest aspect pare previzibil și lipsit de energie. Modelul Z creat prin conducerea unei coloane înguste de text între două forme sugerează viteza și distracția pe care o vor avea oamenii când conduc această mașină iconică.

3. Forme curbate

Unul dintre cele mai fascinante aspecte ale Formelor CSS este modul în care pot crea forme elegante folosind canalul alfa dintr-o imagine parțial transparentă. Această formă poate fi orice îmi imaginez. Trebuie doar să creez imaginea și un browser va curge conținutul în jurul ei.

Deși limitarea conținutului într-o formă a fost propusă în specificația Modulului Forme CSS Nivelul 2, în prezent nu există nicio modalitate de a ști dacă și când ar putea fi implementat în browsere. Dar, deși shape-inside nu este disponibil ( încă! ), asta nu înseamnă că nu pot crea rezultate similare folosind shape-outside .

Stânga: Un alt design prezentabil, dar previzibil. Dreapta: un aspect mai distinctiv creat prin utilizarea formelor CSS.

Prin limitarea conținutului meu într-o imagine curbată plutită în dreapta, pot adăuga cu ușurință un aspect distinctiv acestui design următor. Pentru a crea forma, folosesc din nou proprietatea shape-outside , de data aceasta, valoarea fiind aceeași adresă URL ca și imaginea mea vizibilă:

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

Pentru a pune o oarecare distanță între forma mea și conținutul care curge în jurul ei, proprietatea form-margin desenează o altă formă în afara contururilor primei. Pot folosi orice unitate de lungime absolută CSS - milimetri, centimetri, inci, picas, pixeli și puncte - sau unități relative ( ch , em , ex , rem , vh și vw ):

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

Mai multe Marje

Adăugarea de mișcare la acest design curbat se bazează pe mai mult decât formele CSS. Folosind unitățile de lățime a ferestrei de vizualizare, îmi dau titlului, imaginii și textului rulant o marjă din stânga diferită, fiecare proporțională cu lățimea ferestrei de vizualizare. Acest lucru creează o diagonală din spatele titlului meu către partea din față a mașinii:

  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. Forme diagonale

Unghiurile pot face ca machetele să pară mai puțin structurate și să pară mai organice. Absența unei structuri clare încurajează ochiul să se plimbe liber în jurul unei compoziții. Această mișcare face, de asemenea, ca un aranjament să se simtă energic.

Văd în fiecare zi modele așezate în jurul axelor orizontale și verticale, dar rareori ceva bazat pe o diagonală. Din când în când, observ un element înclinat - poate un banner grafic cu fundul înclinat - dar rareori este esențial pentru un design.

Este obișnuit să vezi conținut care curge în jurul formelor în designul tipărit, dar acest lucru era imposibil de realizat pe web înainte de Forme CSS.

Chiar dacă CSS Grid implică setarea coloanelor și rândurilor, nu există niciun motiv pentru care nu poate fi folosită pentru a crea diagonale dinamice. Următorul design are nevoie doar de un antet și un element principal:

  <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>

Pentru a crea detaliile diagonale în acest design, curg din nou conținutul în jurul unei imagini de formă care ea însăși este plutită spre stânga. Din nou, folosesc proprietatea shape-outside cu aceeași valoare URL ca imaginea mea vizibilă și o shape-margin pentru a pune distanța între forma mea și conținutul care curge în jurul ei:

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

Având în vedere că receptivitatea este una dintre proprietățile intrinseci ale web-ului, rareori putem prezice cum va curge conținutul, dar evităm modelele ca acesta. Când există prea puțin spațiu pentru ca tot textul meu rulat să se potrivească deasupra formei, faptul că fiecare formă este plutită înseamnă că conținutul va curge în spațiu sub formă.

5. Forme rotite

De ce să vă mulțumiți doar cu utilizarea CSS Grid și Shapes atunci când adăugarea de Transformări la amestec poate activa aspecte care erau de neimaginat cu doar câțiva ani în urmă? În acest exemplu final, textul care curge în jurul mașinilor din această imagine, în același timp rotirea întregii compoziții avea nevoie de o combinație a tuturor acestor proprietăți.

De ce să vă mulțumiți să utilizați numai Grid și Forme CSS?

Deoarece imaginea acestor mașini nu are un canal alfa transparent, text care curge în jurul formelor, ea conține necesită o a doua imagine care include doar informații despre canalul alfa.

Implementarea acestui design necesită două imagini; unul vizibil, celălalt dovedind informații despre canalul alfa.

De data aceasta, plutesc imaginea vizibilă la dreapta și aplic proprietatea shape-outside cu o valoare URL care se potrivește cu imaginea canalului meu alfa:

  [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; }

Poate ați observat că ambele imagini ale mele conțin elemente pe care le-am rotit în sensul acelor de ceasornic cu zece grade. Cu acele imagini la locul lor, pot roti întregul aspect cu zece grade în direcția opusă pentru a da iluzia că imaginile mele sunt în poziție verticală:

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

Rotesc acest aspect suficient pentru a face designul mai atrăgător, fără a sacrifica lizibilitatea.

Exemplu bonus: Formele poligonului sculptează coloane

Un extras din „Art Direction for the Web” disponibil din 26 martie 2019.

Puteți crea forme puternice, structurale, fără altceva decât tip. Combinând forme polygon() și pseudo-elemente, puteți sculpta forme din blocuri solide de text care rulează, în stilul lui Alexey Brodovitch și a lucrarii sale influente pentru Harper's Bazaar.

Stânga: Aceste cifre frumoase sunt aproape prea frumoase pentru a fi ascunse. Sunt, de asemenea, perfecte pentru a sculpta în acele coloane. Dreapta: Când folosesc pseudo-elemente invizibile fără fundal sau margini pentru a dezvolta forme de poligoane, rezultatul sunt două coloane cu forme neobișnuite. — Stânga: Aceste cifre frumoase sunt aproape prea frumoase pentru a fi ascunse. De asemenea, sunt perfecte pentru a sculpta în acele coloane. Dreapta: Când folosesc pseudo-elemente invizibile fără fundal sau margini pentru a dezvolta forme de poligoane, rezultatul sunt două coloane cu forme neobișnuite.

Am format aceste coloane din două elemente de articol, adică cu un jgheab între ele și o lățime maximă, care ajută la menținerea unei măsuri confortabile:

  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; }

Deoarece există două elemente de articol și am specificat și două coloane pentru grila mea, nu este nevoie să fiu specific cu privire la poziția acelor articole. Pot lăsa un browser să le plaseze pentru mine și tot ce îmi rămâne este să aplic shape-outside unui pseudo-element generat în fiecare coloană:

  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, [...]); }

Pay-Off

Acum că Firefox a lansat o versiune care acceptă forme CSS și a lansat un editor de cale de formă în instrumentele sale pentru dezvoltatori, acum există doar Edge fără suport pentru forme. Această situație se va schimba în curând, acum că Microsoft a anunțat o schimbare de la propriul motor de randare EdgeHTML la Chromium's Blink, același motor ca Chrome și Opera.

Instrumente precum Forme CSS ne oferă acum nenumărate oportunități de a folosi direcția artistică pentru a capta atenția cititorilor și a-i menține implicați. Sper că până acum ești la fel de entuziasmat de ei ca și mine!

Nota editorialului : Noua carte a lui Andy, Art Direction for the Web (precomandați copia dvs. astăzi), explorează 100 de ani de direcție artistică și cum putem folosi aceste cunoștințe și cele mai noi tehnologii web pentru a crea produse digitale mai bune. Citiți un capitol extras pentru a înțelege ce are de oferit cartea.

Resurse suplimentare

„Direcția artistică pentru web”, Andy Clarke
„Aruncă o nouă privire asupra formelor CSS”, Rachel Andrew
„Forme CSS”, documente web MDN, Mozilla
„Editați căile de formă în CSS”, documente web MDN, Mozilla
„Directia artistică pentru web: o nouă carte zdrobitoare”, Revista Smashing