Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
webbutv_10 [2012-12-05 11:04] Daniel Viström |
webbutv_10 [2013-01-21 15:36] Joakim Forsgren |
||
---|---|---|---|
Line 3: | Line 3: | ||
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 " | 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 " | ||
- | {{:galleri.png?600|}} | + | Exempel, den andra bilden har man fört musen över en bild.\\ |
+ | {{: | ||
+ | {{:fotogalleri_hover.jpg?400|}} | ||
Krav på uppgiften: | Krav på uppgiften: | ||
- | * Bildtexten ska ligga som värde på attributet ”title” på lämplig tag och inte i en separat tagg. | + | * 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. | + | * Under respektive bild ska bildtexten synas. |
* Ett externt typsnitt ska laddas in och användas till texten under bilderna. | * 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: | * När muspekaren hålls över en bild ska den och bildtexten förstoras (För högre betyg: | ||
Line 17: | Line 20: | ||
* :after | * :after | ||
* :hover | * :hover | ||
+ | * :focus | ||
* :nth-child | * :nth-child | ||
* attr() | * attr() | ||
Line 25: | Line 29: | ||
* z-index | * z-index | ||
* font-family | * font-family | ||
+ | * font-face | ||
Tips: | Tips: | ||
Line 37: | Line 42: | ||
* I övrigt får du utforma sidan som du vill. | * I övrigt får du utforma sidan som du vill. | ||
* Validera HTML5-koden och CSS-koden innan du skickar in. | * Validera HTML5-koden och CSS-koden innan du skickar in. | ||
- |