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

Хотя в 2013 году был популярен Flat дизайн, всё таки сайты с объемными элементами имеют какую-то свою привлекательность. В этой статье мы с помощью плагина написанного на jQuery создадим тени для иконок. Но тени можно придавать не только для иконок, а также для отдельных символов. При этом в данном примере реализована смена цвета при перезагрузке страницы. Поэтому в этой статье мы создадим эффект объема с помощью теней

Похожие уроки:

• Как придать легкий объем блоку на CSS3
• Потрясающая анимированная 3D кнопка на CSS3

Приступим!

Пример можно увидеть здесь по ссылке ниже. Также можно скачать архив с уже работающим примером и переделать под себя (это является наиболее подходящим вариантом в большинстве случаев, чем создавать самостоятельно с нуля. Но! Если у вас время и желание в этом разобраться, тогда приступайте к чтению статьи и самостоятельному созданию эффекта объема с помощью теней):

Посмотреть примерСкачать

HTML часть

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

1
2

<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:

1
2
3
4
5
6

<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 пикселей:

1
2
3
4
5
6
7
8
9

.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 функция:

1
2
3
4

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

Где:

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

Вывод

Интересный и легкий плагин. Возможно вы найдете ему применение у себя на сайте.

Успехов!

Источник: www.onextrapixel.com