18.08.14, 19:55
0 комментарий
  Уроки

Создаем сшитый ленточный баннер при помощи CSS3

Сегодня мы хотим рассказать вам о том, как создать сшитый ленточный баннер при помощи CSS3. Мы постараемся добиться эффекта баннера без использования изображений. До появления CSS3 единственный метод создания эффекта баннера был основан на использовании изображений.

Давайте рассмотрим то, что мы будем разрабатывать.

Концепт

Мы будем использовать псевдо-элементы для достижения ленточного эффекта. Мы также воспользуемся техникой создания тени для того, чтобы добиться эффекта прошивания.

Давайте приступим

Этап 1: HTML-разметка

Давайте начнем с создания простого элемента. HTML для этого элемента будет довольно простым.

HTML

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="my-ribbon">
 I am a Ribbon 
</div>
</body>


Этап 2: применяем CSS

Теперь давайте добавим небольшую стилизацию для div-элемента. Этот CSS-код также создаст эффект строчки. МЫ воспользуемся комбинацией box-shadow для того, чтобы добиться эффекта строчки. Если вам нужно более глубокое пояснение, обратитесь к этой публикации.

CSS для строчного эффекта

 .my-ribbon {
 font-size: 30px !important;

font-family: "Open Sans", Helvetica, Arial, sans-serif;
 width: 50%;
 position: relative;
 background: #7EB12C;
 color: #fff;
 text-align: center;
 padding: 0.1em 0.2em; 
 margin: 150px 350px ;
 
 /* The following CSS rules will give stitched look to our element */ 
 
 -moz-box-shadow: 0 0 0 4px #7EB12C, 2px 1px 4px 4px rgba(10,10,0,.5);
 -webkit-box-shadow: 0 0 0 4px #7EB12C, 2px 1px 4px 4px rgba(10,10,0,.5);
 box-shadow: 0 0 0 4px #7EB12C, 2px 1px 6px 4px rgba(10,10,0,.5);
 border-top: 1px dashed rgba(0, 0, 0, 0.2);
    border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
}


Теперь у нас будет следующее:

Создаем сшитый ленточный баннер при помощи CSS3


Этап 3: добавляем псевдо-элементы

Теперь нам нужно добавить 2 псевдо-элемента для создания ленточного эффекта. Псевдо-элементы имеют отрицательное значение в параметре z-index и разные фоны. Отрицательный z-index позволяет сделать так, чтобы баннер отображался поверх ленты.

CSS для псевдо-элементов

.my-ribbon:before, .my-ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #5F9900;
 z-index: -1;
  }

.my-ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.my-ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}


И на этом наша ленточка готова! Предлагаем вам ознакомиться с финальным результатом:

Создаем сшитый ленточный баннер при помощи CSS3


Напишите своё мнение