Hvordan lage en snømann med kun ett HTML element og noe CSS

Hvorfor?

Dette er jo ikke noe du får bruk for i jobb? Nei, men det er kult. Hvorfor male ett bilde når du kan ta fram kamera? Det er en utfordring å kun bruke ett element og vil også tvinge deg til å forbedre dine CSS skills!

Eneste HTML du trenger

<div class="snowman"></div>

Rull en snøkule


        .snowman {
          position: relative;
          height: 150px;
          width: 150px;
          border-radius: 42%;
          background: #e5f2f8;
        }

Gjennbruk formen

Med

box-shadow

kan vi gjennskape formen i forskjellige størrelser, farge og blur.


          box-shadow: 
            /*middle circle*/ 
            0 135px 0 12px #e5f2f8, 
            /*bottom circle*/ 
            0 270px 0 39px #e5f2f8;

Så gjør vi de litt finere med border og skygge


          border: 4px solid #333;
          border-bottom-width: 7px;
          box-shadow: 
              /*head shadow*/ 
              inset -3px -12px 0 0 #adc5d6,
              /*middle circle*/ 
              -3px 135px 0 12px #e5f2f8, 
              0 142px 0 15px #adc5d6,
              0 142px 0 21px #333, 
              /*bottom circle*/ 
              -3px 270px 0 39px #e5f2f8,
              0 285px 0 45px #adc5d6, 
              0 285px 0 52px #333;

Detaljer med background

La oss lage ett ansikt. Dette gjør vi i

background

med flere lag, merk at vi da kun kan style elementet og ikke skyggene, så i dette tilfellet ansiktet. Men

linear-gradient

kan vi tegne streker, firkanter og trekanter og med

radial-gradient

kan vi tegne sirkler og ovaler.


          background: 
              /*left eye*/ 
              radial-gradient(circle at 45px 45px,#7d7f82 4px, transparent 5px),
              radial-gradient(circle at 48px 48px, #323438 10px, transparent 11px),
              radial-gradient(circle at 48px 48px, black 12px, transparent 13px),
              /*right eye*/
              radial-gradient(circle at 99px 45px, #7d7f82 4px, transparent 5px),
              radial-gradient(circle at 102px 48px, #323438 10px, transparent 11px),
              radial-gradient(circle at 102px 48px, black 12px, transparent 13px),
              /*mouth*/ 
              radial-gradient(circle at 34px 105px, black 6px, transparent 7px),
              radial-gradient(circle at 45px 117px, black 6px, transparent 7px),
              radial-gradient(circle at 60px 120px, black 6px, transparent 7px),
              radial-gradient(circle at 75px 122px, black 6px, transparent 7px),
              radial-gradient(circle at 90px 120px, black 6px, transparent 7px),
              radial-gradient(circle at 105px 117px, black 6px, transparent 7px),
              radial-gradient(circle at 115px 105px, black 6px, transparent 7px),
              /*carrot nose*/
              linear-gradient(70deg, transparent 41%, black 45%, orangered 55%) 68px 76px / 7px 22px no-repeat,
              linear-gradient(-70deg, transparent 41%, black 45%, orangered 55%) 75px 76px / 7px 22px no-repeat,
              radial-gradient(circle at 75px 75px, orangered 7px, black 8px, transparent 9px),
              /*background*/ 
              #e5f2f8;

Hatt og armer

Nå trenger vi å utvide snømannen, men vi begynner å gå tom for muligheter. Da kan vi bruke

::before

::after

for to pseudo elementer som kan ha sin egen form, skygger og bakgrunn.

Flosshatt


        .snowman::before{
            content: '';
            position: absolute;
            width: 150px;
            height: 115px;
            top: -105px;
            background: 
                radial-gradient(ellipse at 50% 0, transparent 50%, rgb(10, 10, 10) 51%) 13px 93px / 120px 10px no-repeat,
                linear-gradient(95deg, #c3c3c3, #c3c3c3) 30px 75px / 82px 25px no-repeat,
                linear-gradient(95deg, black, black) 27px 72px / 88px 31px no-repeat,
                radial-gradient(ellipse, rgb(10, 10, 10) 65%, transparent 66%) 3px 82px / 144px 30px no-repeat,
                radial-gradient(ellipse, black 65%, transparent 66%) 0 79px / 150px 36px no-repeat,
                radial-gradient(ellipse, rgb(10, 10, 10) 50%, transparent 51%) 7px 7px / 131px 15px no-repeat,
                linear-gradient(to right, transparent 75px, #ffffff42 85px 88px, transparent 110px) 0 15px no-repeat,
                linear-gradient(87deg, transparent 30px, black 31px) 0 15px / 75px 90px no-repeat,
                linear-gradient(95deg, black 43px, transparent 44px) 75px 15px / 75px 90px no-repeat;
        }

Kvister


      .snowman::after{
          content: '';
          position: absolute;
          z-index: -1;
          top: 135px;
          left: -120px;
          width: 405px;
          height: 45px;
          border-bottom: 4px solid #812121;
          transform: rotate(10deg);
          background: 
            /*left hand*/
            linear-gradient(44deg, transparent 35%, #812121 36% 49%, transparent 50%) 0 22px / 15px 30px no-repeat,
            linear-gradient(60deg, transparent 35%, #812121 36% 49%, transparent 50%) 1px 16px / 16px 31px no-repeat,
            /*right hand*/
            linear-gradient(-44deg, transparent 35%, #812121 36% 49%, transparent 50%) 390px 22px / 15px 30px no-repeat,
            linear-gradient(-60deg, transparent 35%, #812121 36% 49%, transparent 50%) 385px 16px / 16px 31px no-repeat;
      }

Tada🎉

Det var en nydelig snømann med kun en

<div>

og 77 linjer CSS!

Kanskje du nå er flinkere til å bruke former, borders, skygger, gradient colors og pseudo elements i CSS som du kanskje vil få bruk for i ekte prosjekter? Jeg har hvertfall blitt det etter å ha jobbet fram denne snømannen.