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

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

ПРИМЕР

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

<div class='box'>
  <h5 class='simple-ribbon'>Простая CSS-лента</h5>
</div>

  Элемент с классом .box здесь только для наглядного примера, при создании ленты в примере используется заголовок пятого уровня - <h5>. К нему добавлены необходимые свойства 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-обертка:

<div class='box'>
 <div class='rotate-block'>
  <h5 class='simple-ribbon'>Лента</h5>
 </div>
</div>

  CSS будет сложнее:

.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 визуального эффекта на странице нужно постараться. Также не следует забывать о точной подборке размеров лент и тесте на различных браузерах и устройствах.

©http://magentawave.com