Текст з ефектом пом`ятою паперу

Відео: Ефект старого паперу в фотошопі

З цього уроку ви дізнаєтеся як надати цікавий ефект тексту, який зможете застосувати у себе на сайті.

Відео: Як зробити оборвонний аркуш паперу в Photoshop CS6

Приклад меню можна побачити тут:

Подивитися прімерСкачать

Підключаємо шрифти - Текст з ефектом пом`ятою паперу

Шрифт тексту у нас буде не звичайний, а «Underdog». А підключимо ми його з Google Fonts одним рядком між тегами :

1	lt;link href=`Http://fonts.googleapis.com/css?family=Underdogsubset=latin,cyrillic` rel=`Stylesheet` type=`Text / css`gt;

HTML частина

Розміщуємо кожну букву в елемент:

123456789101112131415161718

lt;h1 class="Demo1"gt;lt;span class="Word1"gt;lt;span class="Char1"gt; Вlt;/spangt;lt;span class="Char2"gt; еlt;/spangt;lt;span class="Char3"gt; зlt;/spangt;lt;span class="Char4"gt; еlt;/spangt;lt;span class="Char5"gt; лlt;/spangt;lt;span class="Char6"gt; иlt;/spangt;lt;span class="Char7"gt; їlt;/spangt;lt;/spangt;lt;span class="Word2"gt;lt;span class="Char1"gt; Тlt;/spangt;lt;span class="Char2"gt; еlt;/spangt;lt;span class="Char3"gt; доlt;/spangt;lt;span class="Char4"gt; зlt;/spangt;lt;span class="Char5"gt; тlt;/spangt;lt;/spangt;lt;/h1gt;

CSS частина

Зараз додамо для парних і непарних букв різні властивості, і поворот, щоб вони виглядали об`ємно:

12345678910111213141516171819202122232425

.demo1 [class* ="Char"]{font-family: `Underdog`, helvetica-background: # ffb500-padding: 10px-font-size: 60px-color: #fff-display: inline-block-margin-left:-12px-}.demo1 [class* ="Char"]: nth-child(odd){moz-transform: skewY(-10deg)--webkit-transform: skewY(-10deg)--o-transform: skewY(-10deg)--ms-transform: skewY(-10deg)-transform: skewY(-10deg)-}.demo1 [class* ="Char"]: nth-child(even){background: # f15b14-color: #fff-moz-transform: skewY(10deg)--webkit-transform: skewY(10deg)--o-transform: skewY(10deg)--ms-transform: skewY(10deg)-transform: skewY(10deg)-}