Добавляем тени с помощью Flat Shadow.js

Сейчас мы познакомимся с небольшим jQuery плагином Flat Shadow. С его помощью, мы можем легко добавить тень к элементам страницы. В этом уроке рассмотрим способы работы с данным плагином.

Работа с Flat Shadow.js

Использование

Для использования плагина, подключите jQuery и файл jquery.flatshadow.js в ваш HTML, наклепайте HTML и CSS и примените плагин.

HTML

Код
<div class="flat-icon">FLAT</div>
<div class="flat-icon">UI</div>
<div class="flat-icon">IS</div>
<div class="flat-icon">PRETTY</div>
<div class="flat-icon">AWESOME</div>

CSS

Код
.flat-icon {
  padding:23px 28px;
  font-size: 45px;
  font-weight: bold;
  display: inline-block;
  line-height: 100%;
  overflow: hidden;
  text-transform: uppercase;
  margin-right: 15px;
}

JS

Код
$(".flat-icon").flatshadow({
color: "#3498DB",
  angle: "SE",
  fade: false,
  boxShadow: false // (#000000)
});

Данный код оформляет элементы так, как показано в первом демо примере.


Опция color позволяет выставить цвет фона всем элементам разом. Если не задать это значение самому, то оно будет выставлено случайным образом из заданной палитры.

Опцией angle мы можем контролировать направление тени внутри .flat-iconcontainer. Возможные направления: N (север), E (восток), или комбинация SE (юго-восток), NW (северо-запад). Опять же, если не задать значение, то оно будет выставлено случайным образом.

Опция fade предназначена для градиентной тени, которую вы можете увидеть в четвёртом примере.


Выставив опцию boxShadow, мы можем применить эффект тени к самому контейнеру. Тут нам необходимо указать 6 шестнадцатеричных символов для цвета, к примеру, если мы хотим добавить чёрную тень, то значение будет "#000000”.

Детальная настройка

Если вам нужно задать каждому из элементов особый стиль, то вот как это можно сделать:

HTML

Код
<div class="flat-icon" data-color="#2ecc71" data-angle="NE">FLAT</div>
<div class="flat-icon" data-color="#1ABC9C" data-angle="NW">UI</div>
<div class="flat-icon" data-color="#3498db" data-angle="SE">IS</div>
<div class="flat-icon" data-color="#9b59b6" data-angle="SW">PRETTY</div>
<div class="flat-icon" data-color="#34495e" data-angle="NE">AWESOME</div>

и просто вызовите функцию без параметров:

JS

Код
$(".flat-icon").flatshadow({
  fade: false,
  boxShadow: false
});

Вот и всё. Теперь каждый из элементов, оформлен по-своему.


  • FalleN

  • 2966

  • 1

  • 235

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

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

Для добавления вы должны авторизироваться!