CSS slutter aldri å overraske. Noen ganger ramler man over noe som man i utgangspunktet ikke ser nytteverdien av, men som kombinert med litt kreativitet produserer et interessant resultat.

Fra det ene til det andre

Før du leser videre, hvordan ville du gått frem for å få til dette? Det er mange måter å lage en slik effekt på, men her er det kun brukt CSS. Det eneste som endrer seg mellom tilstandene er navnet på én klasse, resten fikser nettleseren selv.

Klippe med CSS

Nettet er i all hovedsak firkantet. Med CSS sin clip-path så kan du i praksis klippe de firkantede boksene akkurat slik du vil. Her er noen enkle eksempler:

<div style="clip-path: circle(20px at 24px 25px); ... "></div>
<div style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); ..."></div>
<div style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%); ..."></div>

Slike former kan man jo lage med SVG, så hva er greia med clip-path? Vel, du kan klippe hva som helst (inkludert SVG-elementer). Et naturlig bruksområde er å klippe bilder, f.eks for å lage runde profilbilder som er så populært for tiden.

Bonusen er at clip-path er en CSS-verdi som lar seg animere med CSS-transitions. Da har vi alt det vi trenger.

TRYKK PÅ MEG

HTMLen til trekanten over er dette:

<div id="eksempel" 
     class="steg-1"
     onclick="...">
  <div class="trekant">TRYKK PÅ MEG</div>
</div>

Stylingen er slik:

<style>
  .trekant {
    /* Sett en høyde og bredde, samt farge */
    width: 100px;
    height: 100px; 
    background: pink;
 
    /* Denne sørger for at clip-pathen animerer */
    transition: all 2s ease;
  
    /* Småjusteringer */
    margin-left: 50px;
    font-size: 0.5rem; 
    text-align: center;
  }

  /* Tilstand til steg 1 */
  .steg-1 > .trekant {
    clip-path: polygon(0% 0%, 100% 0, 50% 100%);
    /* Webkit trenger litt ekstra hjelp */
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  /* Tilstand til steg 2 */
  .steg-2 > .trekant {
    clip-path: polygon(0% 50%, 50% 100%, 100% 50%);
    -webkit-clip-path: polygon(0% 50%, 50% 100%, 100% 50%);
  }
</style>

For at transisjonen skal fungere så må du ha likt antall punkter i polygonene.

Click-handler er tatt rett ut fra 2000-tallet. Det eneste den gjør er å alternere mellom stegene ved å bytte ut klassen.

((e,obj) => {
  if (obj.className==='steg-1') { 
    obj.className = 'steg-2'
  } else { 
    obj.className = 'steg-1'
  }})(event,this)

Verre er det ikke. Dette er alle byggeklossene som skal til for å lage animasjonen mellom treet og hjorten.

clip-path er støtta i de fleste nettlesere, men enn så lenge så trenger webkit et prefiks (-webkit-clip-path).

Oppsummert

Med clip-path så kan du transformere en vilkårlig sammensatt figur fra en form til en annen. Det eneste du trenger å gjøre er å deklarere hvordan hver figur skal se ut, så fikser nettleseren resten for deg!

For de ekstra interesserte

For å generere CSS-formene over så jukset jeg litt med et lite program skrevet i ClojureScript. Du kan lese kildekoden om du vil. Formene i eksemplet tegnet jeg for hånd. Det neste jeg skal gjøre er å lage et program som transformerer vilkårlige bilder til en datastruktur med trekant-koordinater.