přehled vlastností css3 a jejich podpora v prohlížečích
DESCRIPTION
Přehled vlastností CSS3 a jejich podpora v prohlížečích. Tomáš Pijáček , PIJ006. Co je to CSS ?. CSS – Cascading Style Sheets Jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML, XML Oddělení vzhledu dokumentu od jeho struktury a obsahu Standard W3C - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/1.jpg)
Přehled vlastností CSS3 a jejich podpora v prohlížečích
Tomáš Pijáček, PIJ006
![Page 2: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/2.jpg)
2
CSS – Cascading Style Sheets
Jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML, XML
Oddělení vzhledu dokumentu od jeho struktury a obsahu
Standard W3C
Vydány verze CSS 1 a CSS 2
Dokončuje se revize CSS 2.1 a pracuje se na v. CSS 3
Co je to CSS ?
![Page 3: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/3.jpg)
3
Vyhlášen před několika lety, udává se rok 2005
Předpokládané dokončení 2015 Modularita Hlavním přínosem jsou grafické efekty
průhlednost prvků přechody, stíny kulaté rohy více sloupové rozvržení nové selektory
CSS3
![Page 4: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/4.jpg)
4
Mozilla Firefox ver. 3.6.
Mozilla Firefox ver. 4
Opera ver. 11.01
Google Chrome ver. 10.0
Safari ver. 5.0.4
Internet Explorer 8
Internet Explorer 9
Testované prohlížeče
![Page 5: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/5.jpg)
5
Umožnění zaoblení objektu
Syntaxe border-radius: 100px;
–moz-border-radius: 100px;
Podporované prohlížeče
Border Radius
![Page 6: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/6.jpg)
6
Umožňuje realizaci stínování◦ 1. posunutí stínu horizontálně od objektu◦ 2. posunutí stínu vertikálně od objektu◦ 3. nastavení okraje stínu◦ 4. nastavení barvy stínu
Syntaxebox-shadow:10px 5px 20px #000;-moz-box-shadow: 10px 5px 20px #000;-webkit-box-shadow: 10px 5px 20px #000;
Podporované prohlížeče
Box Shadow
![Page 7: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/7.jpg)
7
Obdoba jako box-shadow Využívá se pro stín textu
Syntaxe
text-shadow: 5px 5px 5px #000000;
Podporované prohlížeče
Text Shadow
![Page 8: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/8.jpg)
8
Slouží k nastavení rotace a pohybu objektu
Translate – nastavuje 2D pohyb objektu po osách x a y, hodnoty: (x[em],y[em])
Syntaxe
transform: translate(3em,1em);-moz-transform: translate(3em, 1em);-webkit-transform: rotate(3em, 1em);-o-transform: translate(3em, 1em);
Transform
![Page 9: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/9.jpg)
9
Rotate – otáčí objekt, hodnoty: (x[deg])
Syntaxe
transform: rotate(100deg);-moz-transform: rotate(100deg);
-o-transform: rotate(100deg);-webkit-transform:rotate(100deg);
Transform
![Page 10: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/10.jpg)
10
Scale – pracuje s velikostí objektů, hodnoty: (x). x = nastavuje zvětšení
objektu.Syntaxe
transform: scale(2);-moz-transform: scale(2);-webkit-transform: scale(2);-o-transform: scale(2);
Transform
![Page 11: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/11.jpg)
11
Dává objektům průhlednost Interval <0,1> kde 0 je 100% průhlednost
Syntaxeopacity:0.2;
Podporované prohlížeče
Opacity
![Page 12: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/12.jpg)
12
Rozšíření funkcionalitu stávajících selektorů
Jedná se většinou pseudotřídy
Funkcionalita podobná jak ji známe
například u JQuery selektorů
Selektory
![Page 13: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/13.jpg)
13
CSS 2
E[att] - Element E, který obsahuje zadaný atributE[att=”val”] -||- se zadanou hodnotou „val“
CSS 3
E[att^=”val”] - Element E, jehož hodnota atributu začíná „val“
E[att$=”val”] - Element E, jehož hodnota atributu končí „val“
E[att*=”val”] - Element E, jehož hodnota atributu obsahuje „val“
Selektory- podle atributů
![Page 14: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/14.jpg)
14
E:empty - Vybere prázdný element. Např. tedy prázdný <span></span>
E::selection - Když vybíráte text myší, tak se nějakým způsobem
zvýrazňuje. Typicky podbarvuje nějakou barvou
E:checked - Vybere checkboxy, který jsou zaškrtnuté
Selektory- pomocí pseudotříd
![Page 15: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/15.jpg)
15
E:nth-of-type(n) – n-tý element totožného typu (nεℕ)
E:nth-of-type(odd|even) – všechny liché| sudé elementy totožného typu. Vhodné
pro rozlišení řádků
p:nth-of-type (5n+1) – výběr elementů podle matematické rovnice
p:nth-of-type(2n+1) - liché elementy totožného typu p:nth-of-type(2n) - sudé elementy totožného typu
Selektory- pomocí pseudotříd
![Page 16: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/16.jpg)
16
CSS 3.0 Maker◦ Border Radius, Gradient, CSS Transform, CSS
Animation, Rotation, …
Nástroje pro snadnou tvorbu
![Page 17: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/17.jpg)
17
Sancha Animator◦ Transition and animations, 2D & 3D Transform,
Layouts, Gradients, …
Nástroje pro snadnou tvorbu
![Page 18: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/18.jpg)
18
CSS3 Previews• http://www.css3.info/
Webové služby• http://zdrojak.root.cz/clanky/pi-oviny-s-css3/
Seriál Webdesignérův průvodce po CSS3• http
://zdrojak.root.cz/serialy/webdesigneruv-pruvodce-po-css3/
Použité zdroje
![Page 19: Přehled vlastností CSS3 a jejich podpora v prohlížečích](https://reader036.vdocuments.pub/reader036/viewer/2022062321/56813ada550346895da31d33/html5/thumbnails/19.jpg)
19
Děkuji za pozornost.