HTML 5 a CSS 3 - PowerPoint PPT Presentation

html 5 a css 3 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML 5 a CSS 3 PowerPoint Presentation
Download Presentation
HTML 5 a CSS 3

play fullscreen
1 / 20
HTML 5 a CSS 3
150 Views
Download Presentation
hedia
Download Presentation

HTML 5 a CSS 3

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  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. 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 zápis pro starší prohlížeče 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 • 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 <asideclass="zkoseni">

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

  13. Rotace i zkosení styl.css .kombinace{transform:skew(-10deg)rotate (-10deg);} index.html <asideclass="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 • http://www.itnetwork.cz/tutorial-zakladni-tvary-v-css-3

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