Ефект обсягу за допомогою тіней

Відео: Як намалювати обсяг! Основи світлотіні в малюнку олівцем

Хоча в 2013 році був популярний Flat дизайн, все таки сайти з об`ємними елементами мають якусь свою привабливість. У цій статті ми з допомогою плагіна написаного на jQuery створимо тіні для іконок. Але тіні можна надавати не тільки для іконок, а також для окремих символів. При цьому в даному прикладі реалізована зміна кольору при перезавантаженні сторінки. Тому в цій статті ми створимо ефект обсягу за допомогою тіней

Схожі уроки:

Як надати легкий обсяг блоку на CSS3
3D CSS стрічечка
Приголомшлива анімована 3D кнопка на CSS3

Приступимо!

Приклад можна побачити тут по посиланню нижче. Також можна завантажити архів з уже працюють прикладом і переробити під себе (це є найбільше підходящим варіантом в більшості випадків, ніж створювати самостійно з нуля. Але! Якщо у вас час і бажання в цьому розібратися, тоді приступайте до читання статті і самостійного створення ефекту обсягу за допомогою тіней):

Подивитися прімерСкачать

HTML частина

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

12	lt;script type="Text / javascript" src="Http://code.jquery.com/jquery-1.9.1.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / jquery.flatshadow.js"gt; lt;/scriptgt;

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

lt;div class="Main"gt;lt;div data-angle="SE" class="Flat-icon"gt; lt;i class="Customicon-home"gt; lt;/igt; lt;/divgt;lt;div data-angle="SE" class="Flat-icon"gt; lt;i class="Customicon-camera"gt; lt;/igt; lt;/divgt;lt;div data-angle="SE" class="Flat-icon"gt; lt;i class="Customicon-heart"gt; lt;/igt; lt;/divgt;lt;div data-angle="SE" class="Flat-icon"gt; lt;i class="Customicon-comment"gt; lt;/igt; lt;/divgt;lt;/divgt;

CSS частина

Іконки знаходяться в блоках в вигляді кіл. Для цього необхідно задати радіус 50 пікселів:

123456789

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

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

Відео: Серія 50. Як додати обсяг фотографії в Photoshop

де:

.flat-icon - це селектор елемента якому необхідно надати тінь.
fade - має два значення: true і false. Якщо значення дорівнює true, тоді тіні не будуть довжелезними.
boxShadow - колір тіні в шістнадцятковому вигляді.