Диагональная галерея миниатюр
Мы привыкли к использованию стандартных модульных сеток и четких горизонтальных и вертикальных линий. Нет ничего удивительного, что в последнее время популярность набирают привлекающие внимание шаблоны на основе диагональных линий. В данном простом уроке мы создадим очень простую диагональную галерею миниатюр.
В уроке будем использовать 2D-трансформации CSS3 и псевдо-элементы для вывода элементов, похожих на бриллианты, с фоновыми изображениями.
Примечание: в примерах кода, приведенных в тексте урока, опущены префиксы браузеров перед свойствами CSS. Полный код можно посмотреть в исходниках.
Шаг 1. Подготовка
Для создания демонстрационной галереи нам потребуется 6 изображений (используем размер 250px x 250px) размещенных в одном спрайте (в нашем примере размером 1500px x 250px).
Шаг2. Один бриллиант
Вот разметка для одного бриллианта с миниатюрой. Используем для класса: “.diamond” для вращения элемента и “.thumb” для добавления фонового изображения (обратите внимание, что центральный "бриллиант" не имеет фонового изображения, поэтому для него устанавливается только класс “.diamond”).
<a class="diamond thumb" id="cake" href="/"> <p>Вишня</p> </a>
Шаг 3. Вращаем квадрат
Добавим правила CSS. Мы используем для ширины и высоты значение 178px. Почему? Диагональ такого квадрата равна 250px (смотри рисунок ниже).
.diamond { display: block; width: 178px; height: 178px; background: #5c3e52; transform: rotate(45deg); } .thumb { background: url(../images/sprite.jpg); position: relative; overflow: hidden; } .image p {visibility:hidden}
Шаг 4. Вращаем фоновое изображение
Когда мы вращаем квадрат, то фоновое изображение вращается вместе с ним, что нам не требуется. Будем фиксировать фон с помощью псевдо-элемента :after.
.thumb:after { content: ""; position: absolute; top: -36px; left: -36px; width: 250px; height: 250px; background: inherit; transform: rotate(-45deg); }
Выше приведенная картинка показывает, как позиционируется .thumb:after. Он наследует фон от родительского элемента. Вращение осуществляется в другую сторону, поэтому пользователю выводится фон в нормальном положении.
Шаг 5. Галерея
Для создания нашего примера используются плавающие элементы, хотя вы можете построить подобную структуру с помощью абсолютного позиционирования.
<div class="wrap"> <h1>Маленькие удовольствия создают день...</h1> <a class="diamond thumb intend" id="cake" href="/ "><p>Вишня</p></a> <a class="diamond thumb dark" id="chair" href="/ "><p>Эспрессо</p></a> <a class="diamond thumb break" id="library" href="/ "><p>Книга</p></a> <a class="diamond" href="/ "><p>Удовольствие</p></a> <a class="diamond thumb dark " id="dream" href="/ "><p>Мечта</p></a> <a class="diamond thumb intend" id="roses" href="/ "><p>Роза</p></a> <a class="diamond thumb dark" id="wine" href="/ "><p>Вино</p></a> </div>
Также добавим несколько правил CSS, чтобы "бриллианты" выстраивались в структуру:
.diamond { float: left; margin-left: 72px; /* 250-178 */ margin-top: -53px; /* 250/2-178 */ } .break { clear: left; margin-left: 36px; /* (250-178)/2 */ } .intend { clear: left; margin-left: 161px; /* (250-178)/2 + 250/2 */ }
Шаг 6. Надписи
Нам нужно выводить описание на однотонном фоне при наведении курсора мыши на "бриллиант". Обратите внимание на то, что .diamond повернут, что приведет к повороту параграфа внутри него. Поэтому параграф надо развернуть в обратном направлении.
.diamond p { position: relative; transform-origin: top left; transform: rotate(-45deg) translate(-89px, 0); line-height: 250px; z-index: 1; pointer-events: none }
Шаг 7. Наведение курсора мыши
Вот что будет происходит при наведении курсора мыши на "бриллиант".
.diamond:hover p { visibility: visible; } .thumb:hover { background: #a5b8a6; } .thumb.dark:hover { background: #bda3c1; } .thumb:hover:after { box-shadow: inset 0 0 100px #5c705d; } .thumb.dark:hover:after { box-shadow: inset 0 0 100px #5c3e52; }
Шаг 8. В случае отсутствия поддержки нужных свойств
Нужно обеспечить вывод информации в браузерах, которые не поддерживают трансформаций CSS3. Воспользуемся плагином modernizr для обнаружения факта отсутствия поддержки и добавляем код CSS:
.no-csstransforms .diamond { margin-left: 0; margin-top: 0; } .no-csstransforms .intend { margin-left: 197px; } .no-csstransforms .break { margin-left: 108px; } .no-csstransforms .diamond p { line-height: 178px; }
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Vg1_Q4lBu-M/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 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 контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Большинство людей, стремящихся к цели, способны скорее сделать одно большое усилие, чем упорно идти избранной дорогой; из-за лени и непостоянства они часто утрачивают плоды лучших своих начинаний и дают обогнать себя тем, кто отправился в путь позднее, чем они, и шел медленней, но зато безостановочно Лабрюйер Жан де (1645-1696) - французский писатель, мастер афористической публицистики |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.