HTML og CSS som kunst: slik lager du bilder med bare kode

HTML og CSS er språkene vi bygger nettsider med, men de kan også brukes til noe helt annet: å tegne bilder, portretter og illustrasjoner med ren kode – helt uten fotografier eller tegneprogrammer. Dette kalles gjerne CSS-kunst, og miljøet rundt har vokst fra en nisje for nerdete utviklere til en egen kunstform med årlige utfordringer, kjente verk og tusenvis av delte tegninger. Her forklarer vi hva HTML- og CSS-kunst er, hvordan teknikkene fungerer, hvem som står bak de mest kjente verkene, og hvordan du selv kan komme i gang.

Hva betyr det at HTML og CSS kan være kunst?

At HTML og CSS kan være kunst, betyr at man bruker de samme kodene som bygger vanlige nettsider til å tegne bilder i stedet for å lage tekst og menyer. HTML (HyperText Markup Language) er selve strukturen på en nettside – avsnittene, overskriftene og boksene. CSS (Cascading Style Sheets) er stilspråket som bestemmer hvordan alt dette ser ut: farger, størrelser, former, skygger og bevegelse.

I vanlig nettsidebygging brukes CSS for å plassere innhold pent på skjermen. I CSS-kunst snus dette på hodet: en «boks» får runde hjørner og blir et øye, en skygge blir en strek, en fargeovergang blir lys som faller på et ansikt. Resultatet er et bilde som ikke er et bilde i teknisk forstand – det finnes ingen bildefil, bare instruksjoner nettleseren tegner opp på nytt hver gang siden lastes.

En populær og ekstrem variant kalles single div-kunst, der hele motivet lages av ett eneste HTML-element. Det tvinger kunstneren til å løse alt med farger, skygger og pseudo-elementer (mer om det lenger ned), og har blitt en slags disiplin i seg selv.

Fra CSS Zen Garden til moderne CSS-kunst

Tanken om at CSS er et kreativt medium er ikke ny. Et av de viktigste tidlige prosjektene var CSS Zen Garden, lansert av den kanadiske designeren Dave Shea 8. mai 2003. Prosjektet besto av én og samme HTML-fil som designere fra hele verden fikk style på nytt – uten å endre et eneste tegn i HTML-en, kun ved å bytte ut CSS-filen. Resultatet var hundrevis av vidt forskjellige design bygget på identisk markup, og det viste tydelig hvor stor visuell kraft som lå i CSS alene.

Der CSS Zen Garden handlet om layout og design, dreide utviklingen seg etter hvert mot ren illustrasjon: å tegne konkrete motiver – dyr, ansikter, landskap – med kode. Da moderne CSS fikk egenskaper som fargeoverganger, formklipping og avanserte skygger, ble det mulig å lage stadig mer detaljerte bilder. Tidlige samlinger som http://www.html-art.com/ var med på å spre ideen om nettleseren som et lerret. I dag deles slike verk daglig på nett, og noen av dem er så forseggjorte at de ligner håndmalte oljemalerier.

Hvordan lager man kunst med bare HTML og CSS?

CSS-kunst bygges ved å kombinere noen få grunnteknikker på kreative måter. Du trenger ikke mestre alle for å begynne, men det hjelper å vite hva hvert verktøy gjør.

Former og figurer med border-radius og clip-path

Alt på en nettside starter som en rektangulær boks. Med egenskapen border-radius kan du runde av hjørnene og lage sirkler, ovaler og myke «klatter». Vil du ha mer uvanlige former – en trekant, en stjerne, en sekskant – bruker du clip-path, som klipper boksen ned til nøyaktig den omrisset du oppgir, ofte som en liste med koordinater. Clip-path er grunnlaget for de fleste skarpe, geometriske motivene i CSS-kunst.

box-shadow som tegneverktøy

Egenskapen box-shadow lager vanligvis en skygge bak et element, men ett og samme element kan ha mange skygger samtidig, hver med egen posisjon og farge. Det betyr at du kan «male» med skygger: legg hundrevis av små, fargede skygger ved siden av hverandre, og du har i praksis et rutenett – perfekt for pikselkunst. Rekkefølgen skyggene oppgis i avgjør hva som havner øverst, akkurat som lag i et tegneprogram.

Gradienter for farge, lys og skygge

Gradienter er jevne overganger mellom farger. En linear-gradient går i en rett retning, en radial-gradient stråler ut fra et punkt, og en conic-gradient dreier rundt et senter. Gradienter brukes ikke bare til bakgrunner: de gir rundhet og volum til former, skaper lysrefleks på en kule, eller tegner stripete og rutete mønstre. Mange av de mest realistiske CSS-bildene er i praksis lag på lag med gradienter.

Pseudo-elementer: to ekstra lag per element

Med pseudo-elementene ::before og ::after får hvert HTML-element to usynlige «barn» du kan forme og fargelegge fritt. I single div-kunst er dette avgjørende: ett div-element blir i praksis til tre tegneflater. Plasserer du dem absolutt (fast posisjon i forhold til hovedelementet), kan du flytte, rotere og animere dem uten å påvirke resten av motivet.

