Fresh HTML

1,001 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Fresh HTML

  1. 2. <ul><li>Что будет? </li></ul>
  2. 3. <ul><li>Используем шрифт Calibr i </li></ul>
  3. 6. <ul><li>И кое-что на сладкое </li></ul>
  4. 7. <ul><li><!DOCTYPE html> </li></ul>
  5. 8. Р азмечаем <ul><li><header> </li></ul><ul><li><nav></nav> </li></ul><ul><li></header> </li></ul><ul><li><section></section> </li></ul><ul><li><footer></footer> </li></ul>
  6. 9. Немно го магии <ul><li><script> </li></ul><ul><li>document.createElement('header'); </li></ul><ul><li>document.createElement('nav'); </li></ul><ul><li>document.createElement('section'); </li></ul><ul><li>document.createElement('footer'); </li></ul><ul><li></script> </li></ul>
  7. 10. Б лочим <ul><li>header, nav, section, footer {display: block} </li></ul>
  8. 11. Подсвечиваем меню <ul><li>nav a:hover </li></ul><ul><li>{ </li></ul><ul><li>text-shadow: 0px 0px 10px #fff; </li></ul><ul><li>} </li></ul>
  9. 12. Прида ем объем заголовкам <ul><li>text-shadow: 1px 1px 0px #ec008c; </li></ul>
  10. 13. Это же Calibri ! <ul><li>@font-face </li></ul><ul><li>{ </li></ul><ul><li>font-family: &quot;calibri&quot;; </li></ul><ul><li>src: url('calibri.ttf') format('truetype'); </li></ul><ul><li>} </li></ul><ul><li>h1 {font-family: “calibri”} </li></ul><ul><li>Еще как работает! </li></ul>
  11. 14. Скругля ем легко! <ul><li>section </li></ul><ul><li>{ </li></ul><ul><li>-webkit-border-radius: 15px; </li></ul><ul><li>-moz-border-radius: 15px; </li></ul><ul><li>border-radius: 15px; </li></ul><ul><li>} </li></ul>
  12. 15. Красим таблицы <ul><li>table tbody tr: nth-child(2n+1) </li></ul><ul><li>{ </li></ul><ul><li>background: #161616; </li></ul><ul><li>} </li></ul>
  13. 16. Слуша ем и смотр им <ul><li><video src=&quot;/video/swim.ogg&quot; id=&quot;video&quot; > </li></ul><ul><li></video> </li></ul><ul><li><audio src=&quot;/audio/bsh.mp3&quot; controls> </li></ul><ul><li></audio> </li></ul>
  14. 17. <ul><li>Спасибо за внимание </li></ul>

×