Download præsentationen
Præsentation er lastning. Vent venligst
Offentliggjort afMargrethe Jepsen Redigeret for ca. et år siden
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
Lignende præsentationer
© 2024 SlidePlayer.dk Inc.
All rights reserved.