Bevegelse med transform og animasjon

CSS kan også sette kunsten i bevegelse. Med transform kan du rotere, skalere, skråstille og flytte elementer, og med @keyframes og animation kan du definere hvordan noe endrer seg over tid. Slik kan øyne blunke, lys blinke og figurer vaie – uten en eneste linje JavaScript.

Single div-kunst og Divtober

Single div-kunst er grenen av CSS-kunst som har fått mest oppmerksomhet de siste årene, og mye av æren går til utvikleren og illustratøren Lynn Fisher (kjent på nett som lynnandtonic). Nettstedet hennes, A Single Div, er en samling illustrasjoner der hver eneste tegning er laget av ett enkelt HTML-element stylet med CSS. Prosjektet har pågått i mange år og har blitt et referansepunkt for hvor langt man kan dra teknikken.

Fisher står også bak Divtober, en årlig utfordring i oktober inspirert av tegneutfordringen Inktober. Regelen er enkel: lag CSS-kunst av kun ett div-element (eller et annet enkelt HTML-element), én tegning om dagen gjennom måneden. Det som begynte med en håndfull deltakere, samlet etter hvert dusinvis av utviklere som delte daglige single-div-tegninger, og utfordringen har blitt en fast tradisjon i frontend-miljøet.

Begrensningen – ett element – er nettopp poenget. Når du ikke kan legge til flere «bokser», må du bli oppfinnsom med skygger, gradienter og pseudo-elementer, og det tvinger frem kreative løsninger du ellers aldri ville funnet på.

Kjente CSS-kunstverk: Diana Smith og «Pure CSS Francine»

Det mest omtalte enkeltverket i sjangeren er sannsynligvis «Pure CSS Francine» av utvikleren Diana Smith (A Single Div-stilen til tross, dette verket bruker flere elementer). Francine, publisert i mai 2018, er et portrett i stil med et oljemaleri fra 1700-tallet – en rokokko-tolkning – laget utelukkende med håndskrevet HTML og CSS. Verket vakte stor oppsikt og ble omtalt av blant andre Laughing Squid og flere designmagasiner.

Smith jobbet etter strenge selvpålagte regler: hun skrev hvert element for hånd, brukte kun en enkel teksteditor og nettleserens utviklerverktøy, og begrenset bruken av SVG ved å plotte former med koordinater og bezier-kurver manuelt. Fordi bildet er ren kode, tegnes det opp litt forskjellig i ulike nettlesere – det var laget med Chrome som mål, og gjengis også godt i Firefox, mens eldre nettlesere kunne gi nesten kubistiske resultater.

Francine er ikke et engangstilfelle. Smith har laget en hel serie, blant annet «Pure CSS Lace», «Pure CSS Zigaro» og «Pure-CSS Vignes». Lace alene består av nær 2 000 linjer CSS. All koden er lagt ut åpent på GitHub, slik at andre kan studere hvordan den er bygget opp – en viktig grunn til at verkene har hatt så stor læringsverdi i miljøet.

Hvor deler og finner du CSS-kunst?

Det klart viktigste samlingsstedet for CSS-kunst er CodePen, en nettbasert lekeplass der du kan skrive HTML, CSS og JavaScript og se resultatet live i nettleseren. Her deler utviklere «pens» – små kodeeksempler – helt åpent, slik at du kan se, kopiere og lære av koden bak et bilde. CodePen arrangerer også egne utfordringer, blant annet uker viet CSS-illustrasjon.

I tillegg finner du mye CSS-kunst på utviklerfellesskap som DEV, i oppsummeringer rundt Divtober, og i kuraterte samlinger av CSS-illustrasjoner. Vil du lære av de beste, er den enkleste veien å åpne kildekoden til et verk du liker og studere hvordan hvert lag er satt sammen.

Et lite varsel verdt å nevne: enkelte tidlige nettsteder som en gang viste frem HTML- og CSS-kunst, finnes ikke lenger i opprinnelig form. Domener skifter eier, og noen peker i dag til helt urelatert innhold. Hold deg derfor til aktive, kjente kilder som CodePen og A Single Div når du leter etter ekte eksempler.

Hva trenger du for å komme i gang?

Du trenger overraskende lite for å begynne med CSS-kunst – ingen dyre programmer og ingen designutdanning. Slik kommer du i gang:

1. En nettleser og en editor. En moderne nettleser (Chrome, Firefox eller tilsvarende) og hvilken som helst teksteditor holder. Nettbaserte verktøy som CodePen lar deg hoppe rett i gang uten å installere noe.
2. Grunnleggende HTML og CSS. Du bør kunne lage et element og style det. Hvis du er fersk, er det lurt å først lære de vanlige byggeklossene – for eksempel hvordan du lager en HTML-lenke og hvordan du sentrerer skrift og innhold med HTML og CSS.
3. Start enkelt. Begynn med én grunnform – en sirkel, en sol, en kopp – og legg til detaljer gradvis. Prøv å gjenskape et enkelt motiv fremfor å tegne fritt.
4. Bruk utviklerverktøyene. Nettleserens innebygde verktøy lar deg justere verdier live og se endringen med en gang, noe som sparer mye prøving og feiling.
5. Lær av andres kode. Åpne kildekoden til verk du beundrer, og bygg om på dem. Det er slik de fleste i miljøet har lært.

