» »

Лента с использованием сгиба на CSS

Лента с использованием сгиба на CSS

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

Это простой эксперимент по созданию 3D-ленты с двойным сгибом, где только задействован или используется только один элемент HTML.

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

Установка:

HTML

Код
<h1>ZorNet.ru портал для вебмастера</h1>

CSS

Код
body{
background: #B1E3E2;
box-shadow: inset 0 0 100px 20px #80D0CF;
text-align: center;
}

h1 {
  display: inline-block;
  font-size: 14px;
  line-height: 28px;
  color: #191818;
  text-shadow: 0 0 1px #758890;
  margin: 120px 0;
  font-family: arial, verdana;
  outline: none;
  padding: 14px 30px;
  position: relative;
  text-transform: uppercase;
  box-shadow: 0 0 30px 0 rgb(30, 105, 103), 0 36px 0 -18px #57ccc9;
}

  h1:before{
content: '';
position: absolute;
top: 18px;
left: -15%;
z-index: -1;
width: 134%;
height: 0;
border: 28px solid rgba(0, 0, 0, 0);
border-left: 28px solid #B1E3E2;
border-right: 28px solid #B1E3E2;
}

h1:after{
content: '';
width: 100%;
height: 0;
position: absolute;
top: 100%;
left: 0;
z-index: -1;
border-top: 18px solid #99acb2;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
}

h1, h1:before{
background-image: linear-gradient( rgba(21, 20, 20, 0) 8%, rgba(23, 22, 22, 0.1) 8%, rgba(0, 0, 0, 0.1) 14%, transparent 14%, rgba(0, 0, 0, 0) 86%, rgba(23, 22, 22, 0.1) 86%, rgba(12, 12, 12, 0.1) 92%, rgba(16, 16, 16, 0) 92% ), linear-gradient( rgba(249, 244, 244, 0.75), rgba(243, 240, 240, 0) ), linear-gradient( 45deg, rgba(16, 16, 16, 0) 40%, rgba(16, 16, 16, 0.1) 40%, rgba(8, 8, 8, 0.1) 60%, transparent 60% ), linear-gradient(rgb(249, 247, 247), rgb(247, 243, 243));
background-size: cover, cover, 4px 4px, cover;
}

h1, h1:before, h1:after{
box-sizing: border-box;
background-origin: border-box;
}

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

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

Демонстрация
2019-03-07 Загрузок: 2 Просмотров: 358 Комментарий: (0)

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

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

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