CSS-таймлайны

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

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

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

О коде

TIMELINE CSS

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

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

О коде

SCROLL TIMELINE

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

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

О коде

CSS TIMELINE

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

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

О коде

CSS VERTICAL TIMELINE

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

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

О коде

CSS TIMELINE

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

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

О коде

RESPONSIVE SLIDER TIMELINE

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

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

О коде

TIMELINE CREATED WITH CSS GRID

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

ADVANCED TIMELINE

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

TIMELINE WITH FIXED HEADER USING FLEXBOX

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

  • Автор: Matys 29 мая 2017 г.
  • Ссылки: ссылка на скачиваниедемо-версия и код.

PROJECT TIMELINE

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

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

TIMELINE

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

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

HYPERLOOP TIMELINE

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

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

VERTICAL TIMELINE

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

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

FLEXBOX TIMELINE LAYOUT

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

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

SINGLE DIV TIMELINE

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

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

CSS TIMELINE

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

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

VERTICAL TIMELINE

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

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

TIMELINE

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

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

COMMENTS & FEEADBACKS & HISTORY TIMELINE

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

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

UI DESIGN MORNING TIMELINE

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

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

TIMELINE

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

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

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

TIMELINE UI

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

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

SIMPLE RESPONSIVE TIMELINE

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

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

VERTICAL TIMELINE

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

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

RESPONSIVE TIMELINE

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

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

VERTICAL TIMELINE

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

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

PRETTY TIMELINE

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

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

CSS TIMELINE

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

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

TIMELINE

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

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

VERTICAL TIMELINE WITH CSS

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

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

TIMELINE

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

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

COLLAPSABLE TIMELINE

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

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

CSS3 TIMELINE

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

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

ANIMATED SVG TRAVEL TIMELINE

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

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

VERTICAL TIMELINE

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

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

TIMELINE ANIMATION

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

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

NARROW VERTICAL TIMELINE

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

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

TIMELINE FOR A PORTFOLIO

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

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

RESPONSIVE VERTICAL TIMELINE

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

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

VERTICAL TIMELINE

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

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

TIMELINE SCRIBBLE

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

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

VERTICAL TIMELINE

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

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

CSS TIMELINE

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

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

CSS3 TIMELINE

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

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

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

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

О коде

RESPONSIVE TIMELINE V3

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

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

О коде

NESTED AND COLOR TIMELINE

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

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

О коде

RESPONSIVE HISTORY TIMELINE

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

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

О коде

GROUP TIMELINE

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

HORIZONTAL TIMELINE

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

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

HORIZONTAL TIMELINE

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

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

4 PANEL TIMELINE CSS

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

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

TIMELINE SEQUENCE V1

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

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

HORIZONTAL TIMELINE MOCKUP

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

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

HR TIMELINE

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

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

HORIZONTAL TIMELINE INSPIRED BY CODYHOUSE

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

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

HORIZONTAL TIMELINE

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

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

HORIZONTAL TIMELINE

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

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

TIMELINE

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

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

ANIMATED CIRCLE TIMELINE

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

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

HORIZONTAL TIMELINE

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

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

HORIZONTAL TIMELINE

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

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

CSS3 HORIZONTAL TIMELINE

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

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

Перевод статьи «CSS Timelines» был подготовлен дружной командой проекта Сайтостроение от А до Я.