Interaktion 2

1. Interaktion 2 Stefan Grage

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

3. Men først… I tirsdags • Vi arbejdede med HTML5 & grid systemer… • Er der noget, der hardrillet med opgaverne? • Noget vi skaltage op?

4. Domæner! • I skulleallegerne have et brugernavn! (detsomibrugernåri logger påfronter mm.) • Log påjeresdomæne via FTP • Server: brugernavn.keaweb.dk • Username: brugernavn • Password: Hvisiikkeharændretdetsidenstudiestart: kea123456# hvor 123456 er de første 6 cifreijeres CPR-nr.

5. CSS recap

6. CSS h1 {color: blue;}

7. CSS h1 {color: blue;} selector

8. CSS h1 {color: blue;} selector declaration

9. CSS property h1 {color: blue;} selector declaration

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

11. Hvorforvardetinteressant? • CSS3 byderpå en masse nyt! • Man kanmeget mere, med langtmindrekode 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) • …

12. CSS3 – status & anvendelse

13. CSS3 Status • Udviklingenaf CSS3 StyresafW3C (LigesomHTML5) • CSS3 ersplittet op imoduler, der kanfærdiggøresløbende: http://www.css3.info/modules/ • Tidligerevar CSS énstorspecifikation (langsomt) • Modulerneudviklesi 4 trin: • Working Draft • Candidate Recommendation • Proposed Recommendation • W3C Recommendation

14. Browser-producenternesmagt • Browserproducenternestår for at implementere CSS3 moduler – lidtdrilsk, for de moduler, der ik’ er W3C recommmendations • Browser producenterneimplementerer CSS3 v.hj.a. “vendor prefixes”: • Safari & chrome: -webkit-propertynavn • Firefox: -moz-propertynavn • Opera: -o-propertynavn • IE: ms-propertynavn • Fremtiden: propertynavn

15. Hvordankan vi såanvende CSS3? • Browserproducenterneerbegyndt at implementere CSS3 • Nogen halter bagud… (IE) • Check: http://caniuse.com/oghttp://fdim.dk/statistik/teknik/browserbarometer • Brugprogressivt! Progressive ehancement: Ikke “need to have” – kun “nice to have”

16. CSS3 – udvalgte properties

17. CSS3 background • CSS3 Baggrunde: http://www.w3schools.com/css3/css3_backgrounds.asp • 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; }

18. Background-color • Opacitet via nyfarve-definition: rgba() • Husk fallback farve! • http://www.w3schools.com/cssref/css_colors_legal.asp header, nav, .hero-unit, .latestnews article, .articles article, footer{ background-color: #000; /*fallback farve*/ background-color: rgba(0, 0, 0, 0.6); /*#000 irgb med opacity 0.7*/ color:#CCC; margin-bottom: 20px; }

19. Text-shadow • http://www.w3schools.com/cssref/css3_pr_text-shadow.asp header h1{ color: #f90; font-size: 200%; text-shadow: 2px 2px 1px rgba(255, 255, 255, 0.5); /*top, left, blur, color*/ }

20. Border-radius • http://www.w3schools.com/cssref/css3_pr_border-radius.asp • Generator: http://border-radius.com/ /*borders*/ Element-selector{ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

21. CSS Gradients • Erikketil at holdestyrpå. Hjælp!!: • http://gradients.glrzad.com/ellerhttp://www.colorzilla.com/gradient-editor/ • 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%);

22. CSS Box-shadows • http://www.w3schools.com/cssref/css3_pr_box-shadow.asp • Ret simple, velunderstøttede Element.selector{ box-shadow: 10px 10px 5px #5d206c; }

23. CSS3 transitions • Transitions vækkersitettil live • http://www.w3schools.com/css3/css3_transitions.asp 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*/ }

24. Web fonts • Vedhjælpaf @font-face kan vi inkludereegnefontepå websites • http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

25. Fonte & licenser • @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9 */} • Oftekræveslicens! • Workaround: Google web fonts! • http://www.google.com/fonts/

26. Media Queries

27. Adaptivt & responsivt design Hvaderforskellenmellemadaptivtogresponsivt design? Adaptivt: http://ff0000.com/ Responsivt: http://simplebits.com/work/

28. @media • I dag arbejder vi med adaptive sites – næsteuge responsive • http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ • Der kanvære mange “gamle” styles, der skal overrules afvores media queries! @media only screen and (max-width: 960px){ body{ min-width: 100%; } /*Flere style-regler…*/ }

29. Dagenseksempler • Det “nøgne” site: http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag3/eksempel1/ • Med CSS3: http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag3/eksempel2/ • Med media queries: • http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag3/eksempel3/

30. Dagensopgave • Bygviderepådit grid-baserede site frasidst. Krav: • Denne gang skal der et visuelt lag på - CSS3 • Brug en rækkeaf de nye CSS3 properties • Gørdetadaptivt, sådit site ogsåeranvendeligtpåf.eks. en mobiltelefon Afleverespåfrontersenestsøndag kl. 23.59