Создаем эффект для галереи изображений: стопка фотографий
Одиночное изображение, вставленное в страницу HTML, с помощью только CSS можно сделать в виде стопки полароидных фотографий. нужно только использовать псевдо-элементы.
Идея
Выше приведенное изображение демонстрирует эффект, который является целью нашего урока. Его можно использовать как для отдельных картинок, так и для галерей, повышая их визуальную привлекательность.
Попробуем воспроизвести эффект только средствами CSS с использованием минимума разметки HTML.
HTML
Для эффекта нужен только контейнер div
с картинкой внутри. Также добавим контейнеру класс, который будет соответствовать определенному эффекту.
<div class='stackone'> <img src="http://lorempixum.com/200/200/city/7" /> </div>
Стили верхнего изображения
Зададим стили для верхнего изображения:
.stackone { border: 6px solid #fff; float: left; height: 200px; width: 200px; margin: 50px; position: relative; -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); box-shadow: 2px 2px 5px rgba(0,0,0,0.3); }
Так как планируется использовать данный эффект в галереях, то изображения будут смещаться влево, а также устанавливается поле 50px для формирования интервала между ними. Высота и ширина устанавливается фиксированной 200px х 200px.
Устанавливаем относительное позиционирование, потому что позже мы будем использовать абсолютное позиционирование для псевдо-элементов.
Также формируем тонкую рамочку вокруг картинки с использованием тени.
Наше изображение должно выглядеть вот так:
Первый псевдо-элемент
Теперь пришло время добавить первый элемент в стопку. Нужно, чтобы он выглядел как еще одно изображение под верхней картинкой. Решим задачу с помощью псевдо-элемента :before,
для которого будут использоваться идентичные стили.
Добавим в код псевдо-элемент:
.stackone:before { content: ""; }
Такая синтаксическая конструкция добавляет еще один элемент, для которого можно устанавливать стили, в структуру документа. Зададим теже свойства, что и для верхнего изображения:
.stackone:before { content: ""; height: 200px; width: 200px; background: #eff4de; border: 6px solid #fff; -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); box-shadow: 2px 2px 5px rgba(0,0,0,0.3); }
Ключевым моментом является отказ от загрузки изображения. Иначе для каждой картинки придется иметь три ее копии! Так как основная часть псевдо-элемента будет скрыта, то можно использовать фон для достижения нужного эффекта.
Сейчас наш код выдаст следующий результат:
Псевдо-элемент интерферирует с верхним изображением. Для исправления ситуации нужно сделать позиционирование и сдвинуть псевдо-элемент вниз, используя z-index
:
.stackone:before { content: ""; height: 200px; width: 200px; background: #eff4de; border: 6px solid #fff; position: absolute; z-index: -1; top: 0px; left: -10px; -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); }
Абсолютное позиционирование позволяет разместить псевдо-элемент точно в том месте, где нужно относительно верхнего изображения. Также мы используем поворот, что создать иллюзию стопки картинок.
Второй псевдо-элемент
Пришло время для добавления третьего элемента в нашу композицию. Для него используем псевдо-элемент :after
. Все выше изложенные соображения действуют и здесь. Отличия заключаются только в цвете фона, координатах позиционирования и величине угла поворота.
.stackone:after { content: ""; height: 200px; width: 200px; background: #768590; border: 6px solid #fff; position: absolute; z-index: -1; top: 5px; left: 0px; -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); -ms-transform: rotate(4deg); transform: rotate(4deg); }
В итоге мы имеем следующий вид нашей картинки:
Продолжаем
В описании идеи изображения в галерее имели разный вид стопок. Для формирования окончательного решения нам нужно сделать несколько классов, которые будут различаться позиционированием и углами поворота псевдо-элементов.
Нужно создать несколько классов, которые будут иметь иметь общую часть. А для формирования правил общей части можно воспользоваться специальным селектором, который облегчит работу, но и создаст условия для поддержки и модификации кода:
div[class*='stack'] { float: left; position: relative; margin: 50px; } div[class*='stack'], div[class*='stack']:before, div[class*='stack']:after { border: 6px solid #fff; height: 200px; width: 200px; -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); box-shadow: 2px 2px 5px rgba(0,0,0,0.3); } div[class*='stack']:before, div[class*='stack']:after { background: #768590; content: ""; position: absolute; z-index: -1; } div[class*='stack']:before { background: #eff4de; }
Теперь можно создать сколько угодно вариантов оформления стопок в виде классов, имена которых начинаются на stack. Для демонстрации сделаем три класса:
/*СТОПКА ОДИН*/ .stackone:before { top: 4px; left: -6px; } .stackone:after { top: -2px; left: -6px; } /*СТОПКА ДВА*/ .stacktwo:before { top: 0px; left: -10px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } .stacktwo:after { top: 5px; left: 0px; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); -ms-transform: rotate(4deg); transform: rotate(4deg); } /*СТОПКА ТРИ*/ .stackthree:before { top: 5px; left: -15px; z-index: -1; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } .stackthree:after { top: -2px; left: -10px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); }
Теперь код удобно модифицировать, так как все свойства сгруппированы в одном месте. И легко добавить новый вариант стопки.
Совместимость с браузерами
Тестирование показало, что выше описанный код работает в Safari, Firefox, Chrome, Opera и IE9+. В IE7 выводится просто галерея изображений без эффекта стопки, что является приемлемым результатом.
Для IE8 нужно приметь трюк, чтобы скрыть псевдо-элементы. Тогда браузер будет выводить простую галерею изображений, как и IE7.
div[class*='stack']:before, div[class*='stack']:after { background: #768590; content: ""; position: absolute; z-index: -1; /*Для IE8*/ height: 0px\9; width: 0px\9; border: none\9; }
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/hb7ovAZtKGE/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Все мы сидим в сточной канаве, но некоторые при этом смотрят на звезды Уайльд Оскар - (1854-1900) - английский писатель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.