Css лента что это

CSS ленточка

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

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

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

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

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

Средняя оценка / 5. Количество оценок:

Источник

Ленточки и флажки для блоков на HTML/CSS

Несколько Примеров вёрстки лент и флажков на HTML и CSS.

Ленты слева и справа

.box < width: 400px; border: 1px solid #ddd; height: 200px; position: relative; margin: 0 auto; background: #efefef; >/* Слева */ .ribbon-left < position: absolute; top: 18px; left: -11px; color: #fff; background: #32be5b; padding: 0 20px; height: 26px; line-height: 26px; >.ribbon-left:before < content: ""; position: absolute; height: 0; width: 0; border-style: solid; border-color: #1f7538 transparent transparent; border-width: 8px 0px 17px 10px; top: 100%; left: 0; >.ribbon-left:after < content: ""; position: absolute; right: -21px; top: 0; height: 0; width: 0; border: 13px solid transparent; border-left: 13px solid #32be5b; transform: scaleX(.65); >/* Справа */ .ribbon-right < position: absolute; top: 18px; right: -11px; color: #fff; background: #32be5b; padding: 0 20px; height: 26px; line-height: 26px; >.ribbon-right:before < content: ""; position: absolute; left: -9px; top: 0; height: 0; width: 0; border-style: solid; border-width: 13px 11px 13px 0; border-color: transparent #32be5b transparent transparent; transform: scaleX(.65); >.ribbon-right:after

Результат:

Другой вариант

.box < width: 400px; border: 1px solid #ddd; height: 200px; position: relative; margin: 0 auto; background: #efefef; >/* Слева */ .ribbon-left < position: absolute; top: 20px; left: -20px; background: #32be5b; padding: 5px 20px; box-shadow: 1px 1px 3px #878787; color: #fff; >.ribbon-left:after < content: ''; position: absolute; top: 104%; left: 0; width: 0; height: 0; line-height: 0; border-left: 20px solid transparent; border-top: 10px solid #c8c8c8; >/* Справа */ .ribbon-right < position: absolute; top: 20px; right: -20px; background: #32be5b; padding: 5px 20px; box-shadow: 1px 1px 3px #878787; color: #fff; >.ribbon-right:after

Результат:

Ленты на всю ширину блока

.box < width: 300px; border: 1px solid #ddd; height: 200px; position: relative; margin: 0 auto; background: #efefef; >.ribbon < display: block; width: calc(100% + 22px); height: 40px; line-height: 40px; text-align: center; margin-left: -11px; margin-right: -11px; background: #50d056; position: relative; top: 20px; color: #fff; >.ribbon:before < content: ""; position: absolute; height: 0; width: 0; bottom: -10px; left: 0; border-top: 10px solid #317316; border-left: 10px solid transparent; >.ribbon:after

Результат:

Второй вариант

.box < width: 300px; border: 1px solid #ddd; height: 200px; position: relative; margin: 0 auto; background: #efefef; >.ribbon < display: block; width: calc(100% + 22px); height: 40px; line-height: 40px; text-align: center; margin-left: -11px; margin-right: -11px; background: #50d056; position: relative; top: 20px; color: #fff; >.ribbon:before < content: ""; position: absolute; height: 0; width: 0; top: -10px; left: 0; border-bottom: 10px solid #317316; border-left: 10px solid transparent; >.ribbon:after

Результат:

Диагональные ленты по краям

.box < width: 600px; border: 1px solid #ddd; height: 400px; position: relative; margin: 0 auto; background: #efefef; overflow: hidden; >/* Верхний левый угол */ .ribbon-1 < width: 200px; padding: 16px; position: absolute; text-align: center; color: #f0f0f0; top: 30px; left: -60px; transform: rotate(-45deg); background-color: #e43; >/* Верхний правый угол */ .ribbon-2 < width: 200px; padding: 16px; position: absolute; text-align: center; color: #f0f0f0; top: 30px; right: -60px; transform: rotate(45deg); background-color: #39d; >/* Нижний правый угол */ .ribbon-3 < width: 200px; padding: 16px; position: absolute; text-align: center; color: #f0f0f0; bottom: 30px; right: -60px; transform: rotate(-45deg); background-color: #2c7; >/* Нижний левый угол */ .ribbon-4

Результат:

Флажки

