HTML 5 a CSS 3.

Prezentace na téma: "HTML 5 a CSS 3."— 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 na odkaz nebylo kliknuto
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
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 Všechny objekty mají
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 - <p class="sloupce">

11 Zkosení objektu styl.css .zkoseni {transform:skew(-10deg); } index.html <aside class="zkoseni">

12 Rotace objektu styl.css .otaceni{transform:rotate(-10deg); } index.html <aside class="otaceni">

13 Rotace i zkosení styl.css .kombinace{transform:skew(-10deg)rotate (- 10deg);} index.html <aside class="kombinace">

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 <div id="oval"> </div> 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 <p class="opacity">

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 <p class="rgba">

20 Užitečné odkazy http://www.itnetwork.cz/cesky-html-5-manual
moderni-webmastery