Præsentation er lastning. Vent venligst

Præsentation er lastning. Vent venligst

+ Interaktion 2 Stefan Grage. + DAGENS MÅL  CSS recap  CSS3 Status & anvendelse  Baggrunde, kanter, skygger, opacity, gradients…  Transitions  Web.

Lignende præsentationer


Præsentationer af emnet: "+ Interaktion 2 Stefan Grage. + DAGENS MÅL  CSS recap  CSS3 Status & anvendelse  Baggrunde, kanter, skygger, opacity, gradients…  Transitions  Web."— Præsentationens transcript:

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 har drillet med opgaverne?  Noget vi skal tage op?

4 + 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 123456 er de første 6 cifre i jeres 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 h1 {color: blue;} selector declaration property

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

11 + 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)  …

12 + CSS3 – status & anvendelse

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

14 + 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

15 + Hvordan kan vi så anvende CSS3?  Browserproducenterne er begyndt at implementere CSS3  Nogen halter bagud… (IE)  Check: http://caniuse.com/ og http://fdim.dk/statistik/teknik/browserbarometerhttp://caniuse.com/ http://fdim.dk/statistik/teknik/browserbarometer  Brug progressivt! 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 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 ny farve-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 i rgb 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  Er ikke til at holde styr på. Hjælp!!:  http://gradients.glrzad.com/ eller http://www.colorzilla.com/gradient-editor/ http://gradients.glrzad.com/ http://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 http://www.w3schools.com/cssref/css3_pr_box-shadow.asp  Ret simple, vel understøttede Element.selector{ box-shadow: 10px 10px 5px #5d206c; }

23 + CSS3 transitions  Transitions vækker sitet til live  http://www.w3schools.com/css3/css3_transitions.asp 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  Ved hjælp af @font-face kan vi inkludere egne fonte på websites  http://www.w3schools.com/cssref/css3_pr_font- face_rule.asp 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 */ }  Ofte kræves licens!  Workaround: Google web fonts!  http://www.google.com/fonts/ http://www.google.com/fonts/

26 + Media Queries

27 + Adaptivt & responsivt design Hvad er forskellen mellem adaptivt og responsivt design? Adaptivt: http://ff0000.com/ Responsivt: http://simplebits.com/work/

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

29 + Dagens eksempler  Det “nøgne” site: http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag3/e ksempel1/ http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag3/e ksempel1/  Med CSS3: http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag3/e ksempel2/ http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag3/e ksempel2/  Med media queries:  http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag3/e ksempel3/ http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag3/e ksempel3/

30 + 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. 23.59


Download ppt "+ Interaktion 2 Stefan Grage. + DAGENS MÅL  CSS recap  CSS3 Status & anvendelse  Baggrunde, kanter, skygger, opacity, gradients…  Transitions  Web."

Lignende præsentationer


Annoncer fra Google