Галерея картинок в CSS

Галерея картинок в CSS

Галерея картинок в CSS Тематические порталы Портал CSS • Портал Веб-разработчиков

Галерея картинок, сделанная при помощи CSS

В статье об оформлении изображений были затронуты основные параметры оформления картинок. Теперь можно приступить к оформлению галереи картинок. Это очень удобно и практично с точки зрения подачи информации на странице.

Настройки галереи картинок CSS

У нас есть ряд картинок на странице, которые мы оформляем в HTML следующим образом:

<div class="gallery">
  <div class="gallery_name">Название галереи</div>
  <div class="image"><a href="#"><img src="https://ru.wikijournal.org/w-wiki/images/thumb/a/a9/Example.jpg/150px-Example.jpg"></a><div class="description">Описание изображения</div></div>
  <div class="image"><a href="#"><img src="https://ru.wikijournal.org/w-wiki/images/thumb/a/a9/Example.jpg/150px-Example.jpg"></a><div class="description">Описание изображения</div></div>
  <div class="image"><a href="#"><img src="https://ru.wikijournal.org/w-wiki/images/thumb/a/a9/Example.jpg/150px-Example.jpg"></a><div class="description">Описание изображения</div></div>
  <div class="image"><a href="#"><img src="https://ru.wikijournal.org/w-wiki/images/thumb/a/a9/Example.jpg/150px-Example.jpg"></a><div class="description">Описание изображения</div></div>
</div>

Отметим следующее:

• <div class="gallery"> - это блок всей галереи изображений.
• <div class="gallery_name"> - блок с названием галереи изображений.
• <div class="image"> - блок непосредственно с изображением.
• <div class="description"> - внутренний блок с подписью для каждой картинки.

Теперь ко всем элементам применяем CSS настройки:

.gallery {
  float: left;
  border: 1px solid grey;
}

div.gallery_name {
text-align: center;
font-weight: bold;
margin: 2px;
}

img {
border: 1px solid gray;
}

div.image {
border: 1px solid gray;
float: left;
padding: 4px;
margin: 3px;
background: #FAFAFA;
}

div.description {
text-align: center;
font-size: 10pt;
}

• К классу gallery применяем общие настройки всего блока с картинками:
  • float: left; - расположение галереи слева страницы.
  • border: 1px solid grey; - настройки границы всей галереи с картинками.
• К блоку с названием галереи применяем настройки:
  • text-align: center; - центрируем расположение текста по центру родительского юдлока.
  • font-weight: bold; - устанавливаем жирный шрифт.
  • margin: 2px; - определяем внешние границы блока.
• Настраиваем внешний вид самой картинки:
  • border: 1px solid gray; - делаем границу по самому изображению.
  • float: left; - устанавливаем расположение картинок по левому крвю.
  • padding: 4px; - задаём внутренние границы картинки.
  • margin: 3px; - задаём внешние границы картинки, чтобы они не прилипали друг к другу.
  • background: #FAFAFA; - настраиваем фон блока, в котором расположено изображение.
• И в конце задаём параметры текста описания картинки:
  • text-align: center; - центрируем расположение текста по центру блока.
  • font-size: 10pt; - делаем немного меньше шрифт для подписи ко всем картинкам в галерее.

Примечание

Результат таких настроек можете увидеть на картинке сверху. Скачать исходный файл можно здесь. Любые вопросы, комментарии, дополнения оставляйте пожалуйста на странице обсуждения.