ZorNet.Ru — сайт для вебмастера » HTML и CSS » Лента с использованием сгиба на 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;
}

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

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

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

07 Марта 2019 Загрузок: 2 Просмотров: 1046 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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