CSS-таймлайны

Подборка бесплатных таймлайнов на HTML и CSS: адаптивных, простых, вертикальных и горизонтальных.

Вертикальные таймлайны

Вертикальные таймлайны
  • Автор: Джонатан Снук, 10 мая 2018 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML / CSS.

О коде

TIMELINE CSS

Простой пунктирный CSS-таймлайн.

TIMELINE CSS
  • Автор: Виктор Лебедев, 18 февраля 2018 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML/Pug, CSS/SCSS, JavaScript/Babel (jquery.js).

О коде

SCROLL TIMELINE

Вертикальный прокручиваемый таймлайн.

SCROLL TIMELINE
  • Автор: Алан Хаузер, 24 января 2018 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML / CSS (Less).

О коде

CSS TIMELINE

CSS-таймлайн со шрифтами "Saira" и "Chivo".

CSS TIMELINE
  • Автор: CP Lepag, 24 января 2018 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML (Pug) / CSS (Sass).

О коде

CSS VERTICAL TIMELINE

Вертикальный адаптивный таймлайн, созданный на основе Bootstrap.

CSS VERTICAL TIMELINE
  • Автор: Стас Мельников, 30 сентября 2017 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML, CSS.

О коде

CSS TIMELINE

CSS-таймлайн с пользовательскими свойствами.

CSS TIMELINE
  • Автор: Бруно Карвальо, 30 августа 2017 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML/Pug, CSS/SCSS, JavaScript (swiper.js).

О коде

RESPONSIVE SLIDER TIMELINE

Адаптивный таймлайн-слайдер, созданный с помощью библиотеки Swiper JS.

RESPONSIVE SLIDER TIMELINE
  • Автор: Диана Ченг, 15 июля 2017 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML (Pug) / CSS (SCSS).

О коде

TIMELINE CREATED WITH CSS GRID

Адаптивный таймлайн, созданный с помощью CSS grid. Браузеры, которые не поддерживают CSS grid, получат мобильную версию таймлайна.

TIMELINE CREATED WITH CSS GRID

ADVANCED TIMELINE

  • Создан с помощью: HTML / CSS / JavaScript.
  • Автор: MO7AMED, 6 июня2017 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
ADVANCED TIMELINE

TIMELINE WITH FIXED HEADER USING FLEXBOX

Таймлайн, созданный на основе HTML и CSS с фиксированным заголовком, использующий flexbox.

  • Автор: Matys 29 мая 2017 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
TIMELINE WITH FIXED HEADER USING FLEXBOX

PROJECT TIMELINE

Таймлайн, созданный на основе HTML и CSS.

  • Автор: Рассел Бишоп, 19 февраля 2017 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
PROJECT TIMELINE

TIMELINE

HTML, CSS и JavaScript таймлайн.

  • Автор: Мерт Нерукус, 6 февраля 2017 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
TIMELINE

HYPERLOOP TIMELINE

Таймлайн, созданный на основе HTML и CSS.

  • Автор: Якуб Бачо, 29 февраля 2017 г.
  • Ссылки: ссылка на скачивание.
HYPERLOOP TIMELINE

VERTICAL TIMELINE

Вертикальный CSS-таймлайн с временными интервалами.

  • Автор: Andres, 25 января 2017 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
VERTICAL TIMELINE

FLEXBOX TIMELINE LAYOUT

Flexbox-макет таймлайна. Задача, стоявшая перед разработчиками, заключалась в том, чтобы получить HTML-макет в виде таймлайна.

  • Автор: Пол Бейкер, 16января 2017 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
FLEXBOX TIMELINE LAYOUT

SINGLE DIV TIMELINE

Таймлайн, созданный с помощью HTML и CSS, всего с одним div.

  • Автор: Нильс Фогт, 28 декабря 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
SINGLE DIV TIMELINE

CSS TIMELINE

Таймлайн, созданный с помощью HTML и CSS.

  • Автор: Рафаель Юаким, 26 декабря 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
CSS TIMELINE

VERTICAL TIMELINE

Таймлайн, созданный на основе HTML и CSS.

  • Автор: Аттикус Койя, 22 декабря 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
VERTICAL TIMELINE

TIMELINE

Образец CSS-таймлайна с вертикальными и горизонтальными линиями, созданными с помощью псевдоэлементов.

  • Автор: Nomisoft, 7 декабря 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
TIMELINE

COMMENTS & FEEADBACKS & HISTORY TIMELINE

Таймлайн с комментариями с обеих сторон.

  • Автор: Хосам Элнабави, 28 ноября 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
COMMENTS & FEEADBACKS & HISTORY TIMELINE

UI DESIGN MORNING TIMELINE

