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

Лента с треугольниками по краям на CSS

Достаточно популярный элемент дизайна, это лента под заголовок на сайте, которая создана на чистом CSS, где идет индивидуальная стилистика. Также иногда вы ее можете увидеть в оформление сайта. Так как простой заголовок можно разместить, а здесь с применением ленты, он становится намного заметнее, да и красивее. Просто поместите эту ленту на отдельную страницу, что увидите совершенно другой вид.

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

С появлением экранов и шрифтовых кнопок, здесь показ становится совершено другой. Но если вы немного понимаете в CSS, то здесь есть возможность выстроить дизайн, как вы сами видите на своем сайте. Изображения на растровых изображениях выходят за элементы пользовательского интерфейса по всему интернету, потому что они выглядят ужасно на дисплеях с высоким разрешением.

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

HTML

Код

<div id="adelivered-gerightonzab">
<span id="maykunsubscribe">ZorNet.Ru: Вебмастера</span>
</div>

CSS

Код

#adelivered-gerightonzab {
  padding: .45em 1em;
  margin: 0;
  margin-top: 10%;
  position: relative;
  color: #f9f8f8;
  font: 32px 'Patua One', sans-serif;
  text-align: center;
  letter-spacing: 0.1em;
  text-shadow: 0px -1px 0px rgba(56, 54, 54, 0.53);
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 20px rgba(0,0,0,0.1), 0px 1px 1px rgba(0,0,0,0.4);
  background: -webkit-linear-gradient(top,#85e0fb, #0e5367);
  display: inline-block;
}

#adelivered-gerightonzab:before, #adelivered-gerightonzab:after {
  content: "";
  width: .2em;
  bottom: -.5em;
  position: absolute;
  display: block;
  border: .9em solid #529eb5;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.37);
  z-index: -2;
}

#adelivered-gerightonzab:before {
  left:-1.41em;
  border-right-width: .83em;
  border-left-color:transparent;
  }

#adelivered-gerightonzab:after {
  right:-1.41em;
  border-left-width: .83em;
  border-right-color:transparent;
  }

#maykunsubscribe:before, #maykunsubscribe:after {
  content:"";
  bottom:-.5em;
  position:absolute;
  display:block;
  border-style:solid;
  border-color: #0675b3 transparent transparent transparent;
  z-index:-1;
  }

#maykunsubscribe:before {
  left: 0;
  border-width: .5em 0 0 .5em;
  }

#maykunsubscribe:after {
  right: 0;
  border-width: .5em .5em 0 0;
  }

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

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

06 Июля 2018 Просмотров: 1612 Комментариев: (0)

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

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

Kosten

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