CSS a HTML 5

Pehled dalch vlastnostCSS 3 a HTML 5HTML 5HTML 5 je nov verze specifikace znakovacho jazyka HTML, kter pin podstatn zmny v technologich webovch strnek. HTML 5 umouje krom jinho pehrvat multimdia pmo ve webovm prohlei a vytvet v nm aplikace, kter funguj i bez pipojen k internetu.Letos se postupn seznmme s nkolika novmi tagy, kter nm umon zven pehlednosti zdrojovho kdu a roz monosti formul

HTML 5

HTML 5 v PSPadu

HTML 5 v PSPadu

Meme vymazatKulat rohy objektustyl.css border-radius: 15px;

Navigacestyl.cssnav li{list-style: none ; //nezobraz se odrky display: inline; //odkazy budou vodorovn padding-right: 50px; }

Text uspodan do sloupcstyl.css.sloupce { column-count:3; //poet sloupc -moz-column-count:3; -webkit-column-count:3; column-gap:40px;//ka mezery -moz-column-gap:40px; -webkit-column-gap:40px; } index.html -

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

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

Rotace i zkosenstyl.css.kombinace{transform:skew(-10deg)rotate (-10deg);} index.html

Stn objektustyl.cssaside{ box-shadow: 10px 5px 20px rgb(128,128,128);}

Ovl a krunicestyl.css #oval {width: 250px; height: 150px; background: rgb(51,0,0); border-radius: 50%; }index.html

width: 150px; height: 150px; Dal tvaryhttp://www.itnetwork.cz/tutorial-zakladni-tvary-v-css-3

Jednoduch tvaryDo tvaru lze vloit obrzek

Vlastnost box-sizingme mt hodnotuborder-boxpadding-boxcontent-box

Vechny objekty majzadanou stejnouvelikost

PrhlednostOpacity zajist poloprhlednost objektu samotnho i jeho dceinnch objektstyl.css .opacity {background: rgb(20%, 100%, 20%); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: .5; }index.html

PrhlednostRGBa 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

Laytouvac modul flexboxstyl.css .container { display: flex;}

.one, .two, .three { padding: 1em; margin-left: 2px; background: #ccc; flex-grow: 1; }

Laytouvac modul flexbox

index.html One Two Three Uiten odkazyhttp://www.itnetwork.cz/cesky-html-5-manualhttp://www.itnetwork.cz/cesky-css-3-manual-rejstrikhttp://www.vzhurudolu.cz/prirucka/css3http://jecas.cz/floathttp://www.itnetwork.cz/online-generatory-css-stylu-pro-moderni-webmastery