.box < width: 600px; border: 1px solid #ddd; height: 160px; position: relative; margin: 0 auto; background: #efefef; >/* 1 - чёрный */ .ribbon-1 < position: absolute; left: 66px; top: -3px; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5)); >.ribbon-1 span < display: block; color: #fff; font-size: 16px; text-align: center; background: #000; width: 40px; line-height: 56px; clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 95%, 0 100%); >/* 2 - зелёный */ .ribbon-2 < position: absolute; left: 172px; top: -3px; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5)); >.ribbon-2 span < display: block; color: #fff; font-size: 16px; text-align: center; background: #09cf61; width: 40px; line-height: 56px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 95%, 0 90%); >/* 3 - синий */ .ribbon-3 < position: absolute; left: 278px; top: -3px; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5)); >.ribbon-3 span < display: block; color: #fff; font-size: 16px; text-align: center; background: #0974cf; width: 40px; line-height: 56px; clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%); >/* 4 - фиолетовый */ .ribbon-4 < position: absolute; left: 384px; top: -3px; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5)); >.ribbon-4 span < display: block; color: #fff; font-size: 16px; text-align: center; background: #9509cf; width: 40px; line-height: 56px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%); >/* 5 - красный */ .ribbon-5 < position: absolute; left: 490px; top: -3px; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5)); >.ribbon-5 span

Источник

MagentaWAVE

Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.

3D эффект. CSS-ленты

Чтобы эффектно оформить заголовки и выделить различные элементы интерфейса можно использовать при оформлении сайта CSS-ленты. Такой подход сделает дизайн более интересным и придаст элементам объемный вид. Ленты можно использовать при оформлении ссылок постраничного перехода, различных указателей, разделов меню и т.д.
С помощью каскадных таблиц стилей можно самостоятельно сделать ленты для своего блога или сайта, без использования дополнительных изображений и блоков в HTML-коде. Ниже представлены примеры кода CSS-лент разных модификаций.

ПРИМЕР

Простая HTML-конструкция, которая используется в примере:

Элемент с классом .box здесь только для наглядного примера, при создании ленты в примере используется заголовок пятого уровня — . К нему добавлены необходимые свойства CSS.

.simple-ribbon <
position: relative;
display: block;
background: #8968CD;
box-sizing: content-box;
box-shadow: 0px 2px 15px -2px #666;
font: normal 400 16px Tahoma;
color: #E8DBC2;
text-align: center;
text-shadow: 1px 1px 1px #000;
padding: 10px 20px;
margin: 20px 0 0 -20px;
height: 40px;
width: 100%;
>

Стиль для всех вариантов и модификаций практически одинаковый, за исключением некоторых свойств, таких как длина элемента, а различный вид придают вариации CSS-кода для псевдоэлементов.

Лента с хвостиками(оконечностями) внутрь. Пример CSS-кода

Внешне создается впечатление что элемент как бы обернут лентой, а ее края(хвостики) завернуты за него, визуально видна только место изгиба:

.simple-ribbon::after <
content: »;
position: absolute;
right: 0;
top: 100%;
border-width: 10px 20px;
border-style: solid;
border-color: #68228B transparent transparent transparent;
border-radius: 1px;
box-shadow: 0px 20px 15px -20px #666;
box-sizing: border-box;
padding: 0;
width: 100%;
z-index: -1;
>

CSS-лента с хвостиками наружу. Пример CSS-кода

Этот вариант создает видимость что лента лежит по верх элемента, обернув только его края, при этом края вытащены наружу. Здесь видны места «изгиба» и хвостики оформлены в виде фигурных уголков:

.simple-ribbon::after,
.simple-ribbon::before content: »;
box-sizing: border-box;
position: absolute;
border-radius: 1px;
z-index: -1;
right: 0;
>
.simple-ribbon::before bottom: -10px;
border-width: 30px 20px;
border-style: solid;
border-color: #7D26CD transparent #7D26CD transparent;
box-shadow: 0px 20px 15px -20px #666;
width: 116%; /*величина относительная*/
margin: 0 -40px;
>
.simple-ribbon::after top: 100%;
border-width: 10px 20px;
border-style: solid;
border-color: #68228B transparent transparent transparent;
border-radius: 1px;
width: 100%;
padding: 0;
>

Односторонняя лента с кончиком внутрь. Пример CSS-кода

Этот вариант ленты можно использовать для элемента, который не занимает всю ширины элемента, например оформить дату или число комментариев к сообщению. В данном случае CSS-лента расположена с одного края блока, оборачивая его сторону, а ее кончик выведен наружу:

