Эффект объема с помощью теней

therafisone

изображения

116

Приступим к созданию эффекта:

HTML часть

Подключаем две библиотеки:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.flatshadow.js"></script>

Все иконки находятся в блоках с классом flat-icon:

<div class="main">
 <div data-angle="SE" class="flat-icon"><i class="customicon-home"></i></div>
 <div data-angle="SE" class="flat-icon"><i class="customicon-camera"></i></div>
 <div data-angle="SE" class="flat-icon"><i class="customicon-heart"></i></div>
 <div data-angle="SE" class="flat-icon"><i class="customicon-comment"></i></div>
</div>

CSS часть

Иконки находятся в блоках в виде кругов. Для этого необходимо задать радиус 50 пикселей:

.flat-icon {
 width: 40px;
 padding:23px 28px;
 font-size: 50px;
 letter-spacing: 0;
 border-radius: 50px;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
}

jQuery часть

И затем очень маленькая jQuery функция:

$(".flat-icon").flatshadow({
 fade: true,
 boxShadow: "#d7cfb9"
});

Где:
.flat-icon — это селектор элемента которому необходимо придать тень.
fade — имеет два значение: true и false. Если значение равно true, тогда тени не будут очень длинными.
boxShadow — цвет тени в шестнадцатеричном виде.

Вывод

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

Успехов!

Скачать

Сообщить о битой ссылке

ключевые слова не указаны