logo частный фрилансер Москва

Отзывчивая HTML галерея | Responsive Full Width Grid

26 марта 2015 в 16:35 CSS,Блог веб-разработчика
Хотите я произведу настройку как описано в статье вместо вас? Стоимость работы: 500 руб. Срок исполнения: 1 час. Работаю без предоплаты.

Отзывчивая HTML галерея | Responsive Full Width Grid

В данном примере представлена отзывчивая HTML галерея. Встроить можно в любой сайт на любом движке и чистый html, php.

Структура HTML

[php]
<ul class="cbp-rfgrid">
<li><a href="#"><img src="images/cat.jpg" /><div><h3>Felis catus</h3></div></a></li>
<li><a href="#"><img src="images/cat.jpg" /><div><h3>Felis catus</h3></div></a></li>
<li><a href="#"><img src="images/cat.jpg" /><div><h3>Felis catus</h3></div></a></li>
<li><a href="#"><img src="images/cat.jpg" /><div><h3>Felis catus</h3></div></a></li>
<li><a href="#"><img src="images/cat.jpg" /><div><h3>Felis catus</h3></div></a></li>
<li><a href="#"><img src="images/cat.jpg" /><div><h3>Felis catus</h3></div></a></li>
<li><a href="#"><img src="images/cat.jpg" /><div><h3>Felis catus</h3></div></a></li>
<li><a href="#"><img src="images/cat.jpg" /><div><h3>Felis catus</h3></div></a></li>
<!— … —>
</ul>
[/php]

Структура CSS

[php]
.cbp-rfgrid {
margin: 35px 0 0 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}

.cbp-rfgrid li {
position: relative;
float: left;
overflow: hidden;
width: 16.6666667%; /* Fallback */
width: -webkit-calc(100% / 6);
width: calc(100% / 6);
}

.cbp-rfgrid li a,
.cbp-rfgrid li a img {
display: block;
width: 100%;
cursor: pointer;
}

.cbp-rfgrid li a img {
max-width: 100%;
}

/* Flexbox is used for centering the heading */
.cbp-rfgrid li a div {
position: absolute;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
background: rgba(71,163,218,0.2);
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
text-align: center;
opacity: 0;
}

.cbp-rfgrid li a:hover div {
opacity: 1;
}

.cbp-rfgrid li a div h3 {
width: 100%;
color: #fff;
text-transform: uppercase;
font-size: 1.4em;
letter-spacing: 2px;
padding: 0 10px;
}

/* Example for media query: change number of items per row */

@media screen and (max-width: 1190px) {
.cbp-rfgrid li {
width: 20%; /* Fallback */
width: -webkit-calc(100% / 5);
width: calc(100% / 5);
}
}

@media screen and (max-width: 945px) {
.cbp-rfgrid li {
width: 25%; /* Fallback */
width: -webkit-calc(100% / 4);
width: calc(100% / 4);
}
}

@media screen and (max-width: 660px) {
.cbp-rfgrid li {
width: 33.3333333%; /* Fallback */
width: -webkit-calc(100% / 3);
width: calc(100% / 3);
}
}

@media screen and (max-width: 660px) {
.cbp-rfgrid li {
width: 33.3333333%; /* Fallback */
width: -webkit-calc(100% / 3);
width: calc(100% / 3);
}
}

@media screen and (max-width: 400px) {
.cbp-rfgrid li {
width: 50%; /* Fallback */
width: -webkit-calc(100% / 2);
width: calc(100% / 2);
}
}

@media screen and (max-width: 300px) {
.cbp-rfgrid li {
width: 100%;
}
}
[/php]

Скачать исходники

Похожие статьи

Оставить заявку
Для экономии вашего времени на все вопросы отвечают программисты/сеошники/маркетологи, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

Введите контактный E-mail: *

Ваш вопрос:

Пожалуйста, докажите, что вы человек, выбрав автомобиль.

Рассчитать стоимость
Для экономии вашего времени на все вопросы отвечают программисты/сеошники/маркетологи, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

Прикрепить файл:

Ваш вопрос:

Введите контактный E-mail: *

Заказать обратный звонок
Для экономии вашего времени на все звонки отвечают программисты, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

Введите ваше имя *

Как с вами связаться? *

Введите контактный телефон *

Корзина пуста