.simple-ribbon <
width: 40%; /* уменьшаем размер в длину */
>
.simple-ribbon::after,
.simple-ribbon::before <
content: »;
box-sizing: border-box;
position: absolute;
border-radius: 1px;
margin: 0 -40px;
right: 0;
width: 0;
>
.simple-ribbon::before <
top: 100%;
right: 100%;
border-width: 10px 20px;
border-style: solid;
border-color: #68228B transparent transparent transparent;
border-radius: 1px;
z-index: -1;
>
.simple-ribbon::after <
bottom: 0px;
border-width: 30px 20px;
border-style: solid;
border-color: #8968CD transparent #8968CD #8968CD;
z-index: 1;
>

Одинарная лента с кончиком наружу. Пример CSS-кода

Один хвостик у этой ленты спрятан за блок, а видимый край, который находится поверх элементы, фигурно оформлен:

.simple-ribbon <
width: 40%;
>
.simple-ribbon::after,
.simple-ribbon::before <
content: »;
display: block;
box-sizing: border-box;
position: absolute;
border-radius: 1px;
margin: 0 -40px;
width: 0;
z-index: -1;
>
.simple-ribbon::after <
top: 100%;
right: 100%;
border-width: 10px 20px;
border-style: solid;
border-color: #68228B transparent transparent transparent;
border-radius: 1px;
>
.simple-ribbon::before <
top: 10px;
left: 0;
border-width: 30px 20px;
border-style: solid;
border-color: #7D26CD #7D26CD #7D26CD transparent;
box-shadow: 0px 20px 15px -20px #666;
padding: 0 30px;
>

Лента размещенная на углу элемента. Пример CSS-кода

Такой вариант часто используются для оформления добавочных элементов, этой лентой можно красиво оформить надпись «Новинка» или «Акция» на сайте.
Для того чтобы создать вариант угловой CSS-ленты понадобится дополнительная HTML-обертка:

.rotate-block <
position: absolute;
right: -15px;
top: -15px;
z-index: 1;
overflow: hidden;
width: 200px;
height: 200px;
text-align: right;
>
.simple-ribbon <
display: block;
position: absolute;
top: 10px;
left: 15px;
background: #8968CD;
box-sizing: content-box;
box-shadow: 0px 2px 15px -2px #666;
font: normal 400 16px Tahoma;
color: #E8DBC2;
text-align: center;
text-shadow: 1px 1px 1px #000;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
padding: 10px 20px;
height: 40px;
width: 100%;
>
.simple-ribbon::after,
.simple-ribbon::before <
content: »;
position: absolute;
top: 100%;
border-width: 10px 10px;
border-style: solid;
border-radius: 1px;
box-sizing: border-box;
padding: 0;
width: 0;
z-index: -1;
>
.simple-ribbon::before <
left: 0;
border-color: #68228B transparent transparent #68228B;
>
.simple-ribbon::after <
right: 0;
border-color: #68228B #68228B transparent transparent;
>

CSS-летнта только из псевдо-элементов :before и :after . Пример CSS-кода

Вообще красивую CSS-ленту можно сделать практически из нечего, а именно даже из псевдо-элементов, наглядный пример такой ленты можно посмотреть в комментариях данного блога и на демонстрационной странице. Самый простой вариант выглядит как односторонняя лента с фигурным кончиком наружу, код довольно прост:

.box:before <
position: absolute;
right: -10px; /*горизонтальное смещение*/
bottom: 50px; /*вертикальное смещение*/
border-width: 15px;
border-style: solid;
border-color: #684FA3 #684FA3 #684FA3 transparent;
box-shadow: 10px 7px 15px -5px #666;
font: normal normal 16px/1px Tahoma, Arial, sans-serif;
color: #fff;
text-indent: 15px;
text-shadow: 1px 1px 1px #000;
height: 0;
min-width: 60px;
max-width: 140px;
>
.box:after <
position: absolute;
content:»;
right: -10px; /*горизонтальное смещение*/
bottom: 40px; /*вертикальное смещение, меньше на собственную высоту*/
border-width: 5px;
border-style: solid;
border-color: #3A2C5A transparent transparent #3A2C5A;
height: 0;
>
.box:before <
content:’Псевдо-Элемент‘;
>

Эффект объема на странице достигается благодаря правильной подборке тени для элемента ленты. В этом вопросе при оформлении сайта, чтобы добиться по-настоящему впечатляющего 3D визуального эффекта на странице нужно постараться. Также не следует забывать о точной подборке размеров лент и тесте на различных браузерах и устройствах.

Источник