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.