Differences
This shows you the differences between two versions of the page.
webbutv_10 [2013-01-21 15:36] Joakim Forsgren |
webbutv_10 [2022-07-18 13:20] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Fotogalleri ====== | ||
- | Du ska skapa ett fotogalleri med bilder som ser ut att ligga utslängda på en yta. När muspekaren hålls över en bild eller om man " | ||
- | |||
- | Exempel, den andra bilden har man fört musen över en bild.\\ | ||
- | {{: | ||
- | {{: | ||
- | |||
- | |||
- | Krav på uppgiften: | ||
- | * Bildtexten ska ligga som värde på attributet ”title” på lämplig tag och inte i en separat tagg. | ||
- | * Under respektive bild ska bildtexten synas. (man kan inte plocka | ||
- | * Ett externt typsnitt ska laddas in och användas till texten under bilderna. | ||
- | * När muspekaren hålls över en bild ska den och bildtexten förstoras (För högre betyg: | ||
- | * Om man använder tangentbordet och ”tabbar” till en bild (ger den fokus) ska samma sak hända som då muspekare hålls över bilden. | ||
- | * Bilderna ska ha en skugga. | ||
- | * Sidan ska fungera i minst en webbläsare (men gärna i flera) Ange vilka webbläsare det fungerar i när du lämnar in. | ||
- | |||
- | CSS-egenskaper och selektorer som du troligtvis kommer att behöva använda (läs på om dessa!): | ||
- | * :after | ||
- | * :hover | ||
- | * :focus | ||
- | * :nth-child | ||
- | * attr() | ||
- | * content | ||
- | * transition | ||
- | * box-shadow | ||
- | * transform | ||
- | * z-index | ||
- | * font-family | ||
- | * font-face | ||
- | |||
- | Tips: | ||
- | * Övergångar med ”transitions” påverkar alla egenskaper som ändras på det objekt som har transition satt. | ||
- | * Prefixen –moz-, -webkit-, -o-. behöver användas för många av egenskaperna. Exempelvis: ”-moz-transform”. | ||
- | * Förutom att använda webbläsarspecifika prefix ska du använda de CSS3-standardiserade namnen, exempelvis ”transform”. | ||
- | * Troligtvis vill du låta transitionen påverka samtliga egenskaper, det vill säga ”all” | ||
- | * För att få ”slumpvis” fontstorlek och rotation kan du använda nth-child-selektorn för att rotera exempelvis var 3e bild -5 grader och var 5e bild 10grader etc. | ||
- | * Du kommer att märka att du inte kan använda pseudoklassen ”after” och css-egenskapen ”content” på en img-tagg vilket gör att det kan vara lämpligt att lägga title-attributet på en annan tagg än img. | ||
- | * Sätt position: | ||
- | * Tänk på att många av egenskaperna är experimentella i webbläsarna vilket gör att buggar kan förekomma. | ||
- | * I övrigt får du utforma sidan som du vill. | ||
- | * Validera HTML5-koden och CSS-koden innan du skickar in. |