Upload
jaunie
View
49
Download
3
Embed Size (px)
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 Presentation
Citation preview
Přehled vlastností CSS3 a jejich podpora v prohlížečích
Tomáš Pijáček, PIJ006
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 ?
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
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
5
Umožnění zaoblení objektu
Syntaxe border-radius: 100px;
–moz-border-radius: 100px;
Podporované prohlížeče
Border Radius
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
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
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
9
Rotate – otáčí objekt, hodnoty: (x[deg])
Syntaxe
transform: rotate(100deg);-moz-transform: rotate(100deg);
-o-transform: rotate(100deg);-webkit-transform:rotate(100deg);
Transform
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
11
Dává objektům průhlednost Interval <0,1> kde 0 je 100% průhlednost
Syntaxeopacity:0.2;
Podporované prohlížeče
Opacity
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
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ů
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
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
16
CSS 3.0 Maker◦ Border Radius, Gradient, CSS Transform, CSS
Animation, Rotation, …
Nástroje pro snadnou tvorbu
17
Sancha Animator◦ Transition and animations, 2D & 3D Transform,
Layouts, Gradients, …
Nástroje pro snadnou tvorbu
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
19
Děkuji za pozornost.