Webbteknik 1

6A-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.

6A-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.