Скрипты галерей изображений на CSS

10 июня 2008, 15:23 Евгений Белодед HTML и CSS рейтинг +29-

В продолжение статьи о скриптах галерей на JS, сегодняшняя статья посвящена скриптам галерей, которые сделаны исключительно средствами CSS.

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

Галерея фотографа

Очень простая и легкая в эксплуатации галерея. Можно добавлять примечания к каждой из картинок. Вам нужен красивый и удобный фотоальбом? Значит это ваш выбор.

галерея фотографа

Простенький CSS фотоальбом

Весьма незамысловатая галерея. Показывается номер картинки и соответственно сама картинка. Но, ни номер, ни рисунок не помечены больше ничем. Одна из самых простых галерей.

Простенький css-фотоальбом

Многостраничная галерея фотографа

Основано на Suckerfish HoverLightbox. Картинки могут быть разбросаны по темам, что, несомненно, очень удобно для посетителей ваших галерей. А, следовательно, посетителей будет больше… Рисунки, при наведении на них курсоом мышки, увеличиваются.

Многостраничная галерея фотографа

CSS-ная картинная галерея

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

СSS-ная картинная галерея

СSS-ная фото-витрина

Использует CSS. Никаких особых наворотов в этой галерее нет. Самая обычная галерея. Всё просто – а простота ещё никому не мешала.

СSS-ная фото-витрина

Галерея Hoverbox

По сути, это фото галерея, которой ничего не нужно, кроме CSS. И притом весит всего 8КБ!

Галерея Hoverbox

Галерея Photo-scroll

Комбинация некоторых предыдущих галерей. Ничем особенным она не отличается от предыдущих, представленных на нашем сайте. Такая же простая и лёгкая в обращении.

Галерея Photo-scroll

«Раздвижная» галерея фотографа

Эта галерея сразу бросается в глаза своей непохожестью на все остальные. Смотрится очень оригинально: картинки сжаты по вертикали (между прочим сокращение 8:1) и, проводя курсором над одной из картинок, та увеличивается до своих нормальных размеров. Также может быть уменьшено не только по вертикали, но и по горизонтали.

Раздвижная галеря фотографа

Перевод с сайта Smashing Magazine.

Рекламное место, которое может стать вашим

Понравилась статья?

Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.

Читать в Яндекс.Ленте Добавить в Google Добавить в Netvibes
  •  

Комментарии — 10

RSS
  • Аватарка
    13 августа 2008 в 13:31 Сергей
    А я сделал себе галерею на 4images уже http://gallery.8school.org.ua/ А так бы использовал один из ваших примеров, спасибо!
  • Аватарка
    17 января 2009 в 16:08 Alexpts
    Отличная статья, давно хотел сделать галерею на CSS для WordPress блога.
  • Аватарка
    17 января 2009 в 16:09 ]]>Alexpts]]>
    А можете рассказать как сделать такое же добавление комментариев (на аяксе)?
  • Аватарка
    9 февраля 2009 в 15:06 ]]>sda]]>
    Нашел что искал, не думал что на css можно создать галерею. Хотя я ток начинаю.... еще раз спасибо
  • Аватарка
    26 февраля 2009 в 0:33 ]]>newzna]]>
    вот искал php или java скрипт похожий на "«Раздвижная» галерея фотографа". короче эта удовлетворила больше.
  • Аватарка
    4 марта 2009 в 15:26 Clone89
    Спасибо, очень много примеров, доходчивое описание.
    В закладки.
  • Аватарка
    28 марта 2009 в 21:28 Олег
    А самые интересные галереи все таки остались на smashingmagazine:
    http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/

    Советую эти две:
    http://smoothgallery.jondesign.net/showcase/gallery/
    http://slideshow.triptracker.net/

    Очень красивые!
  • Аватарка
    28 ноября 2009 в 1:07 Владимир
    Очень хороший сайтик!)
    огромное спасибо!
  • Аватарка
    23 марта в 12:18 ]]>Саша]]>
    Отличная галерея...Попробую её поюзать!
  • Аватарка
    31 августа в 19:11 ]]>Алексей]]>
    Спасибо огромное, нашел то что нужно! А главное, что работает просто и быстро, без примудростей.
  • Эл. почта (используется для Граватарки)
  • Домашняя страница
  • Имя в Твиттере
  • Разрешенные теги Текст сообщения (надо бы заполнить это поле)
  • как выглядит какой тег
    жирный текст <b>жирный текст</b>
    курсивный тект <i>курсивный тект</i>
    зачеркнутый текст <s>зачеркнутый текст</s>
    подчеркнутый текст <u>подчеркнутый текст</u>
    ссылка <a href="адрес">ссылка</a>
    function foo() { ... }
    <pre><code>function foo() { ... } </code></pre>