+ All Categories
Home > Technology > Fresh HTML

Fresh HTML

Date post: 20-Jun-2015
Category:
Upload: alexandrpavlov
View: 899 times
Download: 0 times
Share this document with a friend
Popular Tags:
17
Transcript
Page 1: Fresh HTML
Page 2: Fresh HTML

Что будет?

Page 3: Fresh HTML

Используем шрифт Calibri

Page 4: Fresh HTML
Page 5: Fresh HTML
Page 6: Fresh HTML

И кое-что на сладкое

Page 7: Fresh HTML

<!DOCTYPE html>

Page 8: Fresh HTML

Размечаем

<header><nav></nav>

</header><section></section><footer></footer>

Page 9: Fresh HTML

Немного магии

<script>document.createElement('header');document.createElement('nav');document.createElement('section');document.createElement('footer');

</script>

Page 10: Fresh HTML

Блочим

header, nav, section, footer {display: block}

Page 11: Fresh HTML

Подсвечиваем меню

nav a:hover

{

text-shadow: 0px 0px 10px #fff;

}

Page 12: Fresh HTML

Придаем объем заголовкам

text-shadow: 1px 1px 0px #ec008c;

Page 13: Fresh HTML

Это же Calibri!

@font-face {font-family: "calibri"; src: url('calibri.ttf') format('truetype');}h1 {font-family: “calibri”}

Еще как работает!

Page 14: Fresh HTML

Скругляем легко!

section

{

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

}

Page 15: Fresh HTML

Красим таблицы

table tbody tr:nth-child(2n+1)

{

background: #161616;

}

Page 16: Fresh HTML

Слушаем и смотрим

<video src="/video/swim.ogg" id="video" >

</video>

<audio src="/audio/bsh.mp3" controls>

</audio>

Page 17: Fresh HTML

Спасибо за внимание


Recommended