Ленточный баннер на чистом CSS

Дата публикации: 2014-04-18

От автора: Время от времени я ставлю себе задачи по разработке, которые могут быть не вполне реалистичными, для того, чтобы увидеть смогу ли я их выполнить. Это помогает мне расти как разработчику, по двум причинам – мне нужно проявлять творческий подход и потому, что это, как правило, требует каких-то исследований. Сегодня задача стоит: создать ленточный баннер на чистом css и html. Никаких картинок.

Создание визуальных элементов без картинок – это не только хорошая идея, но и быстро становится необходимостью. С ростом популярности экранов «ретина» и им подобным, растровые изображения выходят из использования в интерфейсе, потому что они ужасно выглядят на экранах с высоким разрешением. В некоторых ситуациях без изображений трудно обойтись и SVG (масштабируемая векторная графика) быстро становится основным форматах в таких случаях. Однако, там, где мы можем избежать использования картинок как таковых, мы не только получаем красивый, четко очерченный элемент, но и избегаем лишнего запроса на сервер. Так что давайте же с ними разберемся.

Оговорка: если вы новичок в CSS, рекомендую ознакомиться со следующими темами, до того как вы повторите то, что описано ниже:

CSS псевдо-элементы (в частности :before и :after)

CSS3 элементы, такие как box-shadow и box-sizing

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Абсолютное и относительное позиционирование дивов

Вот так выглядит разметка.

<div class="content-box">
   <div id="ribbon-container">
      <a href="test.html" id="ribbon">here's your link</a>
   </div>
</div>

</div>

В том, что вы видите выше, нет ничего сложного. Див с классом «.content-box» содержит весь контент. В диве с идентификатором «#ribbon-container» находится ссылка и позволяет нам задать позиционирование и часть тени баннеру. Ссылка – основной элемент вашего баннера.

Все понятно? Ну что ж, перейдем к CSS.

* {
padding: 0; /* Стандартный сброс стилей и мы добавляем box-sizing:border-box  */
margin: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

.content-box {
width: 100%; /* предполагается, что этот элемент содержится в контейнере с заданной шириной */
height: 400px;
margin: 0 auto;
position: relative; /* для того чтобы мы смогли позиционировать баннер в пределах контейнера */
background: gray;
border: 5px solid white;
box-shadow: 0 0 10px rgba(0,0,0,.3);
-moz-box-shadow: 0 0 10px rgba(0,0,0,.3);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
}

#ribbon-container {
position: absolute;
top: 15px;
right: -20px;
overflow: visible; /* чтобы мы могли увидеть псевдо-элементы */
font-size: 18px; /* размер шрифта и высота строки должны быть одинаковыми, т.к. они влияют на высоту */
line-height: 18px;
}

#ribbon-container:before {
content:"";
height: 0;
width: 0;
display: block;
position: absolute;
top: 3px;
left: 0;
border-top: 29px solid rgba(0,0,0,.3); /* эти 4 границы создают первую часть нашей тени */
border-bottom: 29px solid rgba(0,0,0,.3);
border-right: 29px solid rgba(0,0,0,.3);
border-left: 29px solid transparent;
}

#ribbon-container:after { /* это создает вторую часть нашей тени */
content:"";
height: 3px;
background: rgba(0,0,0,.3);
display: block;
position: absolute;
bottom: -3px;
left: 58px;
right:3px;
}

#ribbon-container a {
display:block;
padding:20px;
position:relative; /* позволяет нам позиционировать псевдоэлементы */
background:#0089d0;
overflow:visible;
height:58px;
margin-left:29px;
color:#fff;
text-decoration:none;
}

#ribbon-container a:after { /* это создает изгиб нашей ленты */
content:"";
height: 0;
width: 0;
display:block;
position:absolute;
bottom:-15px;
right:0;
border-top: 15px solid #004a70;
border-right: 15px solid transparent;
}

