Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Přehled dalších vlastností CSS 3 a HTML 5. HTML 5 HTML 5 je nová verze specifikace značkovacího jazyka HTML, která přináší podstatné změny v technologiích.

Podobné prezentace


Prezentace na téma: "Přehled dalších vlastností CSS 3 a HTML 5. HTML 5 HTML 5 je nová verze specifikace značkovacího jazyka HTML, která přináší podstatné změny v technologiích."— Transkript prezentace:

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

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

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

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

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

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

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

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 One Two Three

21 Užitečné odkazy rejstrik rejstrik stylu-pro-moderni-webmastery stylu-pro-moderni-webmastery


Stáhnout ppt "Přehled dalších vlastností CSS 3 a HTML 5. HTML 5 HTML 5 je nová verze specifikace značkovacího jazyka HTML, která přináší podstatné změny v technologiích."

Podobné prezentace


Reklamy Google