Галерея на чистом CSS
Дата публикации: 11.08.2010
Когда слышишь «галерея» представляешь себе javascript плагин, а-ля lightbox или highslide. Пора расстаться с этими стереотипами — галерея на чистом CSS, без использования javascript (демо).
Что там можно увидеть
- Opera 10+, Chrome 3+, Safari 4+ — тени, поворот фото, плавное увеличение фото при наведении, при клике плавный разворот и увеличение фото, плавный показ подписи к фото, реакция на клик по кнопке «закрыть»
- Firefox 3.5+ — тени, поворот фото, при клике увеличение фото (без анимации), реакция на клик по кнопке «закрыть»
- IE6-8, и другие браузеры более старых версий — увеличение фото по клику на маленькую, реакция на специальную кнопку «закрыть»
Как это работает
Уверен, многие в курсе, что тень для блока способно сделать box-shadow в сочетании с некоторыми вендорными свойствами. Остальное же рассмотрим детальней. Алгоритм:
- берем большую фото, с помощью CSS свойств width и height уменьшаем ее до нужного размера;
- с помощью CSS3 свойства transform делаем наклон фото;
- при наведении на фото (:hover) немного увеличиваем размеры фото;
- когда элемент получает фокус или становится активным (псевдоклассы :active и :focus — так и происходит эмуляция события onClick) увеличиваем фото до ее реальных размеров и помещаем в центр блока галереи;
- поворот большого фото в нормальное положение осуществляется свойством transform, а плавность поворота transition;
- реакция на клик по кнопке «закрыть» — так просто ссылка теряет фокус и возвращается в свое исходной состояние. аналогичное действие будет, если кликнешь, например, вне блока галереи;
- плавность показа кнопки «закрыть» и подписи реализуется все тем же transition.
Прелесть этого примера еще и в том, что старые браузеры среагируют на те свойства, которые знают, другие про игнорируют. Но в целом функциональность галереи сохраняется.
Заметки
- Для ссылок я добавил атрибут tabindex. Это позволяет webkit браузерам нормально реагировать на клик по фото (без этого атрибута, чтобы фото увеличивалось нужно было удерживать левую кнопку мыши). А так же дает возможность в некоторых браузерах делать табобход галереи.
- В данном примере мне не нравится, что увеличение фото всегда начинается с верхнего левого угла, а не от текущего положения маленького фото. Автор примера решал это путем указания начальных координат для ссылок. Когда ссылка получала фокус, она получала абсолютное позиционирование, смещалась к заданным координатам. Но это вело к серьезному багу в Opera 10.5 (мелкие фото разъезжались по странице), плюс это не очень универсально. Мне же не удалось и избежать проблем с Opera и одновременно сделать увеличение от текущей позиции.
Какой от этого практический толк?
Логичный вопрос. Не нужно обладать сверхнаблюдательностью чтобы заметить разное поведение галереи в разных браузерах. И то, что тут куча недостатков и багов. Это все понятно. Браузеры только начинают вводить поддержку HTML5 и CSS3. Цель этого примера — наглядно продемонстрировать новые возможности, которые несет в себе CSS3.
Это не прием, который можно слепо копировать в свои проекты. Это посыл для размышлений, что скоро мы будем верстать сайты по другому и многие привычные приемы и техники канут в лету. А может даже кто-то возьмет некоторые возможности для использования в своих работах уже сейчас.