#ribbon-container a:before { /* здесь задаются уголки краев ленты */
content:"";
height: 0;
width: 0;
display:block;
position:absolute;
top:0;
left:-29px;
border-top: 29px solid #0089d0;
border-bottom: 29px solid #0089d0;
border-right: 29px solid transparent;
border-left: 29px solid transparent;
}

#ribbon-container a:hover {
background:#009ff1;
}

#ribbon-container a:hover:before { /* этот код меняют цвет уголков ленты по наведению мыши */
border-top: 29px solid #009ff1;
border-bottom: 29px solid #009ff1;
}

100

* {

padding: 0; /* Стандартный сброс стилей и мы добавляем box-sizing:border-box */

margin: 0;

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

}

.content-box {

width: 100%; /* предполагается, что этот элемент содержится в контейнере с заданной шириной */

height: 400px;

margin: 0 auto;

position: relative; /* для того чтобы мы смогли позиционировать баннер в пределах контейнера */

background: gray;

border: 5px solid white;

box-shadow: 0 0 10px rgba(0,0,0,.3);

-moz-box-shadow: 0 0 10px rgba(0,0,0,.3);

-webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);

}

#ribbon-container {

position: absolute;

top: 15px;

right: -20px;

overflow: visible; /* чтобы мы могли увидеть псевдо-элементы */

font-size: 18px; /* размер шрифта и высота строки должны быть одинаковыми, т.к. они влияют на высоту */

line-height: 18px;

}

#ribbon-container:before {

content:"";

height: 0;

width: 0;

display: block;

position: absolute;

top: 3px;

left: 0;

border-top: 29px solid rgba(0,0,0,.3); /* эти 4 границы создают первую часть нашей тени */

border-bottom: 29px solid rgba(0,0,0,.3);

border-right: 29px solid rgba(0,0,0,.3);

border-left: 29px solid transparent;

}

#ribbon-container:after { /* это создает вторую часть нашей тени */

content:"";

height: 3px;

background: rgba(0,0,0,.3);

display: block;

position: absolute;

bottom: -3px;

left: 58px;

right:3px;

}

#ribbon-container a {

display:block;

padding:20px;

position:relative; /* позволяет нам позиционировать псевдоэлементы */

background:#0089d0;

overflow:visible;

height:58px;

margin-left:29px;

color:#fff;

text-decoration:none;

}

#ribbon-container a:after { /* это создает изгиб нашей ленты */

content:"";

height: 0;

width: 0;

display:block;

position:absolute;

bottom:-15px;

right:0;

border-top: 15px solid #004a70;

border-right: 15px solid transparent;

}

#ribbon-container a:before { /* здесь задаются уголки краев ленты */

content:"";

height: 0;

width: 0;

display:block;

position:absolute;

top:0;

left:-29px;

border-top: 29px solid #0089d0;

border-bottom: 29px solid #0089d0;

border-right: 29px solid transparent;

border-left: 29px solid transparent;

}

#ribbon-container a:hover {

background:#009ff1;

}

#ribbon-container a:hover:before { /* этот код меняют цвет уголков ленты по наведению мыши */

border-top: 29px solid #009ff1;

border-bottom: 29px solid #009ff1;

}

Во-первых, мы используем универсальный селектор, чтобы сбросить стили, а также добавить box-sizing:border-box к нашей странице. Это позволит задавать внешние и внутренние отступы (margin, padding) и ширину и не вести расчеты по изменению размеров элементов.

Затем мы добавляем визуальные стили, к элементу, содержащему ленту, и самой ленте. Снова, ничего сложного.
Важные вещи, на которые стоит обратить внимание, это те, что относятся к псевдоэлементам :before и :after. Это те техники, которые помогают нам избежать использования изображений в нашей ленте. И на этом все. Ленточный баннер на чистом CSS и никаких картинок.

Здесь можно посмотреть демо.

Источник: //www.designcouch.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее