More Related Content
Similar to HT17 - DA156A - CSS, Layout 2
HT17 - DA156A - CSS, Layout 2
- 1. CSS – Layout(2) Tips & trix, samt nya tekniker
- 2. Dagens föreläsning • Tipsoch trix kring CSS • CSS reset • Repetition av arv (och viktighet av CSS-regler) • ”Nya” CSS 3-egenskaper • CSS-animationer • Layout med Flexbox • Layout med Grids • Demos! =)
- 3. Förinställda CSS-regler förwebbläsaren
- 4. Förinställda CSS-regler förwebbläsaren
- 5. Att skriva överwebbläsarens evenskaper?
- 6. Men detta ärju jobbigt – hur vet jag alla webbläsarens förinställda CSS-egenskaper? … och hur ändrar jag dessa?
- 7.
- 10. CSS reset Fördelar • Fullkontroll över sin CSS-kod • Tar bort ev. skillnader mellan webbläsare Nackdelar • Mer kod att skriva, då vi ej använder den ”färdiga” koden webbläsaren • Man måste tänka på att formge alla element som ska formges. • <strong> är nu inte fetstilt, t.ex. • Listor har inga nummer/punkter • Etc.
- 11. Att hålla kollpå vilka egenskaper som gäller Inte alltid så enkelt som man tror!
- 12. Ju mer specifiken seletor är, ju högre prioriteras den Tumregel
- 13.
- 14.
- 16.
- 18.
- 21.
- 22. Demo Rundade hörn, skugga,animationer, etc. + CSS reset
- 23.
- 25. Vad är flexbox? •Ett sätt att positionera ut element på en webbsida • Ett alternativ till att använda t.ex. float för att bygga layouter • Flexbox utgår från att positionerna ut barn-element i en ”container” på olika sätt.
- 26. Om Flexbox Fördelar • Enkeltatt anpassa elements storlek efter dess innehåll • Enkelt att centrera element (vertikalt & horisontellt) • Enkelt att sätta i vilken ordning som element ska visas • Dåligt stöd för äldre webbläsare, även ”nyare” versioner av IE (IE 11 har stöd) • Svårt att bygga ”bra” layouter, mer för att strukturera innehåll • Nackdelar
- 27.
- 28.
- 29. #container flex-direction • flex-direction:row; (standard) • flex-direction: row-reverse;
- 30.
- 31. #container flex-wrap • flex-wrap:nowrap; (standard) – Allt på samma rad • flex-wrap: wrap; • flex-wrap: wrap-reverse;
- 32. #container justify-content • justify-content:flex-start; • justify-content: flex-end; • justify-content: center;
- 33. #container justify-content • justify-content:space-between; • justify-content: space-around;
- 34. #container align-items • align-items:flex-start; (standard) • align-items: flex-end; • align-items: center;
- 35. #container align-items • align-items:baseline; • align-items: stretch;
- 36. #container align-content • Användsbara vid flera rader .container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- 37. Hur man positionerar.item https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- 38.