Vil du heller bruke ferdige bilder i stedet for å kode dem selv, finnes det gode alternativer – se oversikten vår over lisensfrie og gratis bilder du kan bruke på nettsiden eller bloggen.

Vanlige feil når du lager CSS-kunst

De fleste begynnere går i de samme fellene. Å kjenne dem på forhånd sparer deg for mye frustrasjon:

• For ambisiøst motiv for tidlig. Et detaljert portrett som første prosjekt ender som regel i oppgitthet. Start lite og bygg ferdigheten gradvis.
• Bruker JavaScript eller bilder «litt». Poenget med ren CSS-kunst er at alt er HTML og CSS. Sniker du inn et bilde eller et skript, er det ikke lenger CSS-kunst – og mye av læringsverdien forsvinner.
• Glemmer nettleserforskjeller. Avanserte egenskaper kan gjengis ulikt i forskjellige nettlesere. Test i mer enn én, og vit at eksperimentell CSS kan se annerledes ut hos andre.
• Kaotisk kode. Mange skygger, gradienter og pseudo-elementer blir fort uoversiktlig. Navngi og kommenter underveis, så finner du frem senere.
• Ignorerer tilgjengelighet. Ren dekorativ CSS-kunst bør ikke forvirre skjermlesere. Hold det rent dekorative adskilt fra meningsbærende innhold på en ordentlig nettside.
• Overdreven filstørrelse og ytelse. Tusenvis av box-shadow-verdier kan gjøre en side treg. Vakkert er bra, men hold et øye med ytelsen hvis kunsten skal ligge på en ekte side.

HTML- og CSS-kunst sammenlignet med andre metoder

CSS-kunst er bare én av flere måter å lage grafikk til nett på. Hvilken som passer best avhenger av hva du skal lage og hvorfor. CSS-kunst skinner som læringsøvelse, kreativ utfordring og lett dekorasjon, men for kompliserte illustrasjoner til produksjon er ofte andre verktøy mer praktiske. Tabellen under sammenligner de vanligste metodene.

Hvem passer CSS-kunst for?

CSS-kunst passer best for dem som vil forstå HTML og CSS på et dypere nivå, og for alle som liker å løse kreative problemer med kode. For nybegynnere er det en overraskende effektiv måte å lære på: når du har tegnet en katt med border-radius og box-shadow, sitter egenskapene mye bedre enn etter en tørr gjennomgang.

Erfarne frontend-utviklere bruker det som kreativ pause og for å strekke ferdighetene sine, mens designere kan utforske hva som faktisk er mulig i nettleseren. Skal du derimot lage logoer, ikoner eller detaljerte illustrasjoner til en kunde, vil SVG eller et tegneprogram som regel være raskere og mer robust. Vil du friske opp det visuelle uttrykket på din egen side, har vi også en egen guide til hvordan du fornyer og oppdaterer nettstedet ditt, og tips til WordPress-design for norske bloggere.

Vanlige spørsmål (FAQ)

Er CSS-kunst «ordentlig» kunst?

Ja, i den forstand at det krever både teknisk håndverk og kunstnerisk blikk. Verk som «Pure CSS Francine» har blitt omtalt i kunst- og designmedier nettopp fordi de forener kode og estetikk. Samtidig er mye CSS-kunst først og fremst en lærerik og lekende øvelse – begge deler er like gyldige.

Trenger jeg å kunne programmere for å begynne?

Du trenger ikke være programmerer, men du bør kunne grunnleggende HTML og CSS: lage et element og style det med farger og størrelser. Resten lærer du underveis ved å eksperimentere. Mange starter helt ferske og lærer egenskapene gjennom selve tegningen.

Hva er single div-kunst?

Single div-kunst er CSS-kunst der hele motivet lages av ett eneste HTML-element. Siden du ikke kan legge til flere bokser, må alt løses med farger, gradienter, skygger og de to pseudo-elementene ::before og ::after. Lynn Fishers A Single Div er det mest kjente eksempelet.

Hva er forskjellen på CSS-kunst og SVG?

CSS-kunst tegnes med stilegenskaper på HTML-elementer, mens SVG er et eget format laget spesielt for vektorgrafikk. SVG er som regel mer presist og praktisk for ekte illustrasjoner, mens CSS-kunst er mer en kreativ utfordring og en måte å lære CSS på. Begge gir skarpe bilder uansett skjermstørrelse.

Virker CSS-kunst likt i alle nettlesere?

Ikke alltid. Enkle motiver ser stort sett like ut overalt, men avansert kode som bruker nyere eller eksperimentelle egenskaper kan gjengis forskjellig fra nettleser til nettleser. Derfor tester mange kunstnere verkene sine i flere nettlesere og oppgir gjerne hvilken de er optimalisert for.