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»