Декорируем галерею с помощью CSS3
В данном уроке представлено несколько методов декорирования галереи изображений только средствами CSS. Для создания эффектов используются псевдо-элементы :before и :after, а также трансформации. Подобная техника позволяет обойтись без дополнительной разметки и кода JavaScript для автоматического оформления материалов сайта.
Разметка HTML
Код для галереи представляет собой простой неупорядоченный список без дополнительных избыточных элементов:
<ul class="gallery clip"> <li> <img src="/images/sample-1.jpg" alt="картинка"> </li> <li> <img src="/images/sample-2.jpg" alt="картинка"> </li> <li> <img src="/images/sample-1.jpg" alt="картинка"> </li> </ul>
CSS
Ниже представлена общая часть стилей галереи для класса .gallery. Ключевой момент заключается в том, чтобы установить относительное позиционирование.
.gallery { margin: 0 0 25px; text-align: center; } .gallery li { display: inline-block; margin: 5px; list-style: none; } .gallery a { position: relative; display: inline-block; }
Элемент :before
Теперь определим контейнер 30px x 60px с фоновым изображением скрепки для элемента a:before. Обратите внимание, что свойство content должно быть пустым и объявленным в наборе правил CSS. Без объявления свойства content контейнер не будет выводиться.
.clip a:before { position: absolute; content: ' '; top: -5px; left: -4px; width: 30px; height: 60px; background: url(images/paper-clip.png) no-repeat; }
Художественная рамка
Вы можете использовать метод для добавления любого графического элемента поверх изображения. В нашем примере просто устанавливается фоновое изображение и выравнивается положение и размеры.
.frame a:before { position: absolute; content: ' '; top: -22px; left: -23px; width: 216px; height: 166px; background: url(images/frame.png) no-repeat; }
Галерея HTML5
Теперь сделаем более продвинутый вариант галереи с использованием разметки HTML5. В примере используется теги <figure> для контейнера изображения и <figcaption> для названия.
<ul class="gallery tape"> <li> <figure> <img src="/images/sample-4.jpg" alt="image"> <figcaption>Image Caption</figcaption> </figure> </li> <li> <figure> <img src="/images/sample-5.jpg" alt="image"> <figcaption>Image Caption</figcaption> </figure> </li> <li> <figure> <img src="/images/sample-6.jpg" alt="image"> <figcaption>Image Caption</figcaption> </figure> </li> </ul>
CSS
В коде CSS добавляем два элемента :before - один для <figure> и другой для <li>. Маскирующее изображение overlay.png используется для элемнета figure:before, а изображение полоски скотча - для элемента a:before.
.tape li { width: 170px; padding: 5px; margin: 15px 10px; border: solid 1px #cac09f; background: #fdf8e4; text-align: center; box-shadow: inset 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.2); } .tape figure { position: relative; margin: 0; } .tape a:before { position: absolute; content: ' '; top: 0; left: 0; width: 100%; height: 100%; background: url(images/overlay.png) no-repeat; } .tape figcaption { font: 100%/120% Handlee, Arial, Helvetica, sans-serif; color: #787568; } .tape a:before { position: absolute; z-index: 2; content: ' '; top: -12px; left: 50%; width: 115px; height: 32px; margin-left: -57px; background: url(images/tape.png) no-repeat; }
Трансформации CSS3
Добавим фон в виде пробкового покрытия и повернем изображение с помощью трансформаций CSS3.
.transform { background: url(images/cork-bg.png); padding: 25px; border-radius: 10px; box-shadow: inset 0 1px 5px rgba(0,0,0,.4); } .transform li { border: none; }
Селектор Nth
Для того, чтобы галерея выглядела более эффектно и натурально, будем случайным образом вращать изображения с помощью селектора Nth.
.transform li:nth-of-type(4n+1) { -webkit-transform: rotate(2deg); } .transform li:nth-of-type(2n) { -webkit-transform: rotate(-1deg); } .transform li:nth-of-type(4n+3) { -webkit-transform: rotate(2deg); }
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/uAXWrk-FM8Q/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 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.