Фотогалерея с использованием только CSS3
В данном уроке мы сделаем фотогалерею с лайтбоксом только на CSS3 (никакого JavaScript). Будут использоваться следующие свойства CSS3: user-select, box-sizing, transition, box-shadow и transform.
Разметка HTML
Сложного ничего в разметке нет. Обратите внимание на атрибут tabindex
- он определяет порядок фотографии при использовании клавиши табуляции.
<div class="gallery"> <a tabindex="1"><img src="/images/1.jpg"></a> <a tabindex="2"><img src="/images/2.jpg"></a> <a tabindex="3"><img src="/images/3.jpg"></a> <a tabindex="4"><img src="/images/4.jpg"></a> <a tabindex="5"><img src="/images/5.jpg"></a> <a tabindex="6"><img src="/images/6.jpg"></a> <a tabindex="7"><img src="/images/7.jpg"></a> <a tabindex="8"><img src="/images/8.jpg"></a> <a tabindex="9"><img src="/images/9.jpg"></a> <a tabindex="10"><img src="/images/10.jpg"></a> <a tabindex="11"><img src="/images/11.jpg"></a> <a tabindex="12"><img src="/images/12.jpg"></a> </div>
CSS
Изображениям придается вид фотографий поляроида, разбросанных небрежно по столу. Для эффекта используется трансформация rotate. Для вывода фотографии на передний план подключаем псевдо-класс :focus (который соответствует любому элементу, который имеет фокус ввода). Так как мы определили атрибут tabindex
, то теперь можно переключаться между фотографиями с помощью клавиши ‘tab’ (и ‘shift+tab’).
.gallery { margin: 100px auto 0; width: 800px; } .gallery a { display: inline-block; height: 135px; position: relative; width: 180px; /* Отключаем выделение */ -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; } .gallery a img { border: 8px solid #fff; border-bottom: 20px solid #fff; cursor: pointer; display: block; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 1; /* Свойства для изменения рамки */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; /* Правила перехода */ -webkit-transition: all 1.0s ease; -moz-transition: all 1.0s ease; -o-transition: all 1.0s ease; transition: all 1.0s ease; /* Тени */ -moz-box-shadow: 2px 2px 4px #444; -webkit-box-shadow: 2px 2px 4px #444; -o-box-shadow: 2px 2px 4px #444; box-shadow: 2px 2px 4px #444; } /* Вращение */ .gallery a:nth-child(1) img { -moz-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } .gallery a:nth-child(2) img { -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } .gallery a:nth-child(3) img { -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } .gallery a:nth-child(4) img { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .gallery a:nth-child(5) img { -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } .gallery a:nth-child(6) img { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } .gallery a:nth-child(7) img { -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); } .gallery a:nth-child(8) img { -moz-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg); } .gallery a:nth-child(9) img { -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); } .gallery a:nth-child(10) img { -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg); } .gallery a:nth-child(11) img { -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg); } .gallery a:nth-child(12) img { -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); } .gallery a:focus img { cursor: default; height: 250%; left: -150px; top: -100px; position: absolute; width: 250%; z-index: 25; /* Правила перехода */ -webkit-transition: all 1.0s ease; -moz-transition: all 1.0s ease; -o-transition: all 1.0s ease; transition: all 1.0s ease; /* Правила перехода */ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
Готово!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/PoWUVrQaro8/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Великие умы обсуждают идеи, средние - обсуждают поступки, а малые - людей Индийская пословица |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.