+ Interaktion 2 Stefan Grage

+ DAGENS MÅL  CSS recap  CSS3 Status & anvendelse  Baggrunde, kanter, skygger, opacity, gradients…  Transitions  Web fonts  Media Queries (Adaptivt design)  Evt. “repetition”?

+ Men først… I tirsdags  Vi arbejdede med HTML5 & grid systemer…  Er der noget, der har drillet med opgaverne?  Noget vi skal tage op?

+ Domæner!  I skulle alle gerne have et brugernavn! (det som i bruger når i logger på fronter mm.)  Log på jeres domæne via FTP  Server: brugernavn.keaweb.dk  Username: brugernavn  Password: Hvis i ikke har ændret det siden studiestart: kea123456# hvor er de første 6 cifre i jeres CPR-nr.

+ CSS recap

+ CSS h1 {color: blue;}

+ CSS h1 {color: blue;} selector

+ CSS h1 {color: blue;} selector declaration

+ CSS h1 {color: blue;} selector declaration property

+ CSS h1 {color: blue;} selector declaration property value

+ Hvorfor var det interessant?  CSS3 byder på en masse nyt!  Man kan meget mere, med langt mindre kode end tidligere!  Avancerede selectorer  Flere baggrunde på et element (parallax)  Flere properties på: Backgrounds, borders, gradients…  CSS transforms  CSS transitions  CSS Forms  Web fonts  Media queries (tidligere kun media types)  …

+ CSS3 – status & anvendelse

+ CSS3 Status  Udviklingen af CSS3 Styres af W3C (Ligesom HTML5)  CSS3 er splittet op i moduler, der kan færdiggøres løbende:  Tidligere var CSS én stor specifikation (langsomt)  Modulerne udvikles i 4 trin:  Working Draft  Candidate Recommendation  Proposed Recommendation  W3C Recommendation

+ Browser-producenternes magt  Browserproducenterne står for at implementere CSS3 moduler – lidt drilsk, for de moduler, der ik’ er W3C recommmendations  Browser producenterne implementerer CSS3 v.hj.a. “vendor prefixes”:  Safari & chrome: -webkit-propertynavn  Firefox: -moz-propertynavn  Opera: -o-propertynavn  IE: ms-propertynavn  Fremtiden: propertynavn

+ Hvordan kan vi så anvende CSS3?  Browserproducenterne er begyndt at implementere CSS3  Nogen halter bagud… (IE)  Check: og  Brug progressivt! Progressive ehancement: Ikke “need to have” – kun “nice to have”

+ CSS3 – udvalgte properties

+ CSS3 background  CSS3 Baggrunde:  Se background vendor prefix stack! html, body{ height: 100%; font-size: 100%; font-family: sans-serif; background: url(backgr01.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

+ Background-color  Opacitet via ny farve-definition: rgba()  Husk fallback farve!  header, nav,.hero-unit,.latestnews article,.articles article, footer{ background-color: #000; /*fallback farve*/ background-color: rgba(0, 0, 0, 0.6); /*#000 i rgb med opacity 0.7*/ color:#CCC; margin-bottom: 20px; }

+ Text-shadow  header h1{ color: #f90; font-size: 200%; text-shadow: 2px 2px 1px rgba(255, 255, 255, 0.5); /*top, left, blur, color*/ }

+ Border-radius   Generator: /*borders*/ Element-selector{ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

+ CSS Gradients  Er ikke til at holde styr på. Hjælp!!:  eller  Radial gradients også en mulighed… background: pink; background: linear-gradient(bottom, rgba(66,7,33,0.5) 11%, rgba(143,17,78,0.5) 53%, rgba(229,29,240,0.5) 77%);

+ CSS Box-shadows   Ret simple, vel understøttede Element.selector{ box-shadow: 10px 10px 5px #5d206c; }

+ CSS3 transitions  Transitions vækker sitet til live  nav a{ /*Transition her*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /*Element, der udsættes for transition, så transition vises*/ nav a:hover, nav a:focus{ background: #f90; /*fallback farve*/ background-color: rgba(93, 32, 108, 0.85); /*#5d206c i rgb med opacity 0.7*/ }

+ Web fonts  Ved hjælp kan vi inkludere egne fonte på websites  face_rule.asp face_rule.asp

+ Fonte & licenser { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9 */ }  Ofte kræves licens!  Workaround: Google web fonts! 

+ Media Queries

+ Adaptivt & responsivt design Hvad er forskellen mellem adaptivt og responsivt design? Adaptivt: Responsivt:

 I dag arbejder vi med adaptive sites – næste uge responsive  standard-devices/ standard-devices/  Der kan være mange “gamle” styles, der skal overrules af vores media only screen and (max-width: 960px){ body{ min-width: 100%; } /*Flere style-regler…*/ }

+ Dagens eksempler  Det “nøgne” site: ksempel1/ ksempel1/  Med CSS3: ksempel2/ ksempel2/  Med media queries:  ksempel3/ ksempel3/

+ Dagens opgave  Byg videre på dit grid-baserede site fra sidst. Krav:  Denne gang skal der et visuelt lag på - CSS3  Brug en række af de nye CSS3 properties  Gør det adaptivt, så dit site også er anvendeligt på f.eks. en mobiltelefon Afleveres på fronter senest søndag kl