Přehled dalších vlastností

Prezentace na téma: "Přehled dalších vlastností"— Transkript prezentace:

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

2 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ářů

3 HTML 5

4 HTML 5 v PSPadu

5 HTML 5 v PSPadu Můžeme vymazat

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

7 Navigace styl.css nav li{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 <aside class="zkoseni">

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

11 Rotace i zkosení styl.css .kombinace{transform:skew(-10deg)rotate (-10deg);} index.html <aside class="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 tvary-v-css-3

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

16 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

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
rejstrik stylu-pro-moderni-webmastery