29 чудесни времеви линии за дизайн в CSS и с малко Javascript

Превъртете времевата линия

Графиците или времевите линии са друг от допълнителните елементи, които можем интегрирайте в уебсайт, за да покажете напредъка или развитието в години на компания или компания. Добре визуален графичен израз, който знае как да го композира елегантно с типография и визуални елементи, може да покаже стъпките, предприети от услуга или продукт с течение на времето.

Тези 29 времеви линии, които ще намерите по-долу, са от вертикални времеви линии както би било хоризонталите. Ще намерите най-добрия, който отговаря на вашите нужди, за да го намерите на страница от уебсайта, която разработвате за клиент или за себе си. Отиваме с колекция от много интересни времеви линии, които са много визуално приятни.

Хронология чрез превъртане

Превъртете времевата линия

Хронология, която е в HTML, CSS и JavaScript код, за да се позиционира изящно като добър минималистичен което поставя акцента върху червено за списъка с години от лявата страна и върху черно за шрифта и H2s. Най-хубавото на тази времева линия е, че докато превъртате страницата, промяната на годината ще бъде направена автоматично. Страхотен завършек, дизайн и резултат.

Хронология в CSS

CSS свойства на времевата линия

Тази времева линия използва CSS код, за да може дори да бъде правилно конфигурирана в някои от нейните свойства. Той няма превъртане като предишната, но се характеризира с поредица кутии и син цвят, за да му придаде още едно много елегантно докосване и да добави към списъка с времеви линии на тази публикация.

Отзивчив плъзгач на времевата линия

Отзивчив плъзгач на времевата линия

Тази времева линия е направена с библиотеката Swiper JS, за да включва HTML, CSS и JavaScript код. Той няма превъртане, докато напредваме през уеб страницата, но го прави поставя годините от дясната страна и бутон, с който можем да преминем към следващия, освен че можем да използваме показалеца на мишката, за да преминем към определена година. Страхотна анимация във всеки от преходите.

Разширена времева линия

Разширена времева линия

Тази времева линия се откроява с използването на HTML, CSS и JavaScript, освен отидете в едноцветния, точно в червените тонове. Също така се характеризира с използването на бутон, който ви позволява да напредвате или да се връщате във времевата линия, маркирана от този страхотен код за резултат, за да бъдете съвсем минималистични.

Хронология с фиксиран хедър и Flexbox

Хронологията е фиксирана

HTML и CSS код за фиксиран хедър, който тя ще остане фиксирана в момента, в който правим превъртане в страницата. От голяма тънкост е да бъдете график от голям интерес за всеки настоящ разработчик, който иска да бъде подчертан от настоящите стандарти за уеб дизайн.

Хронология на проекта

Хронология на проекта

Тази времева линия използва CSS и HTML, за да представи важна времева линия, за която да се използва този специфичен период от време за проект. Докато го превъртаме, преминава през дните от седмицата, така че е идеално да го внедрите за инструменти за съвместна работа, направени от самата компания.

История

История

Хронология в HTML, CSS и JavaScript, които се отличават от останалите за визуалната тема. И е, че докато преминем през вертикалната времева линия, всеки път, когато намерим нова снимка във времевата скала, тя ще се превърне в фоново изображение на уеб страницата, където сме поставили този код.

Hyperloop

Hyperloop

Hyperloopu е времева линия, която се откроява по-скоро с използвания дизайн и за това, че е програмиран нищо повече от HTML и CSS. Характеризира се с използването на различни размери в шрифта на текста с вертикална линия и поредица от полета, които маркират всеки важен момент от времевата линия.

Вертикална времева линия

Вертикална времева линия

Интервална времева линия, която дистанцира се от останалите чрез визуалното си докосване. Той има много актуален градиентен фон в дизайна и поредица от полета, които маркират всеки от тези интервали. Програмиран в CSS и HTML.

Хронология във Flexbox

Времева линия флексбокс

Един от най-добре завършените срокове и това се основава на карти за да включим цялата информация, от която се нуждаем за този интервал от време. Също така разработени в HTML и CSS, трябва да се има предвид, че всички карти трябва да имат еднаква височина и ширина, за да се изчисли мястото за по-големи екрани.

Хронология в DIV

Хронология div

Минималистична времева линия в дизайна и това беше разработен само в HTML и CSS, така че изпълнението му може да бъде много бързо. Той е напълно подходящ за изразяване на времева линия в информационен носител поради монохромното си покритие.

Хронология в CSS и HTML

CSS времева линия

Можете да поставите Изображения с размер 400 × 300 в тази времева линия, отличаваща се със зеления цвят на редовете и текста на датите и дните. Той няма анимации и се характеризира с опростения си дизайн на всички нива.

Коментари и график за обратна връзка

Хронология коментари

Хронология, много различна от останалите за разрешаване поставете карти със снимки на потребителите, или поне това е намерението в началото. С чудесен визуален стил, картите използват засенчване за доста плоска времева линия без анимации.

Хронология сутрин в HTML и CSS

Отзивчива времева линия

