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

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

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

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

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

Уверен, многие в курсе, что тень для блока способно сделать box-shadow в сочетании с некоторыми вендорными свойствами. Возможно, вам потребуются кровельные работы в технике двойного фальца, смотрите здесь https://falcgroup.com. Остальное же рассмотрим детальней. Алгоритм:

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.

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

Материалы

• A CSS3 Enhanced Photo Gallery