Содержание

СSS Галерея



CSS можно использовать для создания галереи изображений.

Добавьте описание изображения здесь

Добавьте описание изображения здесь

Добавьте описание изображения здесь

Добавьте описание изображения здесь


Галерея изображений

Следующая галерея изображений создается с помощью CSS:

Пример




div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div>
  <a target=»_blank» href=»fjords.jpg»>
    <img src=»5terre.jpg» alt=»Пять земли»>
  </a>
  <div>Добавьте описание изображения здесь</div>
</div>

<div>
  <a target=»_blank» href=»forest.jpg»>
    <img src=»forest.jpg» alt=»Лес»>
  </a>
  <div>Добавьте описание изображения здесь</div>

</div>

<div>
  <a target=»_blank» href=»lights.jpg»>
    <img src=»lights.jpg» alt=»Северное сияние»>
  </a>
  <div>Добавьте описание изображения здесь</div>
</div>

<div>
  <a target=»_blank» href=»mountains.jpg»>
    <img src=»mountains.jpg» alt=»Горы»>
  </a>
  <div>Добавьте описание изображения здесь</div>
</div>

</body>
</html>

Редактор кода »

Еще примеры

Отзывчивая галерея изображений

Как использовать медиа запросы CSS для создания отзывчивой галереи изображений, которая будет хорошо смотряться на настольных компьютерах, планшетах и смартфонах.

Редактор кода »

schoolsw3.com

Несколько классных JQuery галерей и слайдеров изображений для Вашего сайта

Приветствую Вас, дорогие читатели блога beloweb.ru. В этот уже почти осенний день хочется порадовать Вас классной подборкой бесплатных галерей и слайдеров изображений, которые используют JQuery.

Хочу сказать, что эта подборка не большая, но я думаю, что Вы в ней найдёте для себя что нибудь полезное и интересное. 

В общем давайте смотреть.

Если Вы пропустили прошлые подборки, тогда рекомендую посмотреть:

  • Свежая подборка CSS и jQuery элементов веб — дизайна в 2012 году
  • 16 бесплатных JQuery и CSS3 полезностей для Вашего сайта
  • Свежие JQuery галереи, слайдеры и CSS3 меню для веб — мастера

JQuery галерея для фото Galleriffic

Пример ι Скачать исходники

Красивая галерея для сайта

Пример ι Скачать исходники

Плавный JQuery слайдер изображений для сайта

Пример ι Скачать исходники

Самая простая галерея для сайта

Пример ι Скачать исходники

Простой слайдер для портфолио

Пример ι Скачать исходники

Необычный слайдер для фото

Пример ι Скачать исходники

Красивая и полноэкранная JQuery галерея на сайт

Пример ι Скачать исходники

Замечательная галерея с миниатюрами

Пример ι Скачать исходники

Очень красивая полноэкранная JQuery галерея с миниатюрами

Пример ι Скачать исходники

Небольшая и простая галерея с использованием JQuery

Пример ι Скачать исходники

Ещё одна очень красивая полноэкранная галерея

Пример ι Скачать исходники

Самая простая небольшая галерея

Пример ι Скачать исходники

beloweb.ru

Устанавливаем галерею для сайта с красивым эффектом размытия

Лого SiteHere.ru