Перфектен график за отзивчивост характеризира се с това, че е HTML, CSS и предлагат доста проста, но много мобилна времева линия.

Интерфейс на времевата линия

История

Този код в HTML и CSS работи перфектно за представете работния ден на тренировка. Той е отзивчив със заглавно изображение и поредица от бутони, които го показват по много ясен и изчистен начин във визуалния аспект.

Хронология само в CSS

CSS хронология

Тази времева линия се характеризира с това, че е в CSS и с добре подбрана цветова серия: червена и зелена. Зелено, за да покрие изцяло цялата страница, бяло за текст и разделителни линии, и червено, за да различи интервала от време, в който се намираме. Можем да кликнете върху всеки интервал, за да го поставите с поле, което го заобикаля и подчертава.

Отзивчива времева линия V3

Адаптивна хронология V3

Първата от хоризонталните времеви линии в списъка в HTML, CSS и JavaScript. Визуално се откроява с използване на черни и сиви цветове да поставите хоризонтална линия с поредица от точки. Всеки интервал е подчертан с по-голяма тежест в източника и в текстовото съдържание.

Хронология, сгушена в цвят

Вложени

Един от хоризонталните срокове най-високото визуално качество в списъка. Много интерактивна хронология с много фини и добре представени анимации, за да предложи страхотно потребителско изживяване при всяко натискане на един от интервалите от време. Изработва се с HTML CSS / Sass и JavaScript / TypeScript (jquery.js).

Отзивчива хронология на историята

Отзивчива история

Перфектен график за покажете различните събития в изображения на времеви интервал в историята. Той е хоризонтален и отзивчив, че е разработен в HTML, CSS и JavaScript.

Групова времева линия

Хронология група

Тази времева линия се откроява с добър преход извършва се с хоризонтална анимация. С страхотен цвят и изискан дизайн, за да подчертае всеки от интервалите от време. В HTML, CSS и JavaScript е представена поредица от карти, насложени върху представително фоново изображение.

Хоризонтална CSS и HTML времева линия

Хоризонтално envato

Изработено от него известни Envato Tuts +, представяме ни хоризонтална времева линия с поредица от изчистени и основни карти в дизайна. Плоски цветове и хоризонтална линия с поредица от червени точки, които блокират всеки интервал.

Хронология CSS, HTML и slick.js 

Пастелна времева линия

Пастелни тонове в дизайна за времева линия, която се откроява с представянето на всеки от изображенията показващ всеки интервал от време. Именно преходът между всяко от изображенията и интервалите прави тази времева линия открояваща се.

Последователност на времевата линия V1

Последователност на времевата линия

Хронология, която се откроява бутони на всяка вертикална линия на всеки интервал, за да свържете фоново изображение на цял екран всеки път, когато натиснем едно.

Хоризонтална времева линия HTML CSS

Времева линия HR

Няма да можете да щракнете никъде по тази времева линия, която е подчертана от изискан дизайн от мъдрия избор на цветова палитра и поредица от сандвичи за всеки от сроковете. Няма анимации, но визуално е много приятно за окото.

Хронология Codyhouse

Хронология CodyHouse

Тази времева линия представен от Codyhouse е едноцветен в дизайна и е разработен в HTML, CSS и JavaScript. Той представя минималистична линия с поредица от точки като интервали, върху които трябва да се щракне и причинява хоризонтална анимация за по-малко от половин секунда. Просто, но мощно.

Хоризонтална времева линия

Хоризонтална времева линия

Друга времева линия, направена в HTML, CSS и JavaScript. Характеризира се с един цвят, той съдържа елегантен дизайн със зелен цвят, за да постави дантелата върху всяка от точките, които представляват интервалите от време. Всеки път, когато натиснем едно, започва много плавна странична анимация.

Безименен график

Безименен график

Единствената черна хронология от долния списък. След това използва различни цветове, за да се разграничат всяка година и текста едновременно с нейните граници. Той има забележителна анимация за преминаване между всеки от текстовете.

Хронология

Хронология

Тази времева линия поставя акцентът върху зеления цвят да бъде напълно статичен.

Друга хоризонтална времева линия

Друга времева линия

Можете да поставете изображение близо до цял екран за времева линия, която се откроява с използването на сини и сиви тонове плюс поредица от кръгове, които представляват всяка година.

Няма те пиерда друга поредица от менюта в CSS и HTML.


Съдържанието на статията се придържа към нашите принципи на редакторска етика. За да съобщите за грешка, щракнете върху тук.

Бъдете първите, които коментират

Оставете вашия коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

*

*

  1. Отговорен за данните: Мигел Анхел Гатон
  2. Предназначение на данните: Контрол на СПАМ, управление на коментари.
  3. Легитимация: Вашето съгласие
  4. Съобщаване на данните: Данните няма да бъдат съобщени на трети страни, освен по законово задължение.
  5. Съхранение на данни: База данни, хоствана от Occentus Networks (ЕС)
  6. Права: По всяко време можете да ограничите, възстановите и изтриете информацията си.