Скачать для фотошопа и для создания сайта Четверг, 12.12.2024, 15:03
Приветствую Вас Гость | RSS
Меню сайта

Категории раздела
Шаблоны для Ucoz
Шапки для Ucoz
Скрипты для Ucoz
Иконки для Ucoz
Кнопки для Ucoz
Уроки для Ucoz
Статьи для Ucoz
Прочее для Ucoz

Популярное

Мини-чат

Наш опрос
Оцените мой сайт
1. Отлично
2. Хорошо
3. Неплохо
4. Плохо
5. Ужасно
Всего ответов: 7

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0


Лента новостей бегущей строкой на CSS3
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
20.10.2020, 00:21
Лента новостей бегущей строкой на CSS3




Это бегущая лента на 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;
}


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

Демонстрация
Категория: Скачать Скрипты для Ucoz | Добавил: Marco
Просмотров: 161 | Загрузок: 0 | Рейтинг: 0.0/0


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Вход на сайт

Поиск

Популярное
SLS-Склад Лайт 
Feedmaster 1.7.4.2 бесплатно. 
Atlantis Word Processor 1.6.2 Beta 
Mozilla Sunbird 0.9 RU 
Фото на документы Экспресс 1.51 Rus 

На форуме
Файлообменник. З...
Автор: roterb
Форум: Куплю/Продам
Дата: 19.07.2024
Ответов: 0
Куплю, обмен шве...
Автор: roterb
Форум: Куплю/Продам
Дата: 27.06.2024
Ответов: 0
Файлообменник Sh...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1
Заработок на фай...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1
Файлообменник Le...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1

Популярное

Партнеры сайта
Стать партнером Стать партнером Стать партнером Стать партнером

Copyright MyCorp © 2024