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

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

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

Длинные тени 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>

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

длинная тень при помощи javascript

Как видите, результат довольно неплохой, особенно, если учесть, что это делалось не при помощи графического редактора, а средствами 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.

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

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

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

Мой Исходник

Плагин jquery.flatShadow.js

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 5

  1. Ольга

    Почему-то не работает скрипт на вордпресс. И еще вопрос как подключить библиотеку jquery, она подключена на сайте. Помогите разобраться.

    • dimadv7

      Меня обескураживает такая формулировка: «И еще вопрос как подключить библиотеку jquery, она подключена на сайте.» Так вам нужно помочь подключить, или она подключена? В шапке сайта нужно подключить скрипт. Посмотреть как это должно выглядеть, можно в исходнике.

  2. Ольга

    Дело в том, что библиотека подключена на вордпресс. То есть нужно просто добавить в шапку и
    $(document).ready(function(){
    $(«.long-shadow»).flatshadow({
    color: «#0c90b7»,
    angle: «SE»,
    fade: true,
    boxShadow: «#2397a2»
    });
    });
    Верно?

    • dimadv7

      Нет, нужно ниже подключения библиотеки jquery подключить flatshadow

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

      А потом тот скрипт с настройками, который вы описали. Скачайте исходник, посмотрите как там)

  3. Ольга

    Спасибо! Все получилось. Разобралась. Неправильно был прописан путь к файлу. ))))

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