logo у меня все покупают г. Москва

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

26 марта 2015 в 16:35 CSS,Блог веб-разработчика

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

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

Отзывчивая HTML галерея | Responsive Full Width Grid #8642398 Отзывчивая HTML галерея | Responsive Full Width Grid #2642598 Отзывчивая HTML галерея | Responsive Full Width Grid #3357202 Отзывчивая HTML галерея | Responsive Full Width Grid #9357002 Отзывчивая HTML галерея | Responsive Full Width Grid #15356802 Отзывчивая HTML галерея | Responsive Full Width Grid #21356602 Отзывчивая HTML галерея | Responsive Full Width Grid #27356402 Отзывчивая HTML галерея | Responsive Full Width Grid #33356202 Отзывчивая HTML галерея | Responsive Full Width Grid #39356002 Отзывчивая HTML галерея | Responsive Full Width Grid #45355802 Отзывчивая HTML галерея | Responsive Full Width Grid #51355602 Отзывчивая HTML галерея | Responsive Full Width Grid #57355402 Отзывчивая HTML галерея | Responsive Full Width Grid #63355202 Отзывчивая HTML галерея | Responsive Full Width Grid #69355002 Отзывчивая HTML галерея | Responsive Full Width Grid #75354802 Отзывчивая HTML галерея | Responsive Full Width Grid #81354602 Отзывчивая HTML галерея | Responsive Full Width Grid #87354402 Отзывчивая HTML галерея | Responsive Full Width Grid #93354202 Отзывчивая HTML галерея | Responsive Full Width Grid #99354002 Отзывчивая HTML галерея | Responsive Full Width Grid #105353802 Отзывчивая HTML галерея | Responsive Full Width Grid #111353602 Отзывчивая HTML галерея | Responsive Full Width Grid #117353402 Отзывчивая HTML галерея | Responsive Full Width Grid #123353202 Отзывчивая HTML галерея | Responsive Full Width Grid #129353002 Отзывчивая HTML галерея | Responsive Full Width Grid #135352802 Отзывчивая HTML галерея | Responsive Full Width Grid #141352602 Отзывчивая HTML галерея | Responsive Full Width Grid #147352402 Отзывчивая HTML галерея | Responsive Full Width Grid #153352202 Отзывчивая HTML галерея | Responsive Full Width Grid #159352002 Отзывчивая HTML галерея | Responsive Full Width Grid #165351802

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


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

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

Ваш вопрос:

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

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

Ваш вопрос:

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

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

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

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

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

Создадим сайт по картинке или вашему макету
Цена: от 2,900 руб. Я бесплатно рассчитаю стоимость реализации сайта в течение 15 минут.
Как это работает? После расчета стоимости я отпиваюсь вам и вы принимаете решение о дальнейшем сотрудничестве.
Задать вопрос
Опишите вопрос своими словами. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

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

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

Комментарий

There are no products