Таймлайн утреннего расписания, созданный на основе HTML и CSS.

  • Автор: Хун Нгуен, 17 сентября 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
UI DESIGN MORNING TIMELINE

TIMELINE

Таймлайн, созданный на HTML и CSS.

Автор: Келси Сантанжело, 14 ноября 2016 г.

Ссылки: ссылка на скачивание, демо-версия и код.

TIMELINE

TIMELINE UI

Учебный пример таймлайна.

  • Автор: Симри Райншпергер, 13 сентября 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
TIMELINE UI

SIMPLE RESPONSIVE TIMELINE

Простой адаптивный таймлайн, созданный на основе HTML и CSS.

  • Автор: Бреди Райт, 8 сентября 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
SIMPLE RESPONSIVE TIMELINE

VERTICAL TIMELINE

Вертикальный таймлайн, созданный с помощью HTML, CSS и JavaScript.

  • Автор: Сава Лазич, 4 сентября 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
VERTICAL TIMELINE

RESPONSIVE TIMELINE

Адаптивный таймлайн, созданный с помощью HTML, CSS и JavaScript.

  • Автор: Арно Балан, 25 августа 2016 г.
  • ссылки: ссылка на скачивание, демо-версия и код.
RESPONSIVE TIMELINE

VERTICAL TIMELINE

Таймлайн на основе HTML и CSS.

  • Автор: Яго Гонсалес, 23 августа 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
VERTICAL TIMELINE

PRETTY TIMELINE

Красивый таймлайн, созданный с помощью HTML и CSS.

  • Автор: Эван Виланд, 14 июля 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
PRETTY TIMELINE

CSS TIMELINE

CSS-таймлайн, созданный с помощью HTML и CSS.

  • Автор: Тристан Уайт, 10 июля 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
CSS TIMELINE

TIMELINE

Таймлайн, созданный с помощью HTML, CSS и JavaScript.

  • Автор: Радхика Праджапати, 6 июля 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
TIMELINE

VERTICAL TIMELINE WITH CSS

Вертикальный таймлайн, созданный на основе CSS с включением JavaScript.

  • Автор: Envato Tuts+, 24 мая2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
VERTICAL TIMELINE WITH CSS

TIMELINE

Таймлайн для персонального проекта, созданный на основе HTML и CSS.

  • Автор: Бруно Родригес, 3 апреля2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
TIMELINE

COLLAPSABLE TIMELINE

Сворачиваемый таймлайн, созданный с помощью HTML, CSS и JavaScript.

  • Автор: Барни Паркер, 26 ноября 2015 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
COLLAPSABLE TIMELINE

CSS3 TIMELINE

Полностью адаптивный mobile first CSS-таймлайн.

  • Автор: Кришна Бабу, 24 ноября 2015 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
CSS3 TIMELINE

ANIMATED SVG TRAVEL TIMELINE

Анимированный таймлайн на тему путешествий, созданный с помощью HTML, CSS и SVG.

  • Автор: Винс Браун, 29 июля 2015 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
ANIMATED SVG TRAVEL TIMELINE

VERTICAL TIMELINE

Вертикальный таймлайн, созданный на чистом CSS.

  • Автор: Дарси Вутт, 11 марта 2015 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
VERTICAL TIMELINE

TIMELINE ANIMATION

Простой анимированный таймлайн.

  • Автор: Крис Райт, 12 февраля 2015 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
TIMELINE ANIMATION

NARROW VERTICAL TIMELINE

Плагин таймлайна для мобильных экранов.

  • Автор: Тайлер Берри, 3 февраля 2015 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
NARROW VERTICAL TIMELINE

TIMELINE FOR A PORTFOLIO

Таймлайн для страницы портфолио.

  • Автор: Эндрю Р МакХью, 1 февраля 2015 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
TIMELINE FOR A PORTFOLIO

RESPONSIVE VERTICAL TIMELINE

Адаптивный вертикальный таймлайн, созданный с помощью HTML и CSS.

  • Автор: Ратко Солайя, 26 сентября 2014 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
RESPONSIVE VERTICAL TIMELINE

VERTICAL TIMELINE

Легко настраиваемый, адаптивный таймлайн. В нем используется CSS3 и jQuery для создания анимации подпрыгивания. Она отображается только на десктопных устройствах. Мобильным пользователям предоставляется минималистичная версия.

  • Автор: CodyHouse,12 июля2014 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
VERTICAL TIMELINE

TIMELINE SCRIBBLE

Таймлайн, созданный с помощью HTML и CSS.

  • Автор: Michaela, 20 апреля2014 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
TIMELINE SCRIBBLE

VERTICAL TIMELINE

