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

Лента новостей бегущей строкой на CSS3

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

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

Так выглядит лента после установочного процесса:

Горизонтальная лента новостей на CSS

HTML

Код
<div class="vanaudie-ncesacos">
  <div class="kobndam-eneaks">
  <div class="cesempa-vadekob">
  News
  </div>
  <marquee id="ticker" class="sonstan-cemaben">
Здесь идет описание.
  </marquee>
  </div>
</div>

CSS

Код
.vanaudie-ncesacos {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  height: 100%;
}

.kobndam-eneaks {
  display: grid;
  grid-template-columns: 1fr 10fr;
  grid-gap: 20px;
  align-items: center;
  font-size: 25px;
  background: #5F2580;
  box-shadow: 4px 8px 5px 0 rgba(0, 0, 0, .5);
}

.sonstan-cemaben {
  padding: 20px 20px;
  color: white;
}

.cesempa-vadekob {
  text-align: center;
  text-transform: uppercase;
  padding: 20px;
  background-color: #48036F;
  color: white;
}

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

Демонстрация
2020-03-28 Загрузок: 2 Просмотров: 467 Комментарий: (2)

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

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

Оставь свой отзыв

Комментарий: 2
Grician
Grician 2020-03-29 17:001
0
ТО что надо!
Kosten
Kosten 2020-03-30 18:302
0
Отлично, когда все по стилистике подходит, но также не забываем, что это оформление можно самостоятельно выставить под свою основу дизайна.
avatar