Адаптивная галерея · CSS 3D Transform & Bootstrap

Адаптивная галерея CSS 3D Transform

Адаптивная галерея, для работы используется только CSS свойства, добавлен красивый эффект трансформации с отбрасываемой тенью, требуется наличие подключенного фреймворка bootstrap.

Подключение и установка галереи CSS 3D Transform & Bootstrap

Подключение стилей CSS

Стили галереи можно подключить в любом месте страницы на которой подключена адаптивная галерея.

<style>
.css3d {
display: block; 
width:240px; 
height:160px; 
margin:90px auto;
perspective:1000px;
}
.css3d a.oneImg {
background:url("//atmpl.ru/design/galleries/2014/css-3d/adaptive-atmpl.jpg");
background-size:100% 100%;
}
.css3d a.twoImg {
background:url("//atmpl.ru/design/galleries/2014/css-3d/adaptive-atmpl.jpg");
background-size:100% 100%;
}
.css3d a.treeImg {
background:url("//atmpl.ru/design/galleries/2014/css-3d/adaptive-atmpl.jpg");
background-size:100% 100%;
}
.css3d a {
display: block; 
width: 100%; 
height: 100%;
background-size:0, cover;
transform-style:preserve-3d;
transition:all 0.5s;
}
.css3d:hover a {
transform:rotateX(80deg);
transform-origin:bottom;
}
.css3d a:after {
content:''; 
position:absolute; 
left:0; 
bottom:0; 
width:100%; 
height:36px;
background:inherit; 
background-size:cover, cover;
background-position:bottom;
transform: rotateX(90deg); 
transform-origin:bottom;
}
.css3d a span {
color:white; 
text-transform:uppercase;
position:absolute; 
top:100%; 
left:0; 
width:100%;
font-famaly:Georgia;
font-size:14px; 
font-weight:bold;
padding-top:8px;
text-align:center;
transform:rotateX(-89.99deg); 
transform-origin:top;
z-index:9;
}
.css3d a:before {
content:''; 
position:absolute; 
top:0; 
left:0;
width:100%; 
height:100%;
background:rgba(0, 0, 0, 0.5); 
box-shadow:0 0 100px 50px rgba(0, 0, 0, 0.5);
transition:all 0.5s; 
opacity:0.15;
transform:rotateX(95deg) translateZ(-80px) scale(0.75);
transform-origin:bottom;
}
.css3d:hover a:before {
opacity:1;
box-shadow:0 0 25px 25px rgba(0, 0, 0, 0.5);
transform:rotateX(0) translateZ(-60px) scale(0.85);
}
@media(min-width: 360px) {
.css3d {
width:320px; 
height:240px; 
margin:90px auto;
}
.css3d a:after { 
height:41px;
}
.css3d a span {
font-size:16px; 
font-weight:bold;
padding-top:10px;
}
}
@media(min-width: 540px) {
.css3d {
width:480px; 
height:320px; 
}
}
@media(min-width: 990px) {
.css3d {
width:240px; 
height:160px; 
}
.css3d a span {
font-size:14px; 
padding-top:8px;
}
}
@media(min-width: 1208px) {
.css3d {
width:320px; 
height:240px; 
}
}
</style>

Подключение изображений

Изображения подключаются в стилях CSS и их количество может быть увеличено до требуемого.

.css3d a.oneImg {
background:url("//atmpl.ru/design/galleries/2014/css-3d/adaptive-atmpl.jpg");
background-size:100% 100%;
}
.css3d a.twoImg {
background:url("//atmpl.ru/design/galleries/2014/css-3d/adaptive-atmpl.jpg");
background-size:100% 100%;
}
.css3d a.treeImg {
background:url("//atmpl.ru/design/galleries/2014/css-3d/adaptive-atmpl.jpg");
background-size:100% 100%;
}

Настройка шрифта

Изображения могут иметь разный цвет, поэтому может потребоваться перенести значение цвета свойства селектора css3d a span классу изображения. И добавить к определённому изображению цвет используя css3d a.ИМЯ span.

.css3d a span
color:white; - Белый цвет шрифта

