Как создать длинную тень при помощи javascript

Всем привет. Сегодня хотел бы рассказать вам о таком классном эффекте, как длинные тени (long shadows)ъ. Они очень здорово гармонируют с flat дизайном и это тренд 2014 года. Множество уроков в сети о том, как сделать длинную тень в photoshoop или illustrator, но не так много информации про то, как создать длинную тень при помощи javascript и css.

Вот я и решил разобраться в этом вопросе. Сначала, предлагаю посмотреть на примеры, тем кто не в курсе что такое длинные тени:

Не знаю как вам, а меня впечатляет этот эффект, поэтому я и решил срочно написать в блог о нем.

Как создать длинную тень при помощи javascript

Для того, чтобы создать длинную тень, нам понадобиться javascript плагин jquery.flatshadow.js (Скачивайте с GitHub или в конце статьи )

Далее необходимо подключит jquery библиотеку (последняя версия с официального сайта):

<script type="text/javascript" src="/js/jquery.flatshadow.js"></script>

Теперь необходимо подключить сам плагин. В своем примере я поместил его в папку js, которая находиться в корне сайта. Получилось так:

<script src="/js/jquery.flatshadow.js"></script>

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

Как видите, результат довольно неплохой, особенно, если учесть, что это делалось не при помощи графического редактора, а средствами html, css и javascript. Продолжим...

Создание длинной тени. Разметка.

Для того, чтобы добавить тень элементам, необходимо придумать класс, который в последствии будет использоваться в скрипте. Я так и назвал его - long-shadow.

<h1 class="long-shadow">Smartlanding</h1>

Теперь давайте пропишем стили:

.long-shadow{
   font-family: 'courgette';
   font-size: 80px;
   padding:15px 20px;
   display: inline-block;
   overflow: hidden;
   border: 5px solid #fff;
   margin: 50px;
}

Для того, чтобы задать настройки тени, необходимо вставить небольшой скрипт перед закрывающимся тегом head.

<script>
   $(document).ready(function(){
   $(".long-shadow").flatshadow({
   color: "#0c90b7",
   angle: "SE",
   fade: true,
   boxShadow: "#2397a2"
   });
   });
 </script>

Это самое интересное. Здесь color - отвечает за то, какой фон будет под текстом. Angle- это угол тени. Существует несколько вариантов значений, которые можно задать (NE, SE, SW, NW, N, E, S, W). Как вы поняли - это стороны света_). Fade - этот параметр создает градиент тени в прозрачный. Имеет два значения true и false. (Значение true - включает, а false - выключает). Boxshadow - это тень блока, в котором находиться текст. По умолчанию выключено. Но можно задать любой цвет, в формате RGB.

Все эти возможности приведены на скриншоте выше. Полное демо всех возможностей можно посмотреть тут.

Если смотрели демо, то скорее всего заметили, на последнем примере, что плагин успешно работает и с иконическими шрифтами. (О том, как подключать нестандартные шрифты, я рассказывал в этой статье)

Вот такой вот способ создания длинных теней при помощи javascrip. А на сегодня - все. Пока.

Мой Исходник

Плагин jquery.flatShadow.js