Создание фото галереи с помощью 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> Код .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)} Просмотр результата - ДЕМО | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 9 | |
| |