Пример переноса

<style>
.css3d {
display: block; 
width:240px; 
height:160px; 
margin:90px auto;
perspective:1000px;
}
.css3d a.oneImg {
background:url("//atmpl.ru/design/galleries/2014/css-3d/adaptive-atmpl.jpg");
background-size:100% 100%;
}
.css3d a.twoImg {
background:url("//atmpl.ru/design/galleries/2014/css-3d/adaptive-atmpl.jpg");
background-size:100% 100%;
}
.css3d a.treeImg {
background:url("//atmpl.ru/design/galleries/2014/css-3d/adaptive-atmpl.jpg");
background-size:100% 100%;
}
.css3d a {
display: block; 
width: 100%; 
height: 100%;
background-size:0, cover;
transform-style:preserve-3d;
transition:all 0.5s;
}
.css3d:hover a {
transform:rotateX(80deg);
transform-origin:bottom;
}
.css3d a:after {
content:''; 
position:absolute; 
left:0; 
bottom:0; 
width:100%; 
height:36px;
background:inherit; 
background-size:cover, cover;
background-position:bottom;
transform: rotateX(90deg); 
transform-origin:bottom;
}
.css3d a span {
color:white; 
text-transform:uppercase;
position:absolute; 
top:100%; 
left:0; 
width:100%;
font-famaly:Georgia;
font-size:14px; 
font-weight:bold;
padding-top:8px;
text-align:center;
transform:rotateX(-89.99deg); 
transform-origin:top;
z-index:1;
}

/* ->Здесь делаем третьему изображению свой цвет<- */
.css3d a.treeImg span { 
color:green;
}

.css3d a:before {
content:''; 
position:absolute; 
top:0; 
left:0;
width:100%; 
height:100%;
background:rgba(0, 0, 0, 0.5); 
box-shadow:0 0 100px 50px rgba(0, 0, 0, 0.5);
transition:all 0.5s; 
opacity:0.15;
transform:rotateX(95deg) translateZ(-80px) scale(0.75);
transform-origin:bottom;
}
.css3d:hover a:before {
opacity:1;
box-shadow:0 0 25px 25px rgba(0, 0, 0, 0.5);
transform:rotateX(0) translateZ(-60px) scale(0.85);
}
@media(min-width: 360px) {
.css3d {
width:320px; 
height:240px; 
margin:90px auto;
}
.css3d a:after { 
height:41px;
}
.css3d a span {
font-size:16px; 
font-weight:bold;
padding-top:10px;
}
}
@media(min-width: 540px) {
.css3d {
width:480px; 
height:320px; 
}
}
@media(min-width: 990px) {
.css3d {
width:240px; 
height:160px; 
}
.css3d a span {
font-size:14px; 
padding-top:8px;
}
}
@media(min-width: 1208px) {
.css3d {
width:320px; 
height:240px; 
}
}
</style>

Добавление кода

Код устанавливается в требуемом месте, мы использовали плагин bootstrap с разметкой class="col-md-4" и настроили на адаптивное отображение при любом разрешении. Ниже показан один горизонтальный комплект галереи.

<div class="col-md-4">
<div class="css3d">
<a href="//atmpl.ru" class="oneImg">
<span>Адаптивный сайт</span>
</a>
</div>
</div>
<div class="col-md-4">
<div class="css3d">
<a href="//atmpl.ru" class="twoImg">
<span>Адаптивный сайт</span>
</a>
</div>
</div>
<div class="col-md-4">
<div class="css3d">
<a href="//atmpl.ru" class="treeImg">
<span>Адаптивный сайт</span>
</a>
</div>
</div>

Подключенная галерея

