HTML 5 a CSS 3

Rozvržení stránky pomocí HTML 5

HTML 5Deklarace 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

Odkazystyl.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

zápis pro starší prohlížečeChromepřiřazení třídy

k objektu header

přiřazení třídy

k objektu nav

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

Vlastnost box-sizingmůže mít hodnotu

border-boxpadding-boxcontent-box

Všechny objekty majízadanou stejnouvelikost

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í objektustyl.css

.zkoseni {transform:skew(-10deg); } index.html

<aside class="zkoseni">

Rotace objektustyl.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 objektustyl.css

aside{ box-shadow: 10px 5px 20px rgb(128,128,128);…}

Ovál a kružnicestyl.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ší tvaryhttp://www.itnetwork.cz/tutorial-zakladni-

tvary-v-css-3

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

PrůhlednostOpacity 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ůhlednostRGBa 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é odkazyhttp://

www.itnetwork.cz/cesky-html-5-manualhttp://

www.itnetwork.cz/cesky-css-3-manual-rejstrik

http://www.vzhurudolu.cz/prirucka/css3http://jecas.cz/floathttp://www.itnetwork.cz/online-generatory-c

ss-stylu-pro-moderni-webmastery