1 / 21

CSS 3 a HTML 5

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.

hoyt-chan
Download Presentation

CSS 3 a HTML 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. HTML 5 • HTML 5je 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ářů

  3. HTML 5

  4. HTML 5 v PSPadu

  5. HTML 5 v PSPadu Můžemevymazat

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

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

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

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

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

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

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

  13. 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;

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

  15. Jednoduché tvary • Do tvaru lze vložit obrázek

  16. Vlastnost box-sizing může mít hodnotu • border-box • padding-box • content-box Všechny objekty mají zadanou stejnou velikost

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

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

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

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

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

More Related