ZorNet.Ru — сайт для вебмастера » HTML и CSS » Чистая форма ленты при помощи CSS

Чистая форма ленты при помощи CSS

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

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

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

Так она выглядит при проверки на работоспособность:

Установка:

HTML

Код

<div style="padding:39px 0;max-width:523px;margin: auto;">
  <div class="basenu_kopasku_texalom">
  <span class="mavexa_zekipolas"></span>
  <div class="basenu_kopasku_texalom-denug">
  <h3>Ключевое слово</h3>
  <p>Далее идет описание, что будет располагаться ниже, где также можно прописать ссылку для перехода.</p>
  </div>
  </div>
  </div>

CSS

Код

.basenu_kopasku_texalom {
  background-color: #cdd0d4;
  border-radius: 5px;
  color: #353434;
  padding: 17px 15px 17px 78px;
  position: relative;
}

.basenu_kopasku_texalom h3 {
  margin: 0 0 0.25em 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1c1c;
}

.basenu_kopasku_texalom .basenu_kopasku_texalom-denug p {
  margin: 0 0 1em;
}

.basenu_kopasku_texalom .basenu_kopasku_texalom-denug > p:last-child {
  margin-bottom: 0;
}

.basenu_kopasku_texalom.basenu_kopasku_texalom-denug p a {
  color: #40a1d2;
}

.basenu_kopasku_texalom .basenu_kopasku_texalom-denug p a:hover {
  color: #1d1b1b;
}

/* mavexa_zekipolas Styles */

.basenu_kopasku_texalom .mavexa_zekipolas {
  display: inline-block;
  position: absolute;
  left: 20px;
  top: 38px;
}

.basenu_kopasku_texalom .mavexa_zekipolas:before, .basenu_kopasku_texalom .mavexa_zekipolas:after {
  content: "";
  display: block;
  position: absolute;
  height: 8px;
  bottom: -7px;
  border: 19px solid #1e70bb;
}

.basenu_kopasku_texalom .mavexa_zekipolas:before {
  border-bottom-color: transparent;
  bottom: -40px;
}

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

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

Есть простой вариант для создание ленты, если вам просто понадобиться дизайн, который аналогично создан на чистом CSS, то этот вариант отлично подойдет.

Как сделать ленты на CSS3 без изображения

Как сделать ленты на CSS3 без изображения

Как создать форму ленты на CSS

HTML

Код

CSS

Код

.sattacenul-gopaslomeb {
  width: 0;
  height: 100px;
  border-right: 50px solid #2447a9;
  border-left: 50px solid #2447a9;
  border-bottom: 30px solid rgba(0, 0, 0, 0);
}

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

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

30 Апреля 2019 Загрузок: 1 Просмотров: 1385 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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