» »

Создание фото галереи с помощью CSS без JS


С помощью таких не замысловатых кодов вполне прилично можно сделать очень даже неплохую галерею изображений без JS. Ну если кого не устраивает такое что без помощи JS, то прошу прощения. Так получилось и сильно не ругайте пожалуйста

HTML вставляем по месту
Код
<div class="gallery">
  <a tabindex="1"><img src="картинка"></a>
  <a tabindex="2"><img src="картинка"></a>
  <a tabindex="3"><img src="картинка"></a>
  <a tabindex="4"><img src="картинка"></a>
  <a tabindex="5"><img src="картинка"></a>
  <a tabindex="6"><img src="картинка"></a>
  <a tabindex="7"><img src="картинка"></a>
  <a tabindex="8"><img src="картинка"></a>
  <a tabindex="9"><img src="картинка"></a>
  <a tabindex="10"><img src="картинка"></a>
  <a tabindex="11"><img src="картинка"></a>
  <a tabindex="12"><img src="картинка"></a>
</div>
Ну а данные стили можно установить в таблицу стилей CSS вашего сайта в самый низ,или создать отдельный файл и установить на нужных страницах сайта
Код
.gallery{margin:100px auto 0;width:800px}
.gallery a{display:inline-block;height:135px;position:relative;width:180px; -moz-user-select:none;-webkit-user-select:none;-khtml-user-select:none;user-select:none}
.gallery a img{border:8px solid #FFF;border-bottom:20px solid #FFF;cursor:pointer;display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1; -moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box; -webkit-transition:all 1.0s ease;-moz-transition:all 1.0s ease;-o-transition:all 1.0s ease;transition:all 1.0s ease; -moz-box-shadow:2px 2px 4px #444;-webkit-box-shadow:2px 2px 4px #444;-o-box-shadow:2px 2px 4px #444;box-shadow:2px 2px 4px #444}
.gallery a:nth-child(1) img{-moz-transform:rotate(-25deg);-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}
.gallery a:nth-child(2) img{-moz-transform:rotate(-20deg);-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}
.gallery a:nth-child(3) img{-moz-transform:rotate(-15deg);-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}
.gallery a:nth-child(4) img{-moz-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}
.gallery a:nth-child(5) img{-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}
.gallery a:nth-child(6) img{-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}
.gallery a:nth-child(7) img{-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);transform:rotate(5deg)}
.gallery a:nth-child(8) img{-moz-transform:rotate(10deg);-webkit-transform:rotate(10deg);transform:rotate(10deg)}
.gallery a:nth-child(9) img{-moz-transform:rotate(15deg);-webkit-transform:rotate(15deg);transform:rotate(15deg)}
.gallery a:nth-child(10) img{-moz-transform:rotate(20deg);-webkit-transform:rotate(20deg);transform:rotate(20deg)}
.gallery a:nth-child(11) img{-moz-transform:rotate(25deg);-webkit-transform:rotate(25deg);transform:rotate(25deg)}
.gallery a:nth-child(12) img{-moz-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg)}
.gallery a:focus img{cursor:default;height:250%;left:-150px;top:-100px;position:absolute;width:250%;z-index:25; -webkit-transition:all 1.0s ease;-moz-transition:all 1.0s ease;-o-transition:all 1.0s ease;transition:all 1.0s ease; -moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}


Просмотр результата - ДЕМО
23.01.2016 Просмотров: 394 Комментарий: (10)

Поделиться в социальных сетях

Материал разместил

Комментарий: 9
Kosten
Kosten 23.01.2016 19:481
0
Так не чего галерея, есть для меня один минус, это чтоб при втором клике, фотография на свое место вставала.
FeStemBer
FeStemBer 23.01.2016 19:572
0
Интересно всегда делают, но также бы сказал, то увеличенное изображение не очень дает нажать следующие, но возможно.
Maryges
Maryges 23.01.2016 20:084
0
Вполне нормально можно клик сделать на те которые рядом. Также нормально открываются.

workman
workman 23.01.2016 20:073
0
Ну ребята. Я же написал что без JS скриптов сделано. Какие повторные нажатия то?? Где-нибудь в стороны кликни и спрячется ...
Tergran
Tergran 23.01.2016 20:185
0
Но нужно и иметь эксклюзивный сайт, чтоб мотивация было, такой скрипт установить.
ucozmental
ucozmental 23.01.2016 20:236
0
Но почему, можно просто страницу выделить под этот скрипт.
csretven
csretven 23.01.2016 22:047
0
Не понимаю, для чего вообще делать, если есть фотоальбом.
Сопрано
Сопрано 23.01.2016 22:098
0
Мне вот понравилось, но не думаю что на сайт бы поставил, даже фотоальбом не активировал на этот счет.
Tergran
Tergran 23.01.2016 23:299
0
Раньше искали коды под этот модуль, а сейчас он сам не плохо сделан.
avatar