Стикер для горячего предложения средствами CSS

Очень интересные задачки возникают, когда пытаешься воспроизвести элементы дизайна с помощью кода. Отличная разминка для интеллекта - создание графических объектов командами CSS. 

В данном уроке мы сделаем отличный стикер, информирующий посетителя о скидках. Часто скидка является величиной динамической, зависящей от времени. Поэтому подобный эксперимент имеет и практическое назначение.

Наша цель

Нужно сделать стикер, который будет размещаться где-нибудь на странице.


Визуализируем идею

Такой элемент звезда можно создать из нескольких квадратов, повернутых друг относительно друга:


На рисунке представлены 3 элемента повернутых на 30 градусов. В нашей разметке элементов будет шесть.

Разметка HTML

Code
<div class="price-container">
  <div class="price">
  <span class="label">Сегодня</span>
  <span class="number">20%</span>
  <span class="label">скидка</span>
  </div>
</div>


Есть контейнер
, который содержит стикер. Он будет использоваться для фона. Контейнер
используется для размещения текста (информации о скидке). Вот и вся разметка. Мы дуем использовать псевдо классы для создания нескольких слоев.

Задаем стили

Начинается самая интересная часть нашего урока. Мы определим стили для .price-container, .price, и псевдо элементов :before и :after для каждого контейнера. Получается шесть элементов для работы. Будем использовать фоновое изображение, поворачивая его на 15 градусов:

 

На представленном эскизе идеи видно разложение графического изображения на отдельные части. Именно такая часть и используется в качестве фона для одного элемента.

Вот как выглядят стили для элементов:

Code
.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.

Теперь посмотрим на стили текста:

Code
.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.

В случае отсутствия поддержки браузер будет выводить цветной квадрат.

  • FalleN

  • 6993

  • 1

  • 251
Теги: стикер, CSS

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!