Графіки або часові шкали - ще один із додаткових елементів, які ми можемо інтегрувати у веб-сайт, щоб показати прогрес або розвиток в роки компанії чи компанії. Добре наочний графічний вираз, який, вміючи елегантно складати його за допомогою типографіки та візуальних елементів, може показати кроки, зроблені службою чи товаром з часом.
Ці 29 графіків, які ви знайдете нижче, є з вертикальних часових шкал як би були горизонталі. Ви знайдете найкращий, який відповідає вашим потребам, щоб знайти його на сторінці веб-сайту, який ви розробляєте для клієнта або для себе. Ми збираємося з колекцією дуже цікавих графіків, які дуже приємно візуально.
Хронологія за допомогою прокрутки
Часова шкала, яка знаходиться в HTML, CSS та JavaScript коді, щоб витончено позиціонувати себе як хороший мінімалізм що підкреслює червоний для списку років ліворуч, а чорний для шрифту та H2s. Найкраще у цій хронології - це те, що під час прокрутки сторінки автоматично змінюватиметься рік. Чудова обробка, дизайн та результат.
Хронологія в CSS
Ця хронологія використовує код CSS, щоб навіть мати можливість належним чином налаштувати деякі її властивості. У ньому немає прокрутки як і попередній, але він характеризується низкою коробок та синім кольором, щоб надати йому ще один дуже елегантний штрих та додати до списку часових шкал цієї публікації.
Чуйний повзунок часової шкали
Ця хронологія складається з бібліотеки Swiper JS для включення коду HTML, CSS та JavaScript. У ньому немає прокрутки під час просування веб-сторінки, але воно є розміщує роки з правого боку і кнопка, за допомогою якої ми можемо перейти до наступного, крім можливості використовувати вказівник миші для переходу до певного року. Чудова анімація в кожному з переходів.
Розширений графік
Ця хронологія виділяється використанням HTML, CSS та JavaScript, крім перейти в одноколірний, саме в червоних тонах. Він також характеризується використанням кнопки, яка дозволяє просуватися вперед або повертатися в часову шкалу, позначену цим чудовим кодом результатів, щоб бути досить мінімалістичною.
Хронологія з фіксованим заголовком та Flexbox
HTML і CSS-код для фіксованого заголовка, який він залишатиметься фіксованим на момент прокрутки на сторінці. Дуже тонко, щоб бути часовою шкалою, яка представляє великий інтерес для будь-якого поточного розробника, який хоче бути виділеним сучасними стандартами веб-дизайну.
Графік проекту
Ця шкала використовує CSS та HTML, щоб представити важливу шкалу часу, яку потрібно використовувати той конкретний проміжок часу для проекту. Оскільки ми прокручуємо його через дні тижня, то ідеально застосовувати його для інструментів спільної роботи, створених самою компанією.
Timeline
Графік в HTML, CSS та JavaScript, що відрізняється від решти для візуальної теми. І це те, що коли ми прокручуємо вертикальну шкалу часу, кожен раз, коли ми знаходимо нову фотографію на шкалі часу, вона стає фоновим зображенням веб-сторінки, де ми розмістили цей код.
Hyperloop
Гіперлупа - це хронологія, яка виділяється скоріше використовуваним дизайном і за те, що програмується не більше, ніж у HTML та CSS. Характеризується використанням різного розміру в текстовому шрифті з вертикальною лінією та рядом полів, що позначають кожен важливий момент часової шкали.
Вертикальна шкала часу
Інтервал часової шкали, який віддаляється від решти своїм зоровим дотиком. Він має дуже актуальний градієнтний фон у дизайні та ряд вікон, які позначають кожен з цих інтервалів. Програмується на CSS та HTML.
Хронологія в Flexbox
Один з найкращих закінчених термінів і це базується на картках включити всю інформацію, яка нам потрібна для цього інтервалу часу. Також розроблений у HTML та CSS, слід враховувати, що всі картки повинні мати однакову висоту та ширину для обчислення місця для більших екранів.
Хронологія в DIV
Мінімалістичний графік у дизайні, і це вже було розроблений лише в HTML та CSS, тому його реалізація може бути дуже швидкою. Він цілком підходить для вираження часової шкали в інформаційному носії завдяки своєму монохромному покриттю.
Хронологія в CSS та HTML
Можна розмістити Зображення розміром 400 × 300 на цій шкалі часу виділяється зеленим кольором рядків та текстом дат та днів. Він не має анімації і характеризується простим дизайном на всіх рівнях.
Часова шкала коментарів та відгуків
Часова шкала, що сильно відрізняється від інших для дозволу покласти картки з фотографіями користувачів, або, принаймні, спочатку такий намір. Маючи чудовий візуальний стиль, картки використовують затінення для досить плоскої шкали часу без анімації.
Хронологія вранці в HTML та CSS
Ідеальний графік для реагування на це для нього характерні HTML, CSS і пропонуємо досить простий, але дуже мобільний графік.
Інтерфейс часової шкали
Цей код у HTML та CSS чудово працює для презентувати робочий день тренування. Він чуйний завдяки заголовку зображення та ряду кнопок, які дуже чітко і чітко відображають його у візуальному аспекті.
Хронологія лише в CSS
Ця хронологія характеризується перебуванням у CSS та a вдало підібрана кольорова серія: червона та зелена. Зелений, щоб повністю охопити всю сторінку, білий для тексту та розділювальних рядків, а червоний для розрізнення часового інтервалу, в якому ми знаходимося. Ми можемо клацнути на кожному інтервалі, щоб розмістити його у полі, яке оточує його та виділяє.
Відповідна хронологія 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.