ZorNet.Ru — сайт для вебмастера » HTML и CSS » Угловая лента с надписью при помощи CSS

Угловая лента с надписью при помощи CSS

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

Варианты отличаются друг от друга, один более простой, следующий немного сложнее, но по сути одинаковы. Там где больше стилистике, если говорить о первом, то все просто, она идет на ленту, где выстроена на градиентах, и безусловно красивее смотрится.

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

Приступаем к установке:

1. Первая ленты на правом углу с помощью обычного CSS3:

HTML

Код

<div class="misexpa-ndingites">
<div class="supdiasew-benchma-esults"><div class="caselsaokem-ucubeten">ZORNET</div></div>
</div>

CSS

Код

.misexpa-ndingites {
  margin: 47px auto;
  width: 327px;
  height: 215px;
  border: 1px solid #848994;
  background: #9eacb1;
  border-radius: 25px;
  -webkit-box-shadow: 0px 0px 8px rgba(19, 18, 18, 0.33);
  -moz-box-shadow: 0px 0px 8px rgba(23, 21, 21, 0.45);
  box-shadow: 0px 0px 8px rgba(19, 18, 18, 0.79);
  position: relative;
  z-index: 87;
}

.supdiasew-benchma-esults {
  width: 86px;
  height: 90px;
  overflow: hidden;
  position: absolute;
  top: -2.9px;
  right: -4px;
}

.caselsaokem-ucubeten {
  font: bold 16px Sans-Serif;
  color: #544f4f;
  text-align: center;
  text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: relative;
  padding: 6px 0;
  left: -4px;
  top: 13px;
  width: 126px;
  background-color: #77a013;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#5e7d12), to(#517b11));
  background-image: -webkit-linear-gradient(top, #d0fd64, #668c2d);
  background-image: -moz-linear-gradient(top, #a2b969, #94d237);
  background-image: -ms-linear-gradient(top, #a2b969, #94d237);
  background-image: -o-linear-gradient(top, #a2b969, #94d237);
  color: #3e3a2a;
  -webkit-box-shadow: 0px 0px 3px rgba(27, 25, 25, 0.35);
  -moz-box-shadow: 0px 0px 3px rgba(19, 18, 18, 0.35);
  box-shadow: 0px 0px 3px rgba(45, 43, 43, 0.39);
}

.caselsaokem-ucubeten:before, .caselsaokem-ucubeten:after {
  content: "";
  border-top: 4px solid #6d8608;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position:absolute;
  bottom: -4px;
}

.caselsaokem-ucubeten:before {
  left: 0;
}
.caselsaokem-ucubeten:after {
  right: 0;
}

Дизайн ленты сделан в зеленом оттенке, где идет стилистика по ее формированию, так как вверх млжно немного светлее вывести, а них темнее, и совершенно по другому смотрится.

Демонстрация

2. Вторая лента на правом нижнем углу:

Также есть вариант, где стилистики намного меньще, если сравнивать с первым, так как здесь все сделано в простом виде.

Простой стиль угловой ленты

HTML

Код

<div class="asubersecin">
  <div class="velexecutive">
  <div class="particularis">
  ZorNet.Ru
  </div>
  </div>
<div>

CSS

Код

.asubersecin {
  width: 275px;
  height: 175px;
  background-color: #4e76de;
  position: relative;
}
.velexecutive {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border: 25px solid transparent;
  border-top: 25px solid #757575;
  position: absolute;
  bottom: 18px;
  right: -49px;
  padding: 0 8px;
  width: 118px;
  color: white;
  font-family: sans-serif;
  font-size: 17px;
}
.velexecutive .particularis {
  position: absolute;
  top: -21px;
  left: 23px;
}

Здесь аналогично с первой вариацией материала, идет лента по правую сторону.

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

Демонстрация

Ленты CSS в 3d эффекте

Безусловно каждый веб мастер хочет красиво оформить заголовки на сайте, что ленты будут оригинальным фактором для любого материала или интерфейса. Такая стилистика на дизайн станет безусловно интересной и зрительно придаст каждому элементу оригинальный вид.

Ленты также можно применить в различном оформлении, которые предназначены для ссылок, которые идут на переходы на темы, что связано с название заголовка, что написано на ленте.

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

Демонстрация

24 Августа 2018 Загрузок: 2 Просмотров: 3621 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0