CSS-таймлайны

Подборка бесплатных таймлайнов на 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

О коде

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

ADVANCED TIMELINE

TIMELINE WITH FIXED HEADER USING FLEXBOX

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

TIMELINE WITH FIXED HEADER USING FLEXBOX

PROJECT TIMELINE

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

PROJECT TIMELINE

TIMELINE

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

TIMELINE

HYPERLOOP TIMELINE

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

HYPERLOOP TIMELINE

VERTICAL TIMELINE

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

VERTICAL TIMELINE

FLEXBOX TIMELINE LAYOUT

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

FLEXBOX TIMELINE LAYOUT

SINGLE DIV TIMELINE

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

SINGLE DIV TIMELINE

CSS TIMELINE

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

CSS TIMELINE

VERTICAL TIMELINE

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

VERTICAL TIMELINE

TIMELINE

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

TIMELINE

COMMENTS & FEEADBACKS & HISTORY TIMELINE

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

COMMENTS & FEEADBACKS & HISTORY TIMELINE

UI DESIGN MORNING TIMELINE

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

UI DESIGN MORNING TIMELINE

TIMELINE

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

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

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

TIMELINE

TIMELINE UI

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

TIMELINE UI

SIMPLE RESPONSIVE TIMELINE

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

SIMPLE RESPONSIVE TIMELINE

VERTICAL TIMELINE

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

VERTICAL TIMELINE

RESPONSIVE TIMELINE

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

RESPONSIVE TIMELINE

VERTICAL TIMELINE

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

VERTICAL TIMELINE

PRETTY TIMELINE

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

PRETTY TIMELINE

CSS TIMELINE

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

CSS TIMELINE

TIMELINE

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

TIMELINE

VERTICAL TIMELINE WITH CSS

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

VERTICAL TIMELINE WITH CSS

TIMELINE

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

TIMELINE

COLLAPSABLE TIMELINE

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

COLLAPSABLE TIMELINE

CSS3 TIMELINE

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

CSS3 TIMELINE

ANIMATED SVG TRAVEL TIMELINE

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

ANIMATED SVG TRAVEL TIMELINE

VERTICAL TIMELINE

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

VERTICAL TIMELINE

TIMELINE ANIMATION

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

TIMELINE ANIMATION

NARROW VERTICAL TIMELINE

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

NARROW VERTICAL TIMELINE

TIMELINE FOR A PORTFOLIO

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

TIMELINE FOR A PORTFOLIO

RESPONSIVE VERTICAL TIMELINE

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

RESPONSIVE VERTICAL TIMELINE

VERTICAL TIMELINE

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

VERTICAL TIMELINE

TIMELINE SCRIBBLE

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

TIMELINE SCRIBBLE

VERTICAL TIMELINE

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

VERTICAL TIMELINE

CSS TIMELINE

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

CSS TIMELINE

CSS3 TIMELINE

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

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

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.

HORIZONTAL TIMELINE

HORIZONTAL TIMELINE

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

HORIZONTAL TIMELINE

4 PANEL TIMELINE CSS

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

4 PANEL TIMELINE CSS

TIMELINE SEQUENCE V1

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

TIMELINE SEQUENCE V1

HORIZONTAL TIMELINE MOCKUP

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

HORIZONTAL TIMELINE MOCKUP

HR TIMELINE

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

HR TIMELINE

HORIZONTAL TIMELINE INSPIRED BY CODYHOUSE

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

HORIZONTAL TIMELINE INSPIRED BY CODYHOUSE

HORIZONTAL TIMELINE

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

HORIZONTAL TIMELINE

HORIZONTAL TIMELINE

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

HORIZONTAL TIMELINE

TIMELINE

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

TIMELINE

ANIMATED CIRCLE TIMELINE

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

ANIMATED CIRCLE TIMELINE

HORIZONTAL TIMELINE

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

HORIZONTAL TIMELINE

HORIZONTAL TIMELINE

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

HORIZONTAL TIMELINE

CSS3 HORIZONTAL TIMELINE

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

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