Оригінальна анімована галерея на css3

Поява технології CSS3 дозволило веб-дизайнерам представляти зображення в різних формах без використання jQuerу. І в цій статті я хотів показати вам простий спосіб оригінально оформити галерею із зображеннями, при цьому вони будуть ще і анімованими, і все це без використання js-скриптів.

Відео: Animated Responsive Website Tutorial - HTML5 / CSS3, Image Slider & Drop Down Menu

Приклад галереї можна побачити тут:

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

HTML частина

Зображення розташовані в блоці з класом photo-grid:

Відео: Full Screen Responsive / Animated Landing Page - HTML5 & CSS3 Tutorial

1234567

lt;div class="Photo-grid"gt;lt;img src="Images / image1.jpg"gt;lt;img src="Images / image2.jpg"gt;lt;img src="Images / image3.jpg"gt; .............................lt;img src="Images / image25.jpg"gt;lt;/divgt;

Відео: Responsive Lightbox Image Gallery - HTML5 / CSS3 Web Development Tutorial

CSS частина

Зараз додамо зображень абсолютне позиціонування, тінь, поворот, і ефект при наведенні:

123456789101112131415161718192021222324252627282930313233343536373839404142434445

.photo-grid {margin-top: 160px-padding: 10px-position: relative-text-align: center-}.photo-grid img {background: none repeat scroll 0 0 #FFFFFF-box-shadow: 0 0 5px black-float: left-height: 172px-margin-top: -100px-padding: 10px-position: relative-transition: all 0.4s ease-in 0s-width: 172px-z-index: 2-}.photo-grid img: nth-child(2n) {transform: translate(10px, 0px) rotate(8deg)-}.photo-grid img: nth-child(2n+1) {left: 25px-transform: translate(-10px, -30px) rotate(-5deg)-}.photo-grid img: nth-child(3n) {left: 17px-top: -10px-transform: translate(-10px, -30px) rotate(-15deg)-}.photo-grid img: nth-child(5n) {left: -8px-top: 20px-}.photo-grid img: nth-child(6n) {transform: translate(-10px, -30px) rotate(15deg)-}.photo-grid img: nth-child(9n) {transform: translate(-10px, -30px) rotate(22deg)-}.photo-grid img: hover {box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.6)-transform: rotate(360deg) scale(1.5)-z-index: 10-}

Того ж ми задали для зображень різні значення для властивості z-index для того щоб зображення могли перекривати один одного і створювався ефект обсягу.

Відео: How to create a Image Slider in CSS

CSS частина

От і все. Дана галерея дуже проста, при бажанні можна її вдосконалити. Наприклад, зазначення прозорості всіх інших зображень, якщо курсор знаходиться над якимось одним. Думаю дана галерея приживеться у вас на сайті або блозі, так як вона не використовує ніяких JS-скриптів і дуже швидко завантажується.

Успіхів!

джерело: onextrapixel.com