INTRO HTML & CSS
– ET OVERBLIK
NYTTIGE KODESTUMPER & -STYKKER
INTRO HTML & CSS
BOXMODELLER
BYG WEBSITE UD FRA FORLÆG
Boxmodel A vol#1 Boxmodel A vol#2 Boxmodel A vol#3 Boxmodel B vol#1 Boxmodel B vol#2 Boxmodel B vol#3 Boxmodel C vol#1 Boxmodel C vol#2 Boxmodel C vol#3 Boxmodel C vol#4 Boxmodel D vol#1 Boxmodel D vol#2 Boxmodel D vol#3 Boxmodel D vol#4
Boxmodel E er en testopgave
- så den ligger ikke her :-)
Boxmodel F vol#1 Boxmodel F vol#2 Boxmodel F vol#3
BOX-SIZING CSS3:
Box-sizing (css3)POSITION
Absolut possition (saks)CSS / HOVER
[Håver]...
[Huuuuver] betyder støvsuger...
HOVER-effekt på "ingenting" HOVER-effekt på text og billede samtidig (valid) HOVER-effekt på text og billede samtidig (ikke valid) SHOW/HIDE DIV
MED CSS ver1 MED CSS ver2 MED CSS ver3 MED CSS ver4 MED CSS ver5 MED CSS ver6 MED CSS ver7 MED Behaviors **!!* TILES
Tiles samling Transform mv Transition og kvadrat MENUER
MENUER LAVES I LISTER
LODRET – rød LODRET – grøn LODRET – runde hjørner VANDRET BAGGRUNDSBILLEDE m. RAKET DROPDOWN – grøn version LODRET med list-style-image LODRET med transition DROPDOVN – med current mv. ... irriterende :-)
DROPDOWN – css3 – Runde hjørner FLEXIBEL BREDDE Liste centreret (display)
TRANSITIONS
Transitions hastighederLAYOUT
Frugt og grønt kalender Grid-area: Klassisk 1-2-4 opsætning FOOTER TIL BUND (tidlig version med push) FOOTER TIL BUND (Fixed possition) Billede ud over kant – Insekt Tekstkolonner med text-indent(uden tabel)
FORMATERING
Pile med cssBAGGRUNDSBILLEDER
Æble – kan collape efter behov Skov – cover, css3 Hav – procent, css3 (FY!) JavaScript
REMOTE ROLLOVER – Retro Simpel JS remote rollover TABEL
TABEL – alkohol TABEL – bornholm – JavaSript TYPOGRAFI
IKKE-formatering (dogme) Finjustering af margin h1, h2 og p Finjustering af margin på en liste H1 m baggrund og float Ord-collage Ord-collage m. rotate Ord-collage: gør-det-selv Google API Tekststørrelser px, em og rem (samlet) Tekststørrelser pix Tekststørrelser Em Tekststørrelser Rem Unicial (Dropcaps) (Firstletter) Unicial (Dropcaps) (span) Kolonner/spalter (Columns) Citater (Quotes) – sprog og koder Citater (Quotes) – styling SIMPLE JQUERYS
Vandret Scroll RESPONSIVE STUMPER
4 simple bokse... Grid (Elliot Jay Stocks) Eks. A: Fluid layout Eks. A: Fluid og Queries Eks. B: Fixed layout Eks. B: Fluid layout Eks. B: Fluid og Queries Cuba: Ufleksible billeder Cuba: Fleksible billeder Sko:
Ufleksible billeder Sko: Fleksible billeder Større demo (Mad!) Øvelsesfiler (zip) FORMULERER
Vi henviser til... BOOTSTRAP
Grid - demo Prøv selv - Classes Prøv selv - Grid Prøv selv - Layout Prøv selv - navbarer Øvelsesfiler(zip) UI ANIMATION
Smooth scroll til anker(js) Brugervenlig, animeret menu 1 FLEXBOX
Klassisk layout (extra wrapper) Klassisk layout (simpel) Centrer lodret - footer Centrer lodret - wrapper Klassisk 1-2-4 opsætning: IKKE løst her... GRIDS
Gør-det-selv i css
Grid-area: demo
CSS grid-area: tutorials (eng)
Grid-area: Klassisk 1-2-4 opsætning
CLEAR-PROBLEMATIK
Uden clear Klassisk .clearfix Clear på footer :after VIDEO
Tutorial: Mega nem redigering i IMovie (eng)
Line K
på Youtube
Forklaringer på diverse... LINES MORGENBOOSTERE
Trænger I til en pause?Sjov, alvor og stof til eftertanke...
EXTERNE LINKS
FDIM.DKStatistikker over webbrowsere, skærm-opløsninger mv. WWW.W3.ORG
(All) WWW.VALIDATOR.W3.ORG
(HTML-check) WWW.JIGSAW.W3.ORG
/CSS-VALIDATOR
(CSS-check) w3schools.com css-tricks.com codepen.io