Три забавных метода оформления текста с использованием Lettering.js
24 января 2014 | Опубликовано в css | 5 Комментариев »

Перед тем, как начать, убедитесь, что вы включили jQuery и последнюю версию Lettering.jsв файлы HTML.
1. Эффект сложенной бумаги
Демонстрация работы – Скачать исходный код
HTML:
<head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.lettering.js"></script> <link href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'> </head> <body> <div> <h1>Fun Typography Techniques</h1> </div> </body>
CSS:
body, html { height: 100%; margin: 0; -webkit-font-smoothing: antialiased; font-weight: 100; background: #aadfeb; text-align: center; } h1 { margin-top: 155px; } h1 [class*="word"]{ margin-right: 10px; } h1 [class*="word"]:last-child;{ margin-right: 0; } .demo1 [class*="char"]{ font-family: 'Amatic SC', helvetica; background: #ffb500; padding: 10px; font-size: 60px; color: #fff; display: inline-block; } .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); }
JS:
$(window).load(function(){ $(".demo1").lettering("words").children('span').lettering(); });
В основном эта техника используется, чтобы создать эффект сложенной бумаги. С помощью CSS стилей Lettering.js и nth-child мы легко можем воссоздать этот эффект, просто определив два стиля: для левой и для правой стороны бумаги, чтобы создать эффект тени, который придаст немного глубины оформлению текста заголовка. Мы не хотим придавать слишком много глубины с помощью теней и границ, так это не будет уместно в плоском дизайне, который у Вас есть.
2. Эффект праздничного освещения
HTML:
<head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.lettering.js"></script> <link href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'> </head> <body> <div> <h1>Fun Typography</h1> </div> </body>
The CSS:
body, html { height: 100%; margin: 0; -webkit-font-smoothing: antialiased; font-weight: 100; background: #9fd9e6; text-align: center; } h1 { margin-top: 235px; } h1 [class*="word"]{ margin-right: 10px; } h1 [class*="word"]:last-child;{ margin-right: 0; } .demo2 [class*="char"]{ margin-right: 5px; line-height: 100%; font-family: helvetica; color: white; font-weight: bold; border-radius: 50px; text-align: center; display: inline-block; padding: 10px 15px; text-transform: uppercase; } .demo2 [class*="char"]:nth-child(3n+1) { background: #ed4a02; } .demo2 [class*="char"]:nth-child(3n+2) { background: #93ca31; } .demo2 [class*="char"]:nth-child(3n+3) { background: #feb300; } .demo2:hover [class*="char"]:nth-child(3n+1){ -webkit-animation: color-1 1s infinite; -moz-animation: color-1 1s infinite; -o-animation: color-1 1s infinite; animation: color-1 1s infinite; } .demo2:hover [class*="char"]:nth-child(3n+2){ -webkit-animation: color-2 1s infinite; -moz-animation: color-2 1s infinite; -o-animation: color-2 1s infinite; animation: color-2 1s infinite; } .demo2:hover [class*="char"]:nth-child(3n+3){ -webkit-animation: color-3 1s infinite; -moz-animation: color-3 1s infinite; -o-animation: color-3 1s infinite; animation: color-3 1s infinite; } @-webkit-keyframes color-1 { 0% { background: #ed4a02; } 33% { background: #93ca31; } 66% { background: #feb300; } 100% { background: #ed4a02;} } @-moz-keyframes color-1 { 0% { background: #ed4a02; } 33% { background: #93ca31; } 66% { background: #feb300; } 100% { background: #ed4a02;} } @-webkit-keyframes color-2 { 0% { background: #93ca31; } 33% { background: #feb300; } 66% { background: #ed4a02;} 100% { background: #93ca31;} } @-moz-keyframes color-2 { 0% { background: #93ca31; } 33% { background: #feb300; } 66% { background: #ed4a02;} 100% { background: #93ca31;} } @-webkit-keyframes color-3 { 0% { background: #feb300; } 33% { background: #ed4a02; } 66% { background: #93ca31;} 100% { background: #feb300;} } @-moz-keyframes color-3 { 0% { background: #feb300; } 33% { background: #ed4a02; } 66% { background: #93ca31;} 100% { background: #feb300;} }
The JS:
$(window).load(function(){ $(".demo2").lettering("words").children('span').lettering(); });
Эта техника добавит забавный пестрый вид оформлению текста заголовка. Цвета будут мигать, когда вы наведете указатель мыши на текст. И снова используя мощный стиль CSS nth-child, мы определили повторяющийся шаблон изменения цветов, состоящий из оранжевого, зеленого и желтого соответственно. Концепция стиля nth-child проста. Вот объяснение, почему мы использовали nth-child(3n+1), nth-child(3n+2), и nth-child(3n+3).
Для nth-child(3n+1):
- (3×0) + 1 = 1 = Первая буква
- (3×1) + 1 = 4 = Четвертая буква
- (3×2) + 1 = 7 = Седьмая буква
- · (3×3) + 1 = 10 = Десятая буква и так далее.
Тоже самое для nth-child(3n+2):
- (3×0) + 2 = 2 = Вторая буква
- (3×1) + 2 = 5 = Пятая буква
- (3×2) + 2 = 8 = Восьмая буква
- · (3×3) + 2 = 11 = Одиннадцатая буква и так далее.
И для nth-child(3n+3):
- (3×0) + 3 = 3 = Третья буква
- (3×1) + 3 = 6 = Шестая буква
- (3×2) + 3 = 9 = Девятая буква
- (3×3) + 3 = 12 = Двенадцатая буква и так далее.
Так что в основном оранжевый цвет будет применяться к первой из каждой тройки букв, т. е., к первой, четвертой, седьмой и так далее буквам, зеленый и желтый будут применяться ко второй и третьей буквам из каждой тройки букв соответственно. Теперь у Вас есть разноцветное оформление текста без необходимости присваивать цвет для каждой буквы.
Мы также добавили анимацию, когда пользователь наводит указатель мыши на заголовок, чтобы создать эффект мигающего праздничного освещения.
3. Красивое оформление текста, как на афише
HTML:
<head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.lettering.js"></script> <link href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'> </head> <body> <div> <h1> This tutorial<br> is Awesome<br> than other<br> = Tutorial =<br> Am I Right?<br> And this<br> can go on<br> forever<br> = & =<br> ever<br> The End </h1> </div> </body>
CSS:
body, html { height: 100%; margin: 0; -webkit-font-smoothing: antialiased; font-weight: 100; background: #00bccb; text-align: center; padding: 50px; } h1 { margin-bottom: 35px; } h1 [class*="word"]{ margin-right: 10px; } h1 [class*="word"]:last-child;{ margin-right: 0; } .demo3 { width: 350px; margin: 10px auto; } .demo3 [class*="line"]{ line-height: 100%; font-family: "open sans"; color: #fff; line-height: 180%; display: block; } .demo3 [class*="line"]:nth-child(5n+1){ font-weight: bold; text-transform: uppercase; letter-spacing: -2px; line-height: 140%; font-size: 49px; } .demo3 [class*="line"]:nth-child(5n+2){ font-size: 23px; font-weight: 100; text-transform: uppercase; letter-spacing: 12px; word-spacing: 30px; border-top: 2px solid white; border-bottom: 2px solid white; } .demo3 [class*="line"]:nth-child(5n+3){ line-height: 100%; font-size: 70px; font-style: italic; font-family: serif; font-weight: 400; margin-bottom: 7px; } .demo3 [class*="line"]:nth-child(5n+4){ line-height: 100%; margin-bottom: 15px; font-weight: bold; font-size: 68px; letter-spacing: -3px; } .demo3 [class*="line"]:nth-child(5n+5){ font-size: 23px; font-weight: 100; line-height: 190%; text-transform: uppercase; letter-spacing: 6px; word-spacing: 10px; border-top: 2px solid white; border-bottom: 2px solid white; box-shadow: 0 2px 0 #00bccb, 0 4px 0 #fff, 0 -2px 0 #00bccb, 0 -4px 0 #fff; } .demo3 [class*="line"]:last-child{ margin: 25px 0; letter-spacing: 0px; border: none; box-shadow: none; border-radius: 70px; background: #FFF; color: #00bccb; display: inline-block; padding: 45px 17px; font-size: 19px; }
JS:
$(window).load(function(){ $(".demo3").lettering("lines"); });
С помощью nth-child у каждой строки будет свой собственный стиль, который достаточно отличается, чтобы создать разделение между строками. Вне зависимости от того, сколько строк вы добавите, стили будут непрерывно применяться к каждой строке по шаблону, так что Вам совсем не нужно волноваться о стилях, когда вы добавляете новый текст.
Демонстрация работы – Скачать исходный код
Заключение
Как вы видите, плоский дизайн интерфейсов занял устойчивую позицию, и с ним приходит возможность для разработчиков и дизайнеров поиграть и поэкспериментировать с оформлением текстов в интернете. Надеемся, что Вам понравились эти методы.
Автор урока Pete R.
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191
27 января 2014 в 20:24
Автор, тебе Лебедев не говорил, что так верстают только мудаки?
Ответить
января 27, 2014 at 9:28 пп
Автор Pete R. живет в Бангкоке. Думаю, он не знает кто такой Лебедев...
Ответить
30 января 2014 в 2:33
Отлично, забираем!!! Хорошо и доступно написано. Спасибо вам
Ответить
января 30, 2014 at 12:15 пп
Вам спасибо за внимание!
Приходите к нам еще ;)
Ответить