Рано или поздно практически каждый веб-мастер, глядя на свой сайт, приходит к мысли: "А вот в этом месте классно бы смотрелась какая - нибудь красивая ленточка". После чего приступает к реализации задуманной идеи.
Кто-то начинает рисовать ленту в фоторедакторе, а кто-то вспоминает, что быстрее, а главное, удобней, сделать такую ленту посредством css. Почему удобней? Потому что css ленточка быстро редактируется, масшатбируется и изменяется в размерах по мере необходимости.
При этом сам процесс рисования css ленточки довольно простой и не занимает много времени.
Итак, давайте приступим:
- Для начала создадим html - разметку будущей ленты, которая будет выглядеть так:
2. Далее зададим стили для основного блока ленты:
background: red;
margin-left: 290px;
padding: 4px;
height:19px;
color: white;
width: 100px;
text-align:center;
text-shadow: 0px 1px rgb(103, 95, 95);
z-index:3
}
3. Далее рисуем треугольник, имитирующий загиб ленты, при помощи псевдоэлемента before:
content: "";
position: absolute;
border: 8px solid transparent;
border-right: 8px solid #9e1515;
top: 27px;
left: 290px;
z-index:-1
}
Остановимся подробней на этом блоке.
Псевдоэлемент before: служит для отображения контента перед объектом, к которому он применяется. В нашем случае этим контентом является треугольник, имитирующий загиб ленты.
CSS - треугольник рисуется при помощи свойства "border", после чего выравнивается в нужном положении за счёт абсолютного позиционирования.
Z-index определяет положение треугольника относительно других элементов на странице по оси Z . Т. е. c помощью этого свойства мы как - бы "подпихиваем" его под основной блок ленты.
4. Аналогично нарисуем ленту после загиба при помощи псевдоэлемента after:
content: "";
position: absolute;
border: 11px solid #d41010;
width: 20px;
border-left: 11px solid transparent;
left: 264px;
top: 21px;
z-index: -3;
}
5. Точно таким же способом рисуем зеркальное отражение загнутой ленты справа:
content: "";
position: absolute;
border: 8px solid transparent;
border-left: 8px solid #9e1515;
top: 27px;
left: 398px;
z-index:-1
}
span:after {
content: "";
position: absolute;
border: 11px solid #d41010;
width: 20px;
border-right: 11px solid transparent;
left: 398px;
top: 21px;
z-index: -3;
}
Если вам некогда рисовать сss - ленточку самостоятельно, то воспользуйтесь онлайн-генератором, который создаст её автоматически по заданным параметрам.
На этом все. Надеюсь, что статья была вам полезной.
