Osie czasu lub osie czasu to kolejny z dodatkowych elementów, które możemy zintegrować się ze stroną internetową, aby pokazać postęp lub ewolucję w latach firmy lub firmy. Dobrze wizualna ekspresja graficzna, która wiedząc, jak elegancko skomponować ją z typografią i elementami wizualnymi, może pokazać kroki podjęte przez usługę lub produkt w czasie.
Te 29 osi czasu, które znajdziesz poniżej, to z pionowych osi czasu jak byłyby poziomy. Znajdziesz ten, który najlepiej odpowiada Twoim potrzebom, aby zlokalizować go na stronie witryny internetowej, którą tworzysz dla klienta lub dla siebie. Idziemy z kolekcją bardzo interesujących osi czasu, które są bardzo przyjemne wizualnie.
Oś czasu przez przewijanie
Oś czasu w kodzie HTML, CSS i JavaScript, aby z wdziękiem ustawić się jako plik dobry minimalist który podkreśla kolor czerwony dla listy lat po lewej stronie i czarny dla czcionki i H2. Najlepszą rzeczą w tej osi czasu jest to, że podczas przewijania strony zmiana roku zostanie wprowadzona automatycznie. Świetne wykończenie, projekt i wynik.
Oś czasu w CSS
Ta oś czasu wykorzystuje kod CSS, aby można było nawet poprawnie skonfigurować niektóre z jej właściwości. Nie ma przewijania podobnie jak poprzedni, ale charakteryzuje się szeregiem pudełek i niebieskim kolorem, aby nadać mu kolejny bardzo elegancki akcent i dodać go do listy osi czasu tej publikacji.
Responsywny suwak osi czasu
Ta oś czasu jest tworzona za pomocą biblioteki Swiper JS i zawiera kod HTML, CSS i JavaScript. Nie ma przewijania podczas przeglądania strony internetowej, ale tak umieszcza lata po prawej stronie oraz przycisk, za pomocą którego możemy przejść do następnego, oprócz możliwości użycia wskaźnika myszy do przejścia do określonego roku. Świetna animacja w każdym z przejść.
Zaawansowana oś czasu
Ta oś czasu wyróżnia się korzystaniem z HTML, CSS i JavaScript, oprócz przejdź do monokoloru, właśnie w odcieniach czerwieni. Charakteryzuje się również użyciem przycisku, który pozwala na przejście do przodu lub cofnięcie się na osi czasu oznaczonej tym świetnym kodem wynikowym jako dość minimalistyczny.
Oś czasu ze stałym nagłówkiem i Flexbox
Kod HTML i CSS dla stałego nagłówka pozostanie naprawiony w momencie przewijania na stronie. Niezwykle subtelny, aby być kalendarium bardzo interesującym dla każdego obecnego dewelopera, który chce się wyróżniać obecnymi standardami projektowania stron internetowych.
Oś czasu projektu
Ta oś czasu wykorzystuje CSS i HTML, aby przedstawić ważną oś czasu do wykorzystania w tym konkretnym okresie dla projektu. Ponieważ przewijamy go przez dni tygodnia, idealnie nadaje się do wdrożenia w narzędziach współpracy tworzonych przez samą firmę.
Oś czasu
Oś czasu w HTML, CSS i JavaScript, który wyróżnia się na tle innych dla motywu wizualnego. Chodzi o to, że gdy przewijamy pionową oś czasu, za każdym razem, gdy znajdziemy nowe zdjęcie na osi czasu, stanie się ono obrazem tła strony internetowej, na której umieściliśmy ten kod.
Hyperloop
Hyperloopu to oś czasu wyróżnia się raczej zastosowanym projektem i za bycie programowanym tylko w HTML i CSS. Charakteryzuje się zastosowaniem różnych rozmiarów czcionki tekstu z pionową linią i szeregiem pól, które zaznaczają każdy ważny moment na osi czasu.
Pionowa oś czasu
To przedział czasu dystansuje się od reszty wizualnym dotykiem. Ma bardzo aktualne tło gradientowe w projekcie i serię pól, które oznaczają każdy z tych przedziałów. Zaprogramowany w CSS i HTML.
Oś czasu we Flexbox
Jedna z najlepiej ukończonych osi czasu i to opiera się na kartach aby uwzględnić wszystkie informacje, których potrzebujemy w tym przedziale czasu. Opracowany również w HTML i CSS, należy wziąć pod uwagę, że wszystkie karty muszą mieć tę samą wysokość i szerokość, aby obliczyć miejsce na większe ekrany.
Oś czasu w DIV
Minimalistyczna linia czasu w projektowaniu i to już było opracowany tylko w HTML i CSS, więc jego implementacja może być bardzo szybka. Dzięki monochromatycznemu wykończeniu doskonale nadaje się do przedstawienia osi czasu na nośniku informacyjnym.
Oś czasu w CSS i HTML
Możesz umieścić Obrazy o wymiarach 400 × 300 na tej osi czasu wyróżnia się zielonym kolorem linii oraz tekstem dat i dni. Nie ma animacji i charakteryzuje się prostym projektem na wszystkich poziomach.
Komentarze i harmonogram opinii
Oś czasu bardzo różniąca się od innych dotyczących pozwolenia umieść karty ze zdjęciami użytkowników, a przynajmniej taki jest na początku zamiar. Dzięki świetnemu stylowi wizualnemu karty używają cieniowania, aby uzyskać raczej płaską oś czasu bez animacji.
Poranek na osi czasu w HTML i CSS
Idealna oś czasu, aby to zareagować charakteryzuje się HTML, CSS i oferują dość prostą, ale bardzo mobilną oś czasu.
Interfejs użytkownika osi czasu
Ten kod w HTML i CSS działa doskonale w przypadku przedstawić dzień roboczy treningu. Jest responsywny z obrazem nagłówka i serią przycisków, które pokazują go w bardzo jasny i przejrzysty sposób w aspekcie wizualnym.
Oś czasu tylko w CSS
Ta oś czasu charakteryzuje się byciem w CSS i rozszerzeniem dobrze dobrana seria kolorystyczna: czerwona i zielona. Zielony, aby całkowicie zakryć całą stronę, biały dla tekstu i linii podziału, a czerwony, aby odróżnić przedział czasu, w którym się znajdujemy. Możemy kliknąć każdy interwał, aby umieścić go w ramce, która go otacza i podświetli.
Responsywna oś czasu V3
Pierwsza z poziomych osi czasu na liście w formacie HTML, CSS i JavaScript. Wizualnie wyróżnia się użycie kolorów czarnych i szarych aby umieścić poziomą linię z serią punktów. Każdy przedział jest wyróżniony większą wagą w źródle i treści tekstowej.
Kolorowa oś czasu
Jedna z horyzontalnych osi czasu najwyższa jakość wizualna na liście. Dobrze interaktywna oś czasu z bardzo subtelnymi i dobrze przedstawionymi animacjami zapewniająca doskonałe wrażenia użytkownika za każdym razem, gdy naciśnięty zostanie jeden z przedziałów czasowych. Jest wykonany z HTML CSS / Sass i JavaScript / TypeScript (jquery.js).
Responsywna oś czasu historii
Idealna oś czasu dla pokaż różne wydarzenia na obrazach przedziału czasowego w historii. Jest poziomy i responsywny, ponieważ został opracowany w HTML, CSS i JavaScript.
Oś czasu grupy
Ta oś czasu wyróżnia się dobrym przejściem realizowane z poziomą animacją. Świetna kolorystyka i wyrafinowany design podkreślający każdy z przedziałów czasowych. Jest w HTML, CSS i JavaScript, aby przedstawić serię kart nałożonych na reprezentatywny obraz tła.
Pozioma oś czasu CSS i HTML
Wykonane przez niego znany Envato Tuts +, przedstawia poziomą oś czasu z serią czystych i podstawowych kart w projekcie. Płaskie kolory i pozioma linia z serią czerwonych kropek, które łączą się w każdym interwale.
Oś czasu CSS, HTML i slick.js
Pastelowe odcienie w projekcie na osi czasu wyróżnia się prezentacją każdego z obrazów pokazujący każdy przedział czasu. To właśnie przejście między każdym z obrazów i interwałów sprawia, że ta oś czasu się wyróżnia.
Sekwencja na osi czasu V1
Oś czasu, która wyróżnia się przyciski w każdej pionowej linii każdego interwału, aby połączyć pełnoekranowy obraz tła za każdym razem, gdy go naciśniemy.
Pozioma oś czasu HTML CSS
Nie będzie można kliknąć w żadnym miejscu na tej osi czasu, która jest wyróżniona ikoną wykwintny design poprzez mądry dobór palety kolorów i serię kanapek dla każdej z osi czasu. Nie ma animacji, ale wizualnie jest bardzo przyjemny dla oka.
Oś czasu Codyhouse
Ta oś czasu prezentowany przez Codyhouse jest jednokolorowy w projektowaniu i jest rozwijany w HTML, CSS i JavaScript. Przedstawia minimalistyczną linię z serią punktów jako interwałów, które mają być kliknięte i powodują poziomą animację krótszą niż pół sekundy. Prosty, ale potężny.
Pozioma oś czasu
Kolejna oś czasu wykonana w HTML, CSS i JavaScript. Charakteryzuje się jednym kolorem, zawiera elegancki wzór w zielonym kolorze, aby umieścić koronkę w każdym z punktów reprezentujących przedziały czasowe. Za każdym naciśnięciem jednego z nich rozpoczyna się bardzo płynna animacja boczna.
Nienazwana oś czasu
Jedyna czarna oś czasu na dole. Następnie używa różne kolory, aby odróżnić każdy rok i tekst jednocześnie z jego granicami. Ma znakomitą animację przechodzącą między każdym z tekstów.
Oś czasu
Ta oś czasu stawia akcent na kolor zielony być całkowicie statycznym.
Kolejna horyzontalna oś czasu
można umieść obraz w pobliżu pełnego ekranu aby uzyskać oś czasu wyróżniającą się użyciem koloru niebieskiego i szarego, a także serię kół reprezentujących każdy rok.
Nie przegap kolejna seria menu w CSS i HTML.