Стикер для горячего предложения средствами CSS
Очень интересные задачки возникают, когда пытаешься воспроизвести элементы дизайна с помощью кода. Отличная разминка для интеллекта - создание графических объектов командами CSS.
В данном уроке мы сделаем отличный стикер, информирующий посетителя о скидках. Часто скидка является величиной динамической, зависящей от времени. Поэтому подобный эксперимент имеет и практическое назначение.
Наша цель
Нужно сделать стикер, который будет размещаться где-нибудь на странице.
Визуализируем идею
Такой элемент звезда можно создать из нескольких квадратов, повернутых друг относительно друга:
На рисунке представлены 3 элемента повернутых на 30 градусов. В нашей разметке элементов будет шесть.
Разметка HTML
<div class="price-container"> <div class="price"> <span class="label">Сегодня</span> <span class="number">20%</span> <span class="label">скидка</span> </div> </div>
Есть контейнер <div class="price-container">
, который содержит стикер. Он будет использоваться для фона. Контейнер <div class="price">
используется для размещения текста (информации о скидке). Вот и вся разметка. Мы будем использовать псевдо классы для создания нескольких слоев.
Задаем стили
Начинается самая интересная часть нашего урока. Мы определим стили для .price-container
, .price
, и псевдо элементов :before
и :after
для каждого контейнера. Получается шесть элементов для работы. Будем использовать фоновое изображение, поворачивая его на 15 градусов:
На представленном эскизе идеи видно разложение графического изображения на отдельные части. Именно такая часть и используется в качестве фона для одного элемента.
Вот как выглядят стили для элементов:
.price-container, .price-container:before, .price-container:after, .price-container .price, .price-container .price:before, .price-container .price:after { height: 8.5em; width: 8.5em; background: #760B1F url(price-bg.png) top left no-repeat; background-size: 8.5em; } .price-container:before, .price-container:after, .price-container .price:before, .price-container .price:after { content: ""; position: absolute; } .price-container { margin: 100px auto; /* Центрируем для демонстрации */ position: relative; /* Контекст */ top: 2.5em; left: 2.5em; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .price-container:before { top: 0; left: 0; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); } .price-container:after { top: 0; left: 0; -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); transform: rotate(-15deg); } .price-container .price { padding: .5em 0em; height: 7.5em; /* Высота минус отступ */ position: absolute; bottom: 0; right: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); z-index: 1; /* Важно! Чтобы текст был виден */ } .price-container .price:before { top: 0; left: 0; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); } .price-container .price:after { top: 0; left: 0; -webkit-transform: rotate(75deg); -moz-transform: rotate(75deg); -ms-transform: rotate(75deg); -o-transform: rotate(75deg); transform: rotate(75deg); }
Несколько замечаний по стилям:
- Обратите внимание на порядок поворота. Порядок очень важен, так как мы имеем текстовые элементы, вставленные в самый внутренний элемент. Поэтому последний элемент должен располагаться прямо. Обратите внимание, что контейнер
.price-container
повернут на -45 градусов, а элемент.price
повернут на 45 градусов - чтобы принять горизонтальное положение. - Высота и ширина должна быть задана, так как мы используем фоновое изображение. Используются единицы измерения ems для выравнивания в соответствии с размером шрифта.
- Есть отступы сверху и снизу у элементов
.price-container .price
. Поэтому их высота несколько отличается от других элементов. - Все позиционируется абсолютно внутри первого контейнера
.price-container
(left: 2.5em
иtop: 2.5em
используется для небольшого смещения). Когда элементы вращаются, углы немного выступают. - Чтобы информацию сделать видимой, используется свойство
z-index
для.price-container .price
.
Теперь посмотрим на стили текста:
.price-container .price span { position: relative; z-index: 100; display: block; text-align: center; color: #FE3D5C; font: 1.3em/2.2em Sans-Serif; text-transform: uppercase; } .price-container .price span.number { font-weight: bold; font-size: 2em; line-height: 1em; color: #fff; }
Стикер без использования изображения
Дизайн стикера включает рамку по краю стикера. Если она не нужна, можно просто удалить фоновое изображение.
Поддержка браузерами
Данная техника работает в IE 9+, Firefox 4.0+, Safari 4.1+ и Chrome 3.0+. IE 8 и ниже не поддерживают background-size, а Chrome 1.0, Firefox 3.6 и Safari 3.0 требуют использования префиксов. IE8 поддерживает псевдо элементы, но не поддерживает свойство transform
.
В случае отсутствия поддержки браузер будет выводить цветной квадрат.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/l8xhlrlD7f4/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 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Все мы сидим в сточной канаве, но некоторые при этом смотрят на звезды Уайльд Оскар - (1854-1900) - английский писатель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.