Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

HTML 5 a CSS 3. Rozvržení stránky pomocí HTML 5 HTML 5 Deklarace typu dokumentu v HTML 5 Výběr znakové sady.

Podobné prezentace


Prezentace na téma: "HTML 5 a CSS 3. Rozvržení stránky pomocí HTML 5 HTML 5 Deklarace typu dokumentu v HTML 5 Výběr znakové sady."— Transkript prezentace:

1 HTML 5 a CSS 3

2 Rozvržení stránky pomocí HTML 5

3 HTML 5 Deklarace typu dokumentu v HTML 5 Výběr znakové sady

4 CSS Hlavička stránky Seznam v části nav neobsahuje odrážky Vodorovné zarovnání

5 Ukázka stránky

6 Odkazy styl.css na odkaz nebylo kliknuto odkaz po kliknutí odkaz při přejetí myší

7 Třída kulaté styl.css index.html zápis pro starší prohlížeče Firefox zápis pro starší prohlížeče Chrome přiřazení třídy k objektu header přiřazení třídy k objektu nav

8 Vlastnost box-sizing může mít tři hodnoty

9 Vlastnost box-sizing m ů že mít hodnotu border-box padding-box content-box Všechny objekty mají zadanou stejnou velikost

10 Text uspořádaný do sloupců styl.css.sloupce { column-count:3; //po č et sloupc ů -moz-column-count:3; -webkit-column-count:3; column-gap:40px; //ší ř ka mezery -moz-column-gap:40px; -webkit-column-gap:40px; } index.html -

11 Zkosení objektu styl.css.zkoseni {transform:skew(-10deg); } index.html

12 Rotace objektu styl.css.otaceni{transform:rotate(-10deg); } index.html

13 Rotace i zkosení styl.css.kombinace{transform:skew(-10deg)rotate (- 10deg);} index.html

14 Stín objektu styl.css aside{ box-shadow: 10px 5px 20px rgb(128,128,128);…}

15 Ovál a kružnice styl.css #oval {width: 250px; height: 150px; background: rgb(51,0,0); border-radius: 50%; } index.html width: 150px; height: 150px;

16 Další tvary

17 Jednoduché tvary Do tvaru lze vložit obrázek – jako pozadí

18 Průhlednost Opacity zajistí polopr ů hlednost objektu samotného i jeho dce ř inných objekt ů styl.css.opacity {background: rgb(20%, 100%, 20%); -ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity:.5; } index.html

19 Průhlednost RGBa je barva aplikovatelná na cokoliv bez vlivu na zbytek elementu styl.css.rgba {background: rgb(20%, 100%, 20%); background: rgba(20%, 100%, 20%,.5); index.html

20 Užitečné odkazy moderni-webmastery moderni-webmastery


Stáhnout ppt "HTML 5 a CSS 3. Rozvržení stránky pomocí HTML 5 HTML 5 Deklarace typu dokumentu v HTML 5 Výběr znakové sady."

Podobné prezentace


Reklamy Google