• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создание адаптивной галереи изображений CSS (Адаптивная галерея, которая отображает изображений на CSS)
Создание адаптивной галереи изображений CSS
Kosten
Дата: Суббота, 2019-01-19, 23:34 | Сообщение 1
Администраторы
Сообщений:24185
Награды: 56


Создание адаптивной галереи становится необходимо для сайта, так, чтоб корректно выводило изображение. В этом материале представлена галерея в горизонтальном положение, которую можно применить по различным функциям на сайте. При установке задается ширина и высота, но если просматривать с мобильных аппаратов, то становятся картинка вертикальном виде, но все отображается красиво. Изначально создано для адаптации веб страниц под различные размеры экрана и ориентации с использованием строк и столбцов.

Вообще изначально выглядит так, здесь веб мастера зависит, сколько по количеству поставит.



Это уже вид с небольшого экрана мобильного телефона



Приступаем к установке:

HTML

Код
<header>
<div><img src="Ссылка на картинку-1.jpg" alt></div>
<div><img src="Ссылка на картинку-2.jpg" alt></div>
<div><img src="Ссылка на картинку-3.jpg" alt></div>
<div><img src="Ссылка на картинку-4.jpg" alt></div>
<div><img src="Ссылка на картинку-5.jpg" alt></div>
</header>


CSS

Код
header {
  padding: 3px;
  font-size: 0;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  display: -webkit-box;
  display: flex;
}
header div {
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto;
  width: 198px;
  margin: 3px;
}
header div img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 400px) {
  header div { margin: 0; }
  header { padding: 0; }
  
}


Все как видим не сложно.

Демонстрация
Прикрепления: 5534933.jpg(32.5 Kb) · 5094355.jpg(28.5 Kb) · a-be.zip(2.2 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2019-01-20, 00:09 | Сообщение 2
Администраторы
Сообщений:24185
Награды: 56


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



Здесь уже видимость с мобильного аппарата.



Эффект увеличение картинки при наведение.



Приступаем к установке:

HTML

Код
  <div class="kasetu-mesabegum">
    <img src="Первая ссылка изображение">
    <img src="Вторая ссылка изображение">
    <img src="Третья ссылка изображение">
    <img src="Четвертая ссылка изображение">
  </div>

CSS

Код
.kasetu-mesabegum{
display: flex;
flex-wrap: wrap;
justify-content: center;
  cursor:pointer;
}
img{
    margin: 5px;
    transition: all 1s;
}
img:hover{
    transform: scale(1.1)
}


Под любой тематический сайт подойдет не говоря про эффект увеличение картинки при наведение курсора.

Демонстрация
Прикрепления: 2957163.png(30.2 Kb) · 7195397.jpg(74.9 Kb) · 7044605.jpg(40.5 Kb) · dsan.zip(1.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создание адаптивной галереи изображений CSS (Адаптивная галерея, которая отображает изображений на CSS)
  • Страница 1 из 1
  • 1
Поиск: