Uppgiften

Det här projektet kommer att bygga på din kunskap om CCS-kung fu.

Fem ninjor har kommit till staden och behöver gömma sig innan någon ser dem. Använd din egna ninjaliknande CSS-kunskaper för att få dem till ett säkert ställe. Du kan flytta på ninjorna, och några av objekten på gatan också. Fort! Det är ont om tid!

screenshot

Steg 1: Träffa ninjorna

Låt oss flytta på en ninja

Pixlar beskriver den minsta fysiska punkt som skärmen kan visa. De används ofta för att beskriva skärmupplösning.

Steg 2: Låt oss prova att beskriva det lite annorlunda

Nu vet du hur man använder pixelpositionering. Detta är inte det enda sättet vi kan beskriva positionerna på skärmen, så låt oss titta på några andra alternativ som vi har.

100% beskriver hela bredden av tillgänligt skärmutrymme. Eftersom vi positionerar ninjor och andra objekt i relation till street_corner (gathörn), som är 600 pixlar bred, i vårt fall kommer 100% att vara samma som 600px. Om vi skulle rita ett större gathörn, till exempel 800pxbred, då skulle 100% betyda 800px. Beroende på sammanhanget, har storlekar som beskrivs med procent olika betydelse.

Steg 3: Ännu en enhetstyp

Som om vi inte redan hade tillräckligt med enhetstyper, kommer vi nu att prova ännu en! Du vet hur man använder pixlar och procent, så låt oss nu prova ems.

Emär en mätningstyp som lånats från typografin, som handlar om utseendet på bokstäver och text. En em är lika med det nuvarande typsnittet. Notera att i början av CSS:en sätter vi font-sizebody-elementet till 20px, så en em kommer att vara 20 pixlar.

Steg 4: Fort, göm ninjorna!

Nu när du vet hur man flyttar element på skärmen så är det dags att hjälpa ninjorna. Använd olika sätt att beskriva deras position. Kom ihåg, du kan även flytta på några av objekten. Vilken enhetstyp känner du dig mest bekväm med att använda? Hitta det bästa sättet att ordna bästa gömstället. Lycka till!

Saker att prova

  • Kan du komma på hur man gör så att ninjorna syns framför några av gatuobjekten? Vad skulle hända om du kopierade <img>-taggen för ninjan efter `´-taggen som visar objektet?
  • Kan du lägga till några fler objekt till scenen? Du kan lägga till bilder från din dator eller bilder som du hittar på internet.