Время чтения: 3 мин. 26 марта 2015 в 16:35 CSS,Блог веб-разработчика
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

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

Отзывчивая 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]

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

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

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Комментарий

[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Начать сотрудничество
Заполните поля ниже. Я лично перезвоню Вам в течении 15 минут для обсуждения деталей.

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

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

Введите контактный Email для отправки точной стоимости

или позвоните мне по телефону
+7-499-70-300-44
Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Комментарий

[contact-form-7 404 "Not Found"]
Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

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

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

Комментарий

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

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

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

Комментарий

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

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

Введите ваше Skype логин *

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

Выберите программу

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

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

Сообщение

Заказать сайт
Первые 14 дней бесплатно. Оставьте номер email и контактный телефон. Я лично перезвоню Вам в течении 10 минут, для обсуждения деталей.


Ваш email

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

Комментарий или вопрос