Exore LTD » CSS3 » Текст с эффектом помятой бумаги
Лого SiteHere.ru

Июль 8, 2014 Запись была обновлена

Время чтения: < 1 мин. Прочитать позже

Текст с эффектом помятой бумаги

Текст с эффектом помятой бумаги для вашего сайта

Из этого урока вы узнаете как придать интересный эффект тексту, который сможете применить у себя на сайте.

Пример меню можно увидеть здесь:

Посмотреть примерСкачать



Подключаем шрифты — Текст с эффектом помятой бумаги

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

1

    <link href='http://fonts.googleapis.com/css?family=Underdog&subset=latin,cyrillic' rel='stylesheet' type='text/css'>


HTML часть

Помещаем каждую букву в элемент <span> </span>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    <h1 class="demo1">
        <span class="word1">
            <span class="char1">В</span>
            <span class="char2">е</span>
            <span class="char3">с</span>
            <span class="char4">е</span>
            <span class="char5">л</span>
            <span class="char6">ы</span>
            <span class="char7">й</span>
        </span> 
        <span class="word2">
            <span class="char1">Т</span>
            <span class="char2">е</span>
            <span class="char3">к</span>
            <span class="char4">с</span>
            <span class="char5">т</span>
        </span>
    </h1>



CSS часть

Сейчас добавим для четных и нечетных букв разные свойства, и поворот, чтобы они смотрелись объемно:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.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);
}


Вот и всё! Наш текст готов применению :). Возможно вы захотите применить данный эффект текста у себя на сайте.

Успехов!

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *