Slik skaper de kunst med ren CSS

CSS-art sprenger grensene, men hva er vitsen? - Gøy og lærerikt! mener Mikael Brevik.

"purecss-zigario" er et av prosjektene til Diana Adrianne Smith. Og ja; dette er laget med ren CSS, som du ser av elementet som utgjør kvinnens iris.
"purecss-zigario" er et av prosjektene til Diana Adrianne Smith. Og ja; dette er laget med ren CSS, som du ser av elementet som utgjør kvinnens iris.Vis mer

Norske Håkon Wium Lie skrev i 1994 "Cascading HTML style sheets - a proposal", et utkast til hvordan stiling i nettlesere kunne fungere. Han jobba da med webbens far, Tim Berners-Lee, hos CERN.

Liknende språk for å stile markup-dokumenter som HTML var ikke noe nytt, men formatet til Wium Lie og makker Bert Bos vant fram, og CSS 1 stod klart i 1996.

Det skulle ta mange år før CSS-støtten kom skikkelig på plass i alle nettlesere, men i 2019 er CSS en selvfølge. Og ingen dytter grensene for hva som er mulig å få til like hardt som de som skriver CSS-kunst.

Mikael Brevik er en av mange norske utviklere som fascineres av CSS-kunst. Her fra en av hans mange Kodesnutt-videoer på Youtube.
Mikael Brevik er en av mange norske utviklere som fascineres av CSS-kunst. Her fra en av hans mange Kodesnutt-videoer på Youtube. Vis mer

- CSS-art har vært en sånn greie som jeg ser på med fascinasjon og amazement, uten å ha kapasitet eller evne til å gjøre det selv. Men alle slike esoteriske oppgaver er jeg 100 prosent fan av, sier utvikler og podkaster Mikael Brevik, som blant annet lærer bort CSS-triks gjennom Kodesnutt-serien, til kode24.

CSS-hva? 🤷

Hvor grensa går mellom "bare CSS" og "CSS-kunst" kan man sikkert diskutere, men konseptet ligger på en måte i navnet: Å lage grafikk for kunstens del, med ren HTML og CSS.

Det mest kjente eksempelet fra nyere tid er kanskje "Pure CSS Francine" av Diana Adrianne Smith; en amerikansk senior webutvikler hos selskapet Atlassian.

"Pure CSS Francine" er et klassisk portrett av en kvinne, som ser ut til å ha blitt malt en gang for noen hundre år siden. Men det er skrevet i ren CSS i 2018, og er ganske sinnblåsende greier første gang man ser det.

"Pure CSS Francine" er et av de beste eksemplene på hva CSS-kunst kan være. Alt du ser er HTML-elementer, stilet med blant annet heftig bruk av skygger.
"Pure CSS Francine" er et av de beste eksemplene på hva CSS-kunst kan være. Alt du ser er HTML-elementer, stilet med blant annet heftig bruk av skygger. Vis mer

Hvordan gjør de det? 🙎

Sjekker du koden til "Pure CSS Francine" finner du 1.347 linjer HTML og 4.324 linjer .less. Hun skriver altså ikke ren CSS i ordets rette forstand, uten at det gjør kunstverket noe mindre imponerende.

Smith forklarer selv hvordan hun jobber i et blogginnlegg. Der forteller hun at hun nekter seg selv å bruke annen programvare enn en editor og Chrome, og dette skal være hennes mest brukte CSS-egenskaper:

  • border-radius: Definerer formene, ved å bruke alle mulighetene egenskapen faktisk har.
  • box-shadow: Gir formene sjatteringer (shading) og dybde.
  • transform: Endre perspektiv og rotasjon til formene.
  • linear-gradient og radial-gradient: For å tegne større former med sjattering.
  • overflow: Lager orden i alle formene.

Det er med andre ord kjente og kjære CSS-egenskaper som brukes, men til andre ting enn du kanskje er vant til. Og inspiserer du slike CSS-kunstverk, er det påfallende hvor få egenskaper du finner på hvert element.

Her ser du for eksempel .less-koden til Fancines venstre kinnbein:

.cheekbone {
    &.left {
        left: 23%;
        top: 60%;
        width: 21%;
        transform: rotate(33deg);
        opacity: 0.5;
        box-shadow: -11px 4px 22px 5px #fff, 0 0 23px 15px #eae3e2, -12px 21px 22px 5px rgba(163,118,124,0.3);
    }
}

Men vent; kan vi ikke gjøre det enda vanskeligere? 🙅

Kunstverk som "Pure CSS Francine" tegnes med få CSS-egenskaper, men en hel haug HTML-elementer. Du kan for eksempel lese deg gjennom hierarkier som "head", "face", "nose" og "tip".

Men som alltid må noen gjøre allerede vanskelige ting enda vanskeligere. For eksempel lage CSS-kunst med kun ett element, som blant annet utvikleren Lynn Fischer gjør på nettsida a.singlediv.com. Og her snakker vi ikke om artige sirkel eller rare bokser, neida; vi snakker fotorealistiske penner, animerte bokser som passerer en røngtenskanner og kjente fjes.

Hun forklarer hvordan i blogginnlegget "Single Div Drawings with CSS" hos Mozilla Hacks. I tillegg til mange av de samme teknikkene som Smith bruker, er hun flittig bruker av pseudo-elementer med :before og :after .

- Med én div i HTML, har jeg egentlig tre elementer å jobbe med, forklarer hun.

Og det å kunne lage flere dropshadows med bare én dropshadow-egenskap, og plassere de rundt omkring med en offset, lar henne også tegne mange former på bare ett element.

Boksene på dette samlebåndet beveger seg fra venstre til høyre, forbi en skanner som viser hva som er inni. Alt er laget med CSS, i ett eneste HTML-element, av Lynn Fischer på a.singlediv.com.
Boksene på dette samlebåndet beveger seg fra venstre til høyre, forbi en skanner som viser hva som er inni. Alt er laget med CSS, i ett eneste HTML-element, av Lynn Fischer på a.singlediv.com. Vis mer

Hva er vitsen? 🤦

Det gir liten mening å be en designer skrive grafikken til nettsidene dine med ren CSS. Det mener neppe hverken Smith eller Fischer.

«Ikke alt man lager må være direkte brukanes til noe.»

- Men ikke alt man lager må være direkte brukanes til noe. Noe kan være bare "for the heck of it", og for læring, sier Brevik til kode24.

For om du for eksempel lærer deg hvordan du tegner en katt med CSS, har du trolig lært deg ett og annet om hvordan du løser en mer praktisk grafisk utfordring på en nettside du lager, også.

- Teknikkene og konseptene man lærer seg er nyttige uansett, mener Brevik, og påpeker:

- Programmering kan være noe som man bare har det gøy med – og det er en verdi i seg selv.

See the Pen NES controller by Steve Deighton (@stevedeighton) on CodePen.

Hvor finner jeg dette? 💁

Brevik pleier å bruke codepen til å finne gode eksempler på alt man får til med CSS.

- De har en myrade av geniale eksempler og esoteriske demoer, sier han.

Du finner mange av dem under taggen "css-art", og du får som vanlig se all koden og resultatet på én gang.

Men ekstra gøy synes vi det er å selv inspisere disse kunstverkene i nettleseren. Det er da man begynner å virkelig skjønne hvordan det faktisk fungerer. Skru av en CSS-egenskap, endre noen verdier, fjern hele elementer - og sakte, men sikkert, begynner man å innse at nei; det er jo faktisk ikke juks.

Det er bare folk med mye tid, kunnskap, kunstnerferdighet og tålmodighet. Som har brukt timesvis på å tegne noe. I ren CSS.