Галерея на чистом CSS

Автор: Евгений Рыжков Дата публикации: 11.08.2010

Когда слышишь «галерея» представляешь себе javascript плагин, а-ля lightbox или highslide. Пора расстаться с этими стереотипами — галерея на чистом CSS, без использования javascript (демо).

Что там можно увидеть

  • Opera 10+, Chrome 3+, Safari 4+ — тени, поворот фото, плавное увеличение фото при наведении, при клике плавный разворот и увеличение фото, плавный показ подписи к фото, реакция на клик по кнопке «закрыть»
  • Firefox 3.5+ — тени, поворот фото, при клике увеличение фото (без анимации), реакция на клик по кнопке «закрыть»
  • IE6-8, и другие браузеры более старых версий — увеличение фото по клику на маленькую, реакция на специальную кнопку «закрыть»

Как это работает

Уверен, многие в курсе, что тень для блока способно сделать box-shadow в сочетании с некоторыми вендорными свойствами. Остальное же рассмотрим детальней. Алгоритм:

  1. берем большую фото, с помощью CSS свойств width и height уменьшаем ее до нужного размера;
  2. с помощью CSS3 свойства transform делаем наклон фото;
  3. при наведении на фото (:hover) немного увеличиваем размеры фото;
  4. когда элемент получает фокус или становится активным (псевдоклассы :active и :focus — так и происходит эмуляция события onClick) увеличиваем фото до ее реальных размеров и помещаем в центр блока галереи;
  5. поворот большого фото в нормальное положение осуществляется свойством transform, а плавность поворота transition;
  6. реакция на клик по кнопке «закрыть» — так просто ссылка теряет фокус и возвращается в свое исходной состояние. аналогичное действие будет, если кликнешь, например, вне блока галереи;
  7. плавность показа кнопки «закрыть» и подписи реализуется все тем же transition.

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

Заметки

  • Для ссылок я добавил атрибут tabindex. Это позволяет webkit браузерам нормально реагировать на клик по фото (без этого атрибута, чтобы фото увеличивалось нужно было удерживать левую кнопку мыши). А так же дает возможность в некоторых браузерах делать табобход галереи.
  • В данном примере мне не нравится, что увеличение фото всегда начинается с верхнего левого угла, а не от текущего положения маленького фото. Автор примера решал это путем указания начальных координат для ссылок. Когда ссылка получала фокус, она получала абсолютное позиционирование, смещалась к заданным координатам. Но это вело к серьезному багу в Opera 10.5 (мелкие фото разъезжались по странице), плюс это не очень универсально. Мне же не удалось и избежать проблем с Opera и одновременно сделать увеличение от текущей позиции.

Какой от этого практический толк?

Логичный вопрос. Не нужно обладать сверхнаблюдательностью чтобы заметить разное поведение галереи в разных браузерах. И то, что тут куча недостатков и багов. Это все понятно. Браузеры только начинают вводить поддержку HTML5 и CSS3. Цель этого примера — наглядно продемонстрировать новые возможности, которые несет в себе CSS3.

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

Материалы