CSS ленточка

css ленточка

Рано или поздно практически каждый веб-мастер, глядя на свой сайт, приходит к мысли: "А вот в этом месте классно бы смотрелась какая - нибудь красивая ленточка". После чего приступает к реализации задуманной идеи.

Кто-то начинает рисовать ленту в фоторедакторе, а кто-то вспоминает, что быстрее, а главное, удобней, сделать такую ленту посредством css. Почему удобней? Потому что css ленточка быстро редактируется, масшатбируется и изменяется в размерах по мере необходимости.

При этом сам процесс рисования  css ленточки довольно простой и не занимает много времени.

Итак, давайте приступим:

  1. Для начала создадим html - разметку будущей ленты, которая будет выглядеть так:
<div class="strip"><span>Ленточка css</span></div>

2. Далее зададим стили для основного блока ленты:

.strip{
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:

.strip: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:

.strip:after {
content: "";
position: absolute;
border: 11px solid #d41010;
width: 20px;
border-left: 11px solid transparent;
left: 264px;
top: 21px;
z-index: -3;
}

5. Точно таким же способом рисуем зеркальное отражение загнутой ленты справа:

span:before {
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 - ленточку самостоятельно, то воспользуйтесь онлайн-генератором, который создаст её автоматически по заданным параметрам.

На этом все. Надеюсь, что статья была вам полезной.

ДЕМОСКАЧАТЬ


Оставить ответ

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