—»     —»   Создаем сшитый ленточный баннер при помощи CSS3
  Раздел: Руководства   Комментариев: 1  

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



Сегодня мы хотим рассказать вам о том, как создать сшитый ленточный баннер при помощи 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

* Посмотреть демо
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 3522   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 18 августа 2014 @ 19:31
Написал: Глеб — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Очень полезный код, вот только как сделать так, чтобы изменить ширину ленточек с боков? А то слишком уже они здоровые...
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код




















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Январь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031