Таймлайн, созданный с помощью HTML и CSS.

  • Автор: Росс МакНейл, 7 января 2014 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
VERTICAL TIMELINE

CSS TIMELINE

Полностью адаптивный CSS-таймлайн.

  • Автор: Нильс Витлер, 19 сентября2013 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
CSS TIMELINE

CSS3 TIMELINE

Чтобы увидеть горизонтальную версию, установите для переменной $vertical значение false.

  • Автор: Пейвен Лю, 19 мая2013 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.

Горизонтальные таймлайны

CSS3 TIMELINE
  • Автор: Клей Ларсон, 28 января 2018 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML, CSS/Sass, JavaScript (jquery.js)

О коде

RESPONSIVE TIMELINE V3

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

  • Автор: demonwhite, 4 декабря 2017 г.
  • RESPONSIVE TIMELINE V3
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML, CSS/Sass, JavaScript/TypeScript (jquery.js).

О коде

NESTED AND COLOR TIMELINE

Интерактивный таймлайн с вложенными элементами.

NESTED AND COLOR TIMELINE
  • Автор: Дежан Бибия, 12 октября 2017 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML, CSS/SCSS, JavaScript (jquery.js, slick.js).

О коде

RESPONSIVE HISTORY TIMELINE

Горизонтальный адаптивный таймлайн на историческую тему.

RESPONSIVE HISTORY TIMELINE
  • Автор: Абхишек Радж, 3 октября 2017 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML/Pug, CSS/SCSS, JavaScript (jquery.js, slick.js).

О коде

GROUP TIMELINE

Горизонтальный таймлайн.

GROUP TIMELINE

HORIZONTAL TIMELINE

Горизонтальный таймлайн, созданный с помощью CSS и JavaScript.

  • Автор: Envato Tuts+, 27 апреля 2017 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
HORIZONTAL TIMELINE

HORIZONTAL TIMELINE

Таймлайн со слайдером на основе slick.js.

  • Автор: cenda, 10 апреля 2017 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
HORIZONTAL TIMELINE

4 PANEL TIMELINE CSS

Таймлайн, созданный на чистом CSS.

  • Автор: Джефф Гленн, 22 декабря 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
4 PANEL TIMELINE CSS

TIMELINE SEQUENCE V1

Таймлайн, созданный с помощью HTML, CSS и JavaScript.

  • Автор: Youssef, 8 июня 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
TIMELINE SEQUENCE V1

HORIZONTAL TIMELINE MOCKUP

Горизонтальный таймлайн, созданный с помощью HTML, CSS и JavaScript.

  • Автор: Xin YAO, 18 февраля 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
HORIZONTAL TIMELINE MOCKUP

HR TIMELINE

Таймлайн, созданный с помощью HTML и CSS.

  • Автор: Youri, 17 февраля 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
HR TIMELINE

HORIZONTAL TIMELINE INSPIRED BY CODYHOUSE

Горизонтальный таймлайн, для которого можно динамически задать не более 5 дат.

  • Автор: Адам Киммерер, 9 февраля 2016 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
HORIZONTAL TIMELINE INSPIRED BY CODYHOUSE

HORIZONTAL TIMELINE

Горизонтальный таймлайн, созданный на основе HTML, CSS и JavaScript.

  • Автор: Ритеш Кумар, 24 декабря 2015 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
HORIZONTAL TIMELINE

HORIZONTAL TIMELINE

Горизонтальный таймлайн, созданный на HTML, CSS и JavaScript.

  • Автор: Alberto, 6 июля 2015 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
HORIZONTAL TIMELINE

TIMELINE

Простой абстрактный таймлайн, созданный с помощью HTML и CSS.

  • Автор: Абхи Шарма, 23 декабря 2014 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
TIMELINE

ANIMATED CIRCLE TIMELINE

Таймлайн с анимированными элементами, которые отображаются при наведении курсора.

  • Автор: Йен Хуан, 11 декабря 2014 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
ANIMATED CIRCLE TIMELINE

HORIZONTAL TIMELINE

Горизонтальный таймлайн, созданный на основе HTML, CSS и JavaScript.

  • Автор: Элтон Мескита, 29 августа 2014 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
HORIZONTAL TIMELINE

HORIZONTAL TIMELINE

Таймлайн, созданный на основе HTML и CSS.

  • Автор: Клинт Браун, 30 сентября 2013 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.
HORIZONTAL TIMELINE

CSS3 HORIZONTAL TIMELINE

Горизонтальный таймлайн.

  • Автор: Пейвен Лю, 17 мая 2013 г.
  • Ссылки: ссылка на скачивание, демо-версия и код.

Вадим Дворниковавтор-переводчик статьи «CSS Timelines»

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