Вы, скорее всего, уже неоднократно видели ленты и знаете, как они выглядят. В настоящее время использовать ленту на своем сайте своеобразный тренд. Это привлекательно и добавит вашему дизайну 3D эффект.
В этой статье вы узнаете, как сделать css ленту без использования изображений и при минимуме HTML разметки.
Зачем понадобились CSS ленты?
На самом деле для ваших лент вы можете использовать изображения. Но, используя CSS для создания лент, вы получаете следующие преимущества:
- Нет изображений, нет дополнительных HTTP-запросов
- Гибкость
- Легко регулировать: цвет, размер, и т. д.
- Для общего развития, CSS3 придет на смену CSS2, однозначно
Структура CSS ленты
Изначально, скажем, у вас есть блок с отступом 20px (padding:20px).
Теперь давайте добавим элемент, который станет нашей лентой. Для этого нам потребуется всего один элемент, например h1.
Не забывайте, что у тега-родителя присутствует 20px отступ. Чтобы создать ленту, необходимо вывести заголовок за пределы правой и левой стороны блока родителя.
CSS
h1
{
margin: 0 -30px; /* top:0, right:-30px, bottom:0, left:-30px */
}
Добавим углы, для этого создадим css-треугольники с помощью псевдоэлементов.
Псевдоэлементы-селекторы :before и :after сгенерируют для нас углы (позиционируем относительно нижней стороны заголовка: bottom: -10px;). Углы (треугольники) мы создадим при помощи границ (border). Просто, где необходимо, назначьте толщину и цвет соответствующих границ.
CSS
h1{
text-align: center;
position: relative;
color: #fff;
margin: 0 -30px 30px -30px;
padding: 10px 0;
text-shadow: 0 1px rgba(0,0,0,.8);
background: #5c5c5c;
background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
-moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
box-shadow: 0 2px 0 rgba(0,0,0,.3);
}
h1:before, h1:after
{
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
bottom: -10px;
}
h1:before
{
border-width: 0 10px 10px 0;
border-right-color: #222;
left: 0;
}
h1:after
{
border-width: 0 0 10px 10px;
border-left-color: #222;
right: 0;
}
Используя данный CSS, вы получите что-то похожее на:
demo
Поддержка браузеров
Браузеры IE6 и IE7 не поддерживают псевдоэлементы :before и :after, однако, если вам потребуются эти браузеры, замените псевдоэлементы на обычный HTML элемент, например span.
IE8, IE9, IE10, Firefox, Opera, Chrome и Safari отобразят ленту. Однако есть небольшие отличия, который возникают из-за неполной поддержки браузерами CSS3.
Источник