Адаптивный сайт
Адаптивный сайт
Адаптивный сайт 
<style>
.css3d {
display: block; 
width:240px; 
height:160px; 
margin:90px auto;
perspective:1000px;
}
.css3d a.oneImg {
background:url("//atmpl.ru/design/galleries/2014/css-3d/adaptive-atmpl.jpg");
background-size:100% 100%;
}
.css3d a.twoImg {
background:url("//atmpl.ru/design/galleries/2014/css-3d/adaptive-atmpl.jpg");
background-size:100% 100%;
}
.css3d a.treeImg {
background:url("//atmpl.ru/design/galleries/2014/css-3d/adaptive-atmpl.jpg");
background-size:100% 100%;
}
.css3d a {
display: block; 
width: 100%; 
height: 100%;
background-size:0, cover;
transform-style:preserve-3d;
transition:all 0.5s;
}
.css3d:hover a {
transform:rotateX(80deg);
transform-origin:bottom;
}
.css3d a:after {
content:''; 
position:absolute; 
left:0; 
bottom:0; 
width:100%; 
height:36px;
background:inherit; 
background-size:cover, cover;
background-position:bottom;
transform: rotateX(90deg); 
transform-origin:bottom;
}
.css3d a span {
color:white; 
text-transform:uppercase;
position:absolute; 
top:100%; 
left:0; 
width:100%;
font-famaly:Georgia;
font-size:14px; 
font-weight:bold;
padding-top:8px;
text-align:center;
transform:rotateX(-89.99deg); 
transform-origin:top;
z-index:1;
}

/* ->Здесь делаем третьему изображению свой цвет<- */
.css3d a.treeImg span { 
color:green;
}

.css3d a:before {
content:''; 
position:absolute; 
top:0; 
left:0;
width:100%; 
height:100%;
background:rgba(0, 0, 0, 0.5); 
box-shadow:0 0 100px 50px rgba(0, 0, 0, 0.5);
transition:all 0.5s; 
opacity:0.15;
transform:rotateX(95deg) translateZ(-80px) scale(0.75);
transform-origin:bottom;
}
.css3d:hover a:before {
opacity:1;
box-shadow:0 0 25px 25px rgba(0, 0, 0, 0.5);
transform:rotateX(0) translateZ(-60px) scale(0.85);
}
@media(min-width: 360px) {
.css3d {
width:320px; 
height:240px; 
margin:90px auto;
}
.css3d a:after { 
height:41px;
}
.css3d a span {
font-size:16px; 
font-weight:bold;
padding-top:10px;
}
}
@media(min-width: 540px) {
.css3d {
width:480px; 
height:320px; 
}
}
@media(min-width: 990px) {
.css3d {
width:240px; 
height:160px; 
}
.css3d a span {
font-size:14px; 
padding-top:8px;
}
}
@media(min-width: 1208px) {
.css3d {
width:320px; 
height:240px; 
}
}
</style>
<div class="col-md-4">
<div class="css3d">
<a href="//atmpl.ru" class="oneImg">
<span>Адаптивный сайт</span>
</a>
</div>
</div>
<div class="col-md-4">
<div class="css3d">
<a href="//atmpl.ru" class="twoImg">
<span>Адаптивный сайт</span>
</a>
</div>
</div>
<div class="col-md-4">
<div class="css3d">
<a href="//atmpl.ru" class="treeImg">
<span>Адаптивный сайт</span>
</a>
</div>
</div>

Демо галереи CSS 3D Transform & Bootstrap

Здесь Вы можете посмотреть работу кода для установки, для этого нажмите на кнопку выполнения кода. Попробуйте внести свои изменения в код и снова нажать выполнение, если страница результата не будет закрыта данные после внесённых изменений на ней обновятся.

Проверка галереи на адаптивность

Галерея прошла тест на адаптивность для разных размеров. Проведите проверку сами, скопируйте ссылку на страницу с галереей, перейдите на страницу теста, вставьте ссылку в поле адреса и нажмите Enter.

//atmpl.ru/design/galleries/2014/css-3d/adaptive-test-gallery-css-3d.html
Тест на адаптивность галереи CSS 3D Transform & Bootstrap

Скачать галерею CSS 3D Transform & Bootstrap

Для скачивания понадобится перейти в наш репозиторий GitHub и скачать демо страницу с галереей.

Скачать
Рейтинг: 4.0/5 из 4
Добавлено Автор Ник Источник Просмотров Комментариев Теги
20-12-2014 Михаил Меренков aTmpl © 3584 0 responsive gallery, адаптивная галерея, галерея css