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

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

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

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

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

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

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

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

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

<div class="content-box">
   <div id="ribbon-container">
      <a href="test.html" id="ribbon">here's your link</a>
   </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;
}

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

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

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

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree