29 wonderlike ontwerp-tydlyne in CSS en met 'n bietjie Javascript

Blaai tydlyn

Die tydlyne of tydlyne is nog een van die ekstra elemente wat ons kan kry integreer in 'n webwerf om vordering of evolusie aan te toon in jare van 'n maatskappy of maatskappy. 'N Goed-visuele grafiese uitdrukking wat, as u weet hoe u dit elegant kan saamstel met tipografie en visuele elemente, die stappe wat 'n diens of produk neem, met verloop van tyd kan toon.

Hierdie 29 tydlyne wat u hieronder sal vind, is vanaf vertikale tydlyne soos die horisontale. U sal die beste vind wat by u pas, om dit op te spoor op 'n bladsy van die webwerf wat u vir 'n kliënt of vir uself ontwikkel. Ons gaan met 'n versameling baie interessante tydlyne wat baie visueel aangenaam is.

Tydlyn deur te blaai

Blaai tydlyn

'N Tydlyn in HTML-, CSS- en JavaScript-kode om homself grasieus te posisioneer as 'n goeie minimalistiese wat die aksent op rooi plaas vir die lys jare aan die linkerkant, en op swart vir die lettertipe en die H2's. Die beste van hierdie tydlyn is dat wanneer u deur die bladsy blaai, die jaarverandering outomaties aangebring sal word. Goeie afwerking, ontwerp en resultaat.

Tydlyn in CSS

CSS tydlyn eienskappe

Hierdie tydlyn gebruik CSS-kode om selfs in sommige van sy eiendomme behoorlik te kan instel. Dit hoef nie te blaai nie soos die vorige, maar dit word gekenmerk deur 'n reeks vierkante en 'n blou kleur om dit nog 'n baie elegante aanslag te gee en toe te voeg tot die lys tydlyne in hierdie publikasie.

Responsiewe tydlynskuif

Responsiewe tydlynskuif

Hierdie tydlyn word saamgestel met die Swiper JS-biblioteek en bevat HTML-, CSS- en JavaScript-kode. Dit blaai nie soos ons deur die webblad vorder nie, maar wel plaas die jare aan die regte kant en 'n knoppie waarmee ons na die volgende kan gaan, behalwe dat ons die muiswyser kan gebruik om na 'n spesifieke jaar te gaan. Groot animasie in elk van die oorgange.

Gevorderde tydlyn

Gevorderde tydlyn

Hierdie tydlyn val op die gebruik van HTML, CSS en JavaScript, afgesien van gaan in die monocolor, juis in die rooi kleure. Dit word ook gekenmerk deur die gebruik van 'n knoppie wat u toelaat om vorentoe of agtertoe te beweeg in die tydlyn wat deur hierdie uitstekende resultaatkode gemerk word om redelik minimalisties te wees.

Tydlyn met vaste kop en Flexbox

Tydlyn is vasgestel

HTML- en CSS-kode vir 'n vaste kopstuk wat dit bly vas op die oomblik dat ons blaai in die bladsy. Van groot subtiliteit om 'n tydlyn van groot belang te wees vir enige huidige ontwikkelaar wat deur die huidige webontwerpstandaarde uitgelig wil word.

Projek tydlyn

Projek tydlyn

Hierdie tydlyn gebruik CSS en HTML om 'n belangrike tydlyn aan te bied om voor te gebruik daardie spesifieke tydperk vir 'n projek. Terwyl ons blaai, gaan dit deur die dae van die week, dus is dit ideaal om dit te implementeer vir samewerkingsinstrumente wat die maatskappy self vervaardig.

Tydlyn

Tydlyn

'N Tydlyn in HTML, CSS en JavaScript wat opvallend is van die res vir die visuele tema. En dit is dat wanneer ons deur die vertikale tydlyn blaai, elke keer as ons 'n nuwe foto op die tydlyn vind, dit die agtergrondbeeld sal word van die webblad waar ons hierdie kode geplaas het.

Hyperloop

Hyperloop

Hyperloopu is 'n tydlyn wat staan ​​eerder uit vir die ontwerp wat gebruik word en vir niks anders geprogrammeer as in HTML en CSS nie. Dit word gekenmerk deur die gebruik van verskillende groottes in die lettertipe van die teks met 'n vertikale lyn en 'n reeks vakkies wat elke belangrike oomblik van die tydlyn aandui.

Vertikale tydlyn

Vertikale tydlyn

N interval tydlyn wat distansieer hom van die res deur sy visuele aanraking. Dit het 'n baie onlangse agtergrond in die ontwerp en 'n reeks bokse wat elk van hierdie intervalle aandui. Geprogrammeer in CSS en HTML.

Tydlyn in Flexbox

Tydlyn flexbox

Een van die beste voltooide tydlyne en dit is gebaseer op kaarte om al die inligting wat ons benodig vir daardie tydsinterval in te sluit. Dit is ook ontwikkel in HTML en CSS en moet in ag geneem word dat alle kaarte dieselfde hoogte en breedte moet hê om die ruimte vir groter skerms te bereken.

Tydlyn in DIV

Tydlyn div

Dit is 'n minimalistiese tydlyn in ontwerp slegs ontwikkel in HTML en CSS, so die implementering daarvan kan baie vinnig wees. Dit is uiters geskik om 'n tydlyn in 'n inligtingsmedium uit te druk vanweë sy monochroom-afwerking.

Tydlyn in CSS en HTML

CSS-tydlyn

U kan plaas Beelde van 400 × 300 grootte in hierdie tydlyn onderskei deur die groen kleur van die lyne en die teks van die datums en dae. Dit het geen animasies nie en word eerder gekenmerk deur sy eenvoudige ontwerp op alle vlakke.

Tydlyn vir kommentaar en terugvoer

Tydlynopmerkings

'N Tydlyn wat baie anders is as die ander om toe te laat sit kaarte saam met gebruikers se foto's, of ten minste is dit eers die bedoeling. Met 'n uitstekende visuele styl gebruik die kaarte skaduwee vir 'n taamlike plat tydlyn sonder animasies.

Tydlynoggend in HTML en CSS

Responsiewe tydlyn

'N Perfekte tydlyn om reageer daarop dit word gekenmerk deur HTML, CSS en bied 'n redelike eenvoudige, maar baie mobiele tydlyn.

Tydlyn-UI

Tydlyn

Hierdie kode in HTML en CSS werk perfek vir bied die werksdag aan van 'n oefensessie. Dit is reageerbaar met 'n kopopskrif en 'n reeks knoppies wat dit op 'n baie duidelike en skoon manier in die visuele aspek wys.

Slegs tydlyn in CSS

CSS-tydlyn

Hierdie tydlyn word gekenmerk deur in CSS te wees en deur 'n goed gekose kleurreeks: rooi en groen. Groen om die hele bladsy volledig te bedek, wit vir teks en skeidslyne, en rooi om die tydsinterval waarin ons is, te onderskei. Ons kan op elke interval klik om dit te plaas met 'n blokkie wat dit omring en dit uitlig.

Responsiewe tydlyn V3

Responsiewe tydlyn V3

Die eerste van die horisontale tydlyne in die lys in HTML, CSS en JavaScript. Visueel uitstaan ​​vir die gebruik van swart en grys kleure om 'n horisontale lyn met 'n reeks punte te plaas. Elke interval word met groter gewig in die bron en in die teksinhoud uitgelig.

Tydlyn geleë in kleur

geneste

Een van die horisontale tydlyne hoogste visuele kwaliteit op die lys. 'N Baie interaktiewe tydlyn met baie subtiele en goed aangebied animasies om 'n uitstekende gebruikerservaring te bied elke keer as een van die tydsintervalle ingedruk word. Dit is gemaak met HTML CSS / Sass en JavaScript / TypeScript (jquery.js).

Responsiewe geskiedenis tydlyn

Responsiewe verhaal

N perfekte tydlyn vir wys die verskillende gebeure in beelde van 'n tydgleuf in die geskiedenis. Dit is horisontaal en reageer om in HTML, CSS en JavaScript te ontwikkel.

Groeptydlyn

Tydlyngroep

Hierdie tydlyn staan ​​uit vir 'n goeie oorgang uitgevoer met 'n horisontale animasie. Met 'n uitstekende kleur en 'n pragtige ontwerp om elk van die tydsintervalle uit te lig. Dit is in HTML, CSS en JavaScript om 'n reeks kaarte op 'n verteenwoordigende agtergrondafbeelding aan te bied.

Horisontale CSS- en HTML-tydlyn

Horisontale envato

Gemaak deur hom bekende Envato Tuts +word 'n horisontale tydlyn aangebied met 'n reeks skoon en basiese kaarte in ontwerp. Vlak kleure en 'n horisontale lyn met 'n reeks rooi kolletjies wat elke interval met mekaar verbind.

Tydlyn CSS, HTML en slick.js 

Pastel tydlyn

Pasteltone in die ontwerp vir 'n tydlyn wat staan ​​uit vir die aanbieding van elk van die beelde wat elke tydsinterval toon. Dit is die oorgang tussen elk van die beelde en intervalle wat hierdie tydlyn opval.

Tydlynvolgorde V1

Tydlynvolgorde

'N Tydlyn waarvoor uitstaan knoppies op elke vertikale lyn van elke interval om 'n agtergrondbeeld op die volle skerm te koppel elke keer as ons een druk.

Horisontale tydlyn HTML CSS

Tydlyn HR

U sal nêrens op hierdie tydlyn kan kliek wat deur a gemerk word nie pragtige ontwerp deur die wyse keuse van kleurpalet en 'n reeks toebroodjies vir elk van die tydlyne. Daar is geen animasies nie, maar visueel is dit baie aangenaam vir die oog.

Tydlyn Codyhouse

Tydlyn CodyHouse

Hierdie tydlyn aangebied deur Codyhouse is enkelkleurig ontwerp en is ontwikkel in HTML, CSS en JavaScript. Dit bied 'n minimalistiese lyn met 'n reeks punte as tussenposes wat geklik word en veroorsaak dat die horisontale animasie van minder as 'n halwe sekonde is. Eenvoudig, maar kragtig.

Horisontale tydlyn

Horisontale tydlyn

Nog 'n tydlyn gemaak in HTML, CSS en JavaScript. Gekenmerk deur die enkele kleur, dit bevat 'n elegante ontwerp met 'n groen kleur om die kant op elkeen van die punte te plaas wat die tydsintervalle voorstel. Elke keer as ons een druk, begin 'n baie gladde sy-animasie.

Naamlose tydlyn

Naamlose tydlyn

Die enigste swart tydlyn van die onderste lys. Dan gebruik hy verskillende kleure om elke jaar en die teks te onderskei terselfdertyd as die perke daarvan. Dit het 'n prominente animasie om tussen elk van die tekste deur te gaan.

tydlyn

Tydlyn

Hierdie tydlyn stel die aksent op die kleur groen om heeltemal staties te wees.

Nog 'n horisontale tydlyn

Nog 'n tydlyn

Dit kan plaas 'n beeld naby die volle skerm vir 'n tydlyn wat uitstaan ​​vir die gebruik van blou en grys, plus 'n reeks sirkels wat elke jaar verteenwoordig.

Moet nie misloop nie nog 'n reeks menu's in CSS en HTML.


Die inhoud van die artikel voldoen aan ons beginsels van redaksionele etiek. Klik op om 'n fout te rapporteer hier.

Wees die eerste om te kommentaar lewer

Laat u kommentaar

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk met *

*

*

  1. Verantwoordelik vir die data: Miguel Ángel Gatón
  2. Doel van die data: Beheer SPAM, bestuur van kommentaar.
  3. Wettiging: U toestemming
  4. Kommunikasie van die data: Die data sal nie aan derde partye oorgedra word nie, behalwe deur wettige verpligtinge.
  5. Datastoor: databasis aangebied deur Occentus Networks (EU)
  6. Regte: U kan u inligting te alle tye beperk, herstel en verwyder.