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

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

Ukázka stránky

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

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

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

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

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">

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

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

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

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

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;

Další tvary http://www.itnetwork.cz/tutorial-zakladni-tvary-v-css-3

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

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">

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">

Užitečné odkazy http://www.itnetwork.cz/cesky-html-5-manual http://www.itnetwork.cz/cesky-css-3-manual-rejstrik http://www.vzhurudolu.cz/prirucka/css3 http://jecas.cz/float http://www.itnetwork.cz/online-generatory-css-stylu-pro- moderni-webmastery