Přehled dalších vlastností CSS 3 a HTML 5 Přehled dalších vlastností

HTML 5 HTML 5 je nová verze specifikace značkovacího jazyka HTML, která přináší podstatné změny v technologiích webových stránek. HTML 5 umožňuje kromě jiného přehrávat multimédia přímo ve webovém prohlížeči a vytvářet v něm aplikace, které fungují i bez připojení k internetu. Letos se postupně seznámíme s několika novými tagy, které nám umožní zvýšení přehlednosti zdrojového kódu a rozšíří možnosti formulářů

HTML 5

HTML 5 v PSPadu

HTML 5 v PSPadu Můžeme vymazat

Kulaté rohy objektu styl.css border-radius: 15px;

Navigace styl.css nav li{list-style: none ; //nezobrazí se odrážky display: inline; //odkazy budou vodorovně padding-right: 50px; }

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

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

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

Laytouvací modul flexbox styl.css .container { display: flex;} .one, .two, .three { padding: 1em; margin-left: 2px; background: #ccc; flex-grow: 1; }

Laytouvací modul flexbox index.html <div class="container"> <p class="one">One</p> <p class="two">Two</p> <p class="three">Three </p> </div>

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