Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Сниппеты » Красивый эффект длинной тени для текста на CSS

Красивый эффект длинной тени для текста на CSS

Длинные тени — популярный эффект, часть тенденции «плоского дизайна», довольно часто применяется в веб-дизайне, на элементах дизайна интерфейса, иконках и тексте. Сейчас для создания различных эффектов теней текста, нет необходимости использовать Photoshop, достаточно одного лишь простого свойства text-shadow из обоймы CSS.

Чтобы проиллюстрировать это, подготовил парочку простых примеров использования свойства , для создания стильных эффектов длинной . Экспериментируя со значениями этого свойства, вы сможете легко создать свой уникальный теневой эффект.
 
Эффект длинной тени для текста на CSS
 
В каждом примере показан результат и весь фарш html/css, особых пояснений, думаю не требуется, остановлюсь лишь на некоторых деталях.
Например, для размера шрифта использовал относительную единицу измерения vw, т.е. в таком случае, размер шрифта вычисляется относительно окна просмотра браузера (вьюпорта), а значит шрифт всегда будет выглядеть корректно при изменении пользователем размера окна браузера(мобильного или десктопного).
Так же для достижения эффекта длинной тени использовалось несколько параметров тени, разделённых меду собой запятой. Напомню, что согласно спецификации CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу.

1. с длинной тенью на светлом фоне

.long-sadow {
    color: #333333;
    line-height: 1.2;
    margin: 15px 0;
    font-size: 8vw;
    font-weight: lighter;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, .08), 2px 2px 1px rgba(0, 0, 0, .075), 4px 4px 1px rgba(0, 0, 0, .07), 6px 6px 1px rgba(0, 0, 0, .065), 8px 8px 1px rgba(0, 0, 0, .06), 10px 10px 1px rgba(0, 0, 0, .055), 12px 12px 1px rgba(0, 0, 0, .05), 14px 14px 1px rgba(0, 0, 0, .045), 16px 16px 1px rgba(0, 0, 0, .04), 18px 18px 1px rgba(0, 0, 0, .035), 20px 20px 1px rgba(0, 0, 0, .03), 22px 22px 1px rgba(0, 0, 0, .025), 24px 24px 1px rgba(0, 0, 0, .02), 26px 26px 1px rgba(0, 0, 0, .015), 28px 28px 1px rgba(0, 0, 0, .01), 30px 30px 1px rgba(0, 0, 0, .005), 32px 32px 1px rgba(0, 0, 0, .0025), 34px 34px 1px rgba(0, 0, 0, .002), 36px 36px 1px rgba(0, 0, 0, .0015), 38px 38px 1px rgba(0, 0, 0, .001);
}

 

2. Текст с длинной тенью на тёмном фоне

.long-sadow {
    color: #f4f4f4;
    line-height: 1.2;
    letter-spacing: .1em;
    margin: 15px 0;
    font-size: 8vw;
    font-weight: lighter;
    text-transform: uppercase;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, .08), 2px 2px 1px rgba(0, 0, 0, .075), 4px 4px 1px rgba(0, 0, 0, .07), 6px 6px 1px rgba(0, 0, 0, .065), 8px 8px 1px rgba(0, 0, 0, .06), 10px 10px 1px rgba(0, 0, 0, .055), 12px 12px 1px rgba(0, 0, 0, .05), 14px 14px 1px rgba(0, 0, 0, .045), 16px 16px 1px rgba(0, 0, 0, .04), 18px 18px 1px rgba(0, 0, 0, .035), 20px 20px 1px rgba(0, 0, 0, .03), 22px 22px 1px rgba(0, 0, 0, .025), 24px 24px 1px rgba(0, 0, 0, .02), 26px 26px 1px rgba(0, 0, 0, .015), 28px 28px 1px rgba(0, 0, 0, .01), 30px 30px 1px rgba(0, 0, 0, .005), 32px 32px 1px rgba(0, 0, 0, .0025), 34px 34px 1px rgba(0, 0, 0, .002), 36px 36px 1px rgba(0, 0, 0, .0015), 38px 38px 1px rgba(0, 0, 0, .001);
}

 
В приведённых выше примерах, параметры тени, размер и насыщенность шрифта одинаковы, изменяется только цвет текста color:, в зависимости от цвета фона родительского контейнера.
Также вы можете изменить и смещение тени относительно надписи, например, чтобы тень падала влево и вниз, достаточно изменить первое значение в параметрах тени на отрицательное, тем самым установить сдвиг тени влево по горизонтали относительно текста. В итоге получится примерно такая картина:

2. Смещение тени влево относительно надписи

.long-sadow {
    color: #333333;
    ine-height: 1.2;
    margin: 15px 0;
    font-size: 8vw;
    font-weight: lighter;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-shadow: -1px 1px 8px rgba(0, 0, 0, .08), -2px 2px 1px rgba(0, 0, 0, .075), -4px 4px 1px rgba(0, 0, 0, .07), -6px 6px 1px rgba(0, 0, 0, .065), -8px 8px 1px rgba(0, 0, 0, .06), -10px 10px 1px rgba(0, 0, 0, .055), -12px 12px 1px rgba(0, 0, 0, .05), -14px 14px 1px rgba(0, 0, 0, .045), -16px 16px 1px rgba(0, 0, 0, .04), -18px 18px 1px rgba(0, 0, 0, .035), -20px 20px 1px rgba(0, 0, 0, .03), -22px 22px 1px rgba(0, 0, 0, .025), -24px 24px 1px rgba(0, 0, 0, .02), -26px 26px 1px rgba(0, 0, 0, .015), -28px 28px 1px rgba(0, 0, 0, .01), -30px 30px 1px rgba(0, 0, 0, .005), -32px 32px 1px rgba(0, 0, 0, .0025), -34px 34px 1px rgba(0, 0, 0, .002), -36px 36px 1px rgba(0, 0, 0, .0015), -38px 38px 1px rgba(0, 0, 0, .001);
}

 
При просмотре примеров в развёрнутом виде, изменяйте размер окна браузера и вы увидите, как текст плавно подстраивается под любые размеры, а в месте с текстом, соответственно видоизменяется и тень.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru