I denna laboration ska du öva på att skapa några visuella effekter med hjälp av egenskaperna transition och transform.
Laboration L6a-1 — Transition
Vi börjar med några övningar på transition, som används för att skapa en övergång vid en förändring av en stil för ett element. Det man specificerar är vilken egenskap som förändras och hur lång tid övergången ska ta
Förberedelser
- Öppna mappen L6a-1 i Visual Studio Code (VSC).
- Öppna filen index.html och style.css i VSC samt öppna sidan i Live Server.
- Studera den kod som finns i HTML- och CSS-filerna, så att du blir insatt i den.
Övergångens aktivering och sluttillstånd
- Lägg in en regel för
#testbox:hover med border-radius: 35px;
- Testa i webbläsaren och se att boxen får rundade hörn, då du för muspekaren över den.
Övergångens egenskaper
- Lägg in
transition-property: border-radius; i regeln för #testbox.
- Lägg också in
transition-duration: 2s; i samma regel.
- Testa i webbläsaren och för muspekaren över boxen. Prova att variera tiden i
transition-duration.
- Lägg även till
transition-timing-function: ease-in-out;
- Testa i webbläsaren och prova några olika funktioner i
transition-timing-function. På sid. 520 i boken Learning Web Design, kan du se vilka funktioner som finns. Det kan dock vara svårt att se skillnad på dem.
- Lägg till
transition-delay: 1s; för att prova detta. Ta sedan bort egenskapen igen.
- Denna egenskap lägger in en fördröjning innan övergången startar.
Flera förändringar
- Lägg in
border-width: 6px; i regeln för #testbox:hover och testa i webbläsaren.
- Ändra till
transition-property: all; i regeln för #testbox och testa igen i webbläsaren.
Övergång i bilderna
- Lägg in
opacity: 0.5; i regeln för nav img.
- Skriv också en regel för
nav img:hover med opacity: 1;
- Lägg in
transition-property: opacity; och transition-duration: 2s; i regeln för nav img.
- 2 sekunder är kanske för lång tid, men valdes här för att övergången tydligt ska synas. Prova gärna med andra tider.
Laboration L6a-2 — Transform
Med transform kan man vrid, vända och skala ett element. Du ska först öva på detta och sedan kombinera det med transition.
Förberedelser
- Öppna mappen L6a-2 i Visual Studio Code (VSC).
- Öppna filen index.html och style.css i VSC samt öppna sidan i Live Server.
- Studera den kod som finns i HTML- och CSS-filerna, så att du blir insatt i den.
Rotera
- Lägg in
transform: rotate(10deg); i regeln för #nav1 img:hover. Prova i webbläsaren.
- Lägg även in
transform-origin: top left; och prova i webbläsaren.
- Prova med olika värden för båda egenskaperna.
Förskjuta
- Lägg in
transform: translate(5px, 15px); i regeln för #nav2 img:hover.
- Prova även andra värden i egenskapen.
Skala
- Lägg in
transform: scale(2); i regeln för #nav3 img:hover.
- Prova även
scaleX och scaleY samt negativa värden, t.ex. transform: scaleX(-1); för att spegelvända bilden.
- Vill du både förstpra och spegevända bilden, kan du kombinera flera värden,
t.ex. transform: scale(2) scaleX(-1);
Vrida
- Lägg in
transform: skew(10deg, 20deg); i regeln för #nav4 img:hover.
Skala med en övergång
- Lägg in
transform: scale(2); i regeln för #nav5 img:hover.
- Lägg också in
transition: transform 2s; i regeln för nav5 img.
- Testa i webbläsaren och se hur bilderna förstoras, då du för muspekaren över dem.
- För att den bild som skalas alltid ska komma längst fram, kan du lägga in
z-index i reglerna. Använd ett lågt värde, t.ex. 1, i regeln för #nav5 img och ett högre värde, t.ex. 100, i regeln för #nav5 img:hover.
- Du måste också lägga in
position: relative i regeln för #nav5 img, om z-index ska fungera.
Förändring av två olika egenskaper
- Lägg in
transform: translate(5px, 5px); och box-shadow: 1px 1px 5px #333; i regeln för #nav6 img:hover.
- Lägg också in en första skugga med
box-shadow: 6px 6px 10px #333; i regeln för nav6 img.
- Lägg in
transition: all 1s; i regeln för #nav6 img.
- I detta fall gör du dels en förskjutning åt höger och nedåt med 5px, samtidigt som du gör skuggan 5px mindre.
Klar
Gå nu vidare med föreläsning F6b och F6c och därefter laboration L6c.