Три забавных метода оформления текста с использованием Lettering.js

24 января 2014 | Опубликовано в css | 5 Комментариев »

Так как использование плоского дизайна начало набирать все большую популярность, на замену подхода в стиле скевоморфизма приходит наименее тяжелое оформление текстов. Сегодня мы покажем, как оживить ваш веб-сайт с плоским дизайном, применив забавные методы оформления текстов, используя Lettering.js — очень полезный инструмент, который возвращает контроль над оформлением текстов.
Перед тем, как начать, убедитесь, что вы включили 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>

        = &amp; =<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, января 24, 2014
Метки: css, верстка, типографика уроки, туториал типографика, урок css, урок верстка

�

Вася
27 января 2014 в 20:24
-2

Автор, тебе Лебедев не говорил, что так верстают только мудаки?

Mary Ответ:
января 27, 2014 at 9:28 пп

0

Автор Pete R. живет в Бангкоке. Думаю, он не знает кто такой Лебедев...
GoodNews
30 января 2014 в 2:33
0

Отлично, забираем!!! Хорошо и доступно написано. Спасибо вам

Mary Ответ:
января 30, 2014 at 12:15 пп

0

Вам спасибо за внимание! Приходите к нам еще ;)