» »

Красивые угловые ленты с надписью на CSS

Красивые угловые ленты с надписью на CSS

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

Здесь изначально в плане оформление всех предоставленных здесь ленточек, то здесь задействован блочный элемент div, которые задействованы для выставление класса, где на прямую работает со стилистикой в CSS. Вам остается выбрать тот вид дизайна, он идет под одним классом, что потом с HTML и CSS разместить на заданном элементе.

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

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

1. Первый вариант:

Оригинальные углы для блока

2. Второй вариант:

Разные ленты по дизайн

3. Третий вариант:

Угловая лента в разном дизайн

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

HTML

Код
<section>
  <span></span>
   
  <div class="dukegive-maketes">
  <span class="cordingto-kecenud">
  <span>ZORNET.RU-1</span>
  </span>
  </div>
   
<div class="dukegive-maketes">
  <span class="marketers-vasulogen">Z<br>O<br>R<br>N<br>E<br>T</span>
</div>
<div class="dukegive-maketes">
  <span class="sodsakand-nciseman">ZORNET.RU-2</span>
</div>
   
<div class="dukegive-maketes">
  <span class="kandebe-landingun">ZORNET.RU-3</span>
</div>
<div class="dukegive-maketes">
  <span class="daknowno-naudienceg">ZORNET.RU-4</span>
  </div>
   
<div class="dukegive-maketes">
  <div class="wrap">
  <span class="broadked-clasonased">ZORNET.RU-5</span>
</div>
</div>
</section>

CSS

Код
.dukegive-maketes {
  width: 48%;
  height: 188px;
  position: relative;
  float: left;
  margin-bottom: 30px;
  background: url(Ссылка на изображение);
  background-size: cover;
  text-transform: uppercase;
  color: white;
}
.dukegive-maketes:nth-child(even) {
  margin-right: 4%;
}
@media (max-width: 500px) {
  .dukegive-maketes {
  width: 100%;
  }
  .dukegive-maketes:nth-child(even) {
  margin-right: 0%;
  }
}
.cordingto-kecenud {
  position: absolute;
  top: -6px;
  right: 7px;
}
.cordingto-kecenud:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 55px solid transparent;
  border-right: 51px solid transparent;
  border-top: 9px solid #e2413b;
}
.cordingto-kecenud span {
  position: relative;
  display: block;
  text-align: center;
  background: #e2413b;
  font-size: 13px;
  line-height: 1;
  padding: 13px 9px 9px;
  border-top-right-radius: 7px;
  width: 87px;
}
.cordingto-kecenud span:before, .cordingto-kecenud span:after {
  position: absolute;
  content: "";
}
.cordingto-kecenud span:before {
  height: 5px;
  width: 5px;
  left: -5px;
  top: 0;
  background: #e2413b;
}
.cordingto-kecenud span:after {
  height: 5px;
  width: 7px;
  left: -7px;
  top: 0;
  border-radius: 7px 7px 0 0;
  background: #e2413b;
}
.marketers-vasulogen {
  width: 60px;
  padding: 10px 0;
  position: absolute;
  top: -6px;
  left: 25px;
  text-align: center;
  border-top-left-radius: 3px;
  background: #da6525;
}
.marketers-vasulogen:before {
  height: 0;
  width: 0;
  right: -5.5px;
  top: 0.1px;
  border-bottom: 6px solid #84531b;
  border-right: 6px solid transparent;
}
.marketers-vasulogen:before, .marketers-vasulogen:after {
  content: "";
  position: absolute;
}
.marketers-vasulogen:after {
  height: 0;
  width: 0;
  bottom: -29.5px;
  left: 0;
  border-left: 30px solid #da6525;
  border-right: 30px solid #da6525;
  border-bottom: 30px solid transparent;
}
.sodsakand-nciseman {
  width: 147px;
  height: 48px;
  line-height: 48px;
  padding-left: 15px;
  position: absolute;
  left: -8px;
  top: 20px;
  background: #4c2941;
}
.sodsakand-nciseman:before, .sodsakand-nciseman:after {
  content: "";
  position: absolute;
}
.sodsakand-nciseman:before {
  height: 0;
  width: 0;
  top: -8.5px;
  left: 0.1px;
  border-bottom: 9px solid black;
  border-left: 8px solid transparent;
}
.sodsakand-nciseman:after {
  height: 0;
  width: 0;
  right: -14.7px;
  border-top: 24px solid transparent;
  border-bottom: 24.9px solid transparent;
  border-left: 15px solid #4c2941;
}
.kandebe-landingun {
  position: absolute;
  top: 12px;
  padding: 7px 9px;
  background: #139bc7;
  box-shadow: -1px 2px 3px rgba(19, 18, 18, 0.36);
}
.kandebe-landingun:before, .kandebe-landingun:after {
  content: "";
  position: absolute;
}
.kandebe-landingun:before {
  width: 7px;
  height: 100%;
  top: 0;
  left: -6.5px;
  padding: 0 0 6px;
  background: inherit;
  border-radius: 4px 0 0 4px;
}
.kandebe-landingun:after {
  width: 4px;
  height: 4px;
  bottom: -4px;
  left: -4.5px;
  background: lightblue;
  border-radius: 4px 0 0 4px;
  }
.daknowno-naudienceg {
  display: block;
  width: calc(100% + 20px);
  height: 48px;
  line-height: 48px;
  text-align: center;
  margin-left: -9.9px;
  margin-right: -9.9px;
  background: #74820a;
  position: relative;
  top: 18px;
}
.daknowno-naudienceg:before, .daknowno-naudienceg:after {
  content: "";
  position: absolute;
}
.daknowno-naudienceg:before {
  height: 0;
  width: 0;
  bottom: -10px;
  left: 0;
  border-top: 10px solid #4d5607;
  border-left: 10px solid transparent;
}
.daknowno-naudienceg:after {
  height: 0;
  width: 0;
  right: 0;
  bottom: -10px;
  border-top: 10px solid #4d5607;
  border-right: 10px solid transparent;
}
.wrap {
  width: 100%;
  height: 187px;
  position: absolute;
  top: -7px;
  left: 7px;
  overflow: hidden;
}
.wrap:before, .wrap:after {
  content: "";  
  position: absolute;
}
.wrap:before {
  width: 39px;
  height: 7px;
  right: 99px;
  background: #485d2e;
  border-radius: 7px 7px 0px 0px;
}
.wrap:after {
  width: 7px;
  height: 39px;
  right: 0px;
  top: 100px;
  background: #445a29;
  border-radius: 0px 7px 7px 0px;
}
.broadked-clasonased {
  width: 198px;
  height: 38px;
  line-height: 38px;
  position: absolute;
  top: 29px;
  right: -50px;
  z-index: 2;
  overflow: hidden;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border: 1px dashed;
  box-shadow:0 0 0 3px #48d234, 0px 19px 4px -17px rgba(21, 20, 20, 0.64);
  background: #46c733;
  text-align: center;
}

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

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

Демонстрация
2018-12-17 Загрузок: 1 Просмотров: 273 Комментарий: (0)

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

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

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