Графиците или времевите линии са друг от допълнителните елементи, които можем интегрирайте в уебсайт, за да покажете напредъка или развитието в години на компания или компания. Добре визуален графичен израз, който знае как да го композира елегантно с типография и визуални елементи, може да покаже стъпките, предприети от услуга или продукт с течение на времето.
Тези 29 времеви линии, които ще намерите по-долу, са от вертикални времеви линии както би било хоризонталите. Ще намерите най-добрия, който отговаря на вашите нужди, за да го намерите на страница от уебсайта, която разработвате за клиент или за себе си. Отиваме с колекция от много интересни времеви линии, които са много визуално приятни.
Хронология чрез превъртане
Хронология, която е в HTML, CSS и JavaScript код, за да се позиционира изящно като добър минималистичен което поставя акцента върху червено за списъка с години от лявата страна и върху черно за шрифта и H2s. Най-хубавото на тази времева линия е, че докато превъртате страницата, промяната на годината ще бъде направена автоматично. Страхотен завършек, дизайн и резултат.
Хронология в CSS
Тази времева линия използва CSS код, за да може дори да бъде правилно конфигурирана в някои от нейните свойства. Той няма превъртане като предишната, но се характеризира с поредица кутии и син цвят, за да му придаде още едно много елегантно докосване и да добави към списъка с времеви линии на тази публикация.
Отзивчив плъзгач на времевата линия
Тази времева линия е направена с библиотеката Swiper JS, за да включва HTML, CSS и JavaScript код. Той няма превъртане, докато напредваме през уеб страницата, но го прави поставя годините от дясната страна и бутон, с който можем да преминем към следващия, освен че можем да използваме показалеца на мишката, за да преминем към определена година. Страхотна анимация във всеки от преходите.
Разширена времева линия
Тази времева линия се откроява с използването на HTML, CSS и JavaScript, освен отидете в едноцветния, точно в червените тонове. Също така се характеризира с използването на бутон, който ви позволява да напредвате или да се връщате във времевата линия, маркирана от този страхотен код за резултат, за да бъдете съвсем минималистични.
Хронология с фиксиран хедър и Flexbox
HTML и CSS код за фиксиран хедър, който тя ще остане фиксирана в момента, в който правим превъртане в страницата. От голяма тънкост е да бъдете график от голям интерес за всеки настоящ разработчик, който иска да бъде подчертан от настоящите стандарти за уеб дизайн.
Хронология на проекта
Тази времева линия използва CSS и HTML, за да представи важна времева линия, за която да се използва този специфичен период от време за проект. Докато го превъртаме, преминава през дните от седмицата, така че е идеално да го внедрите за инструменти за съвместна работа, направени от самата компания.
История
Хронология в HTML, CSS и JavaScript, които се отличават от останалите за визуалната тема. И е, че докато преминем през вертикалната времева линия, всеки път, когато намерим нова снимка във времевата скала, тя ще се превърне в фоново изображение на уеб страницата, където сме поставили този код.
Hyperloop
Hyperloopu е времева линия, която се откроява по-скоро с използвания дизайн и за това, че е програмиран нищо повече от HTML и CSS. Характеризира се с използването на различни размери в шрифта на текста с вертикална линия и поредица от полета, които маркират всеки важен момент от времевата линия.
Вертикална времева линия
Интервална времева линия, която дистанцира се от останалите чрез визуалното си докосване. Той има много актуален градиентен фон в дизайна и поредица от полета, които маркират всеки от тези интервали. Програмиран в CSS и HTML.
Хронология във Flexbox
Един от най-добре завършените срокове и това се основава на карти за да включим цялата информация, от която се нуждаем за този интервал от време. Също така разработени в HTML и CSS, трябва да се има предвид, че всички карти трябва да имат еднаква височина и ширина, за да се изчисли мястото за по-големи екрани.
Хронология в DIV
Минималистична времева линия в дизайна и това беше разработен само в HTML и CSS, така че изпълнението му може да бъде много бързо. Той е напълно подходящ за изразяване на времева линия в информационен носител поради монохромното си покритие.
Хронология в CSS и HTML
Можете да поставите Изображения с размер 400 × 300 в тази времева линия, отличаваща се със зеления цвят на редовете и текста на датите и дните. Той няма анимации и се характеризира с опростения си дизайн на всички нива.
Коментари и график за обратна връзка
Хронология, много различна от останалите за разрешаване поставете карти със снимки на потребителите, или поне това е намерението в началото. С чудесен визуален стил, картите използват засенчване за доста плоска времева линия без анимации.
Хронология сутрин в HTML и CSS
Перфектен график за отзивчивост характеризира се с това, че е HTML, CSS и предлагат доста проста, но много мобилна времева линия.
Интерфейс на времевата линия
Този код в HTML и CSS работи перфектно за представете работния ден на тренировка. Той е отзивчив със заглавно изображение и поредица от бутони, които го показват по много ясен и изчистен начин във визуалния аспект.
Хронология само в CSS
Тази времева линия се характеризира с това, че е в CSS и с добре подбрана цветова серия: червена и зелена. Зелено, за да покрие изцяло цялата страница, бяло за текст и разделителни линии, и червено, за да различи интервала от време, в който се намираме. Можем да кликнете върху всеки интервал, за да го поставите с поле, което го заобикаля и подчертава.
Отзивчива времева линия V3
Първата от хоризонталните времеви линии в списъка в HTML, CSS и JavaScript. Визуално се откроява с използване на черни и сиви цветове да поставите хоризонтална линия с поредица от точки. Всеки интервал е подчертан с по-голяма тежест в източника и в текстовото съдържание.
Хронология, сгушена в цвят
Един от хоризонталните срокове най-високото визуално качество в списъка. Много интерактивна хронология с много фини и добре представени анимации, за да предложи страхотно потребителско изживяване при всяко натискане на един от интервалите от време. Изработва се с HTML CSS / Sass и JavaScript / TypeScript (jquery.js).
Отзивчива хронология на историята
Перфектен график за покажете различните събития в изображения на времеви интервал в историята. Той е хоризонтален и отзивчив, че е разработен в HTML, CSS и JavaScript.
Групова времева линия
Тази времева линия се откроява с добър преход извършва се с хоризонтална анимация. С страхотен цвят и изискан дизайн, за да подчертае всеки от интервалите от време. В HTML, CSS и JavaScript е представена поредица от карти, насложени върху представително фоново изображение.
Хоризонтална CSS и HTML времева линия
Изработено от него известни Envato Tuts +, представяме ни хоризонтална времева линия с поредица от изчистени и основни карти в дизайна. Плоски цветове и хоризонтална линия с поредица от червени точки, които блокират всеки интервал.
Хронология CSS, HTML и slick.js
Пастелни тонове в дизайна за времева линия, която се откроява с представянето на всеки от изображенията показващ всеки интервал от време. Именно преходът между всяко от изображенията и интервалите прави тази времева линия открояваща се.
Последователност на времевата линия V1
Хронология, която се откроява бутони на всяка вертикална линия на всеки интервал, за да свържете фоново изображение на цял екран всеки път, когато натиснем едно.
Хоризонтална времева линия HTML CSS
Няма да можете да щракнете никъде по тази времева линия, която е подчертана от изискан дизайн от мъдрия избор на цветова палитра и поредица от сандвичи за всеки от сроковете. Няма анимации, но визуално е много приятно за окото.
Хронология Codyhouse
Тази времева линия представен от Codyhouse е едноцветен в дизайна и е разработен в HTML, CSS и JavaScript. Той представя минималистична линия с поредица от точки като интервали, върху които трябва да се щракне и причинява хоризонтална анимация за по-малко от половин секунда. Просто, но мощно.
Хоризонтална времева линия
Друга времева линия, направена в HTML, CSS и JavaScript. Характеризира се с един цвят, той съдържа елегантен дизайн със зелен цвят, за да постави дантелата върху всяка от точките, които представляват интервалите от време. Всеки път, когато натиснем едно, започва много плавна странична анимация.
Безименен график
Единствената черна хронология от долния списък. След това използва различни цветове, за да се разграничат всяка година и текста едновременно с нейните граници. Той има забележителна анимация за преминаване между всеки от текстовете.
Хронология
Тази времева линия поставя акцентът върху зеления цвят да бъде напълно статичен.
Друга хоризонтална времева линия
Можете да поставете изображение близо до цял екран за времева линия, която се откроява с използването на сини и сиви тонове плюс поредица от кръгове, които представляват всяка година.
Няма те пиерда друга поредица от менюта в CSS и HTML.