29 świetnych terminów projektowania w CSS i przy odrobinie JavaScript

Przewiń oś czasu

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

Przewiń oś czasu

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

Właściwości osi czasu 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

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

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

Naprawiono oś czasu

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

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

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

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

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

Flexbox na osi czasu

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

Oś czasu 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

Oś czasu CSS

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

Komentarze do osi czasu

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

Responsywna oś czasu

Idealna oś czasu, aby to zareagować charakteryzuje się HTML, CSS i oferują dość prostą, ale bardzo mobilną oś czasu.

Interfejs użytkownika osi czasu

Oś 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

Oś czasu 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

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

Zagnieżdżone

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

Responsywna historia

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

Grupa osi czasu

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

Poziome envato

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 

Pastelowa oś czasu

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

Sekwencja na osi czasu

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

Oś czasu HR

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

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

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

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

Oś czasu

Ta oś czasu stawia akcent na kolor zielony być całkowicie statycznym.

Kolejna horyzontalna oś czasu

Kolejna 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.


Treść artykułu jest zgodna z naszymi zasadami etyka redakcyjna. Aby zgłosić błąd, kliknij tutaj.

Bądź pierwszym który skomentuje

Zostaw swój komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*

*

  1. Odpowiedzialny za dane: Miguel Ángel Gatón
  2. Cel danych: kontrola spamu, zarządzanie komentarzami.
  3. Legitymacja: Twoja zgoda
  4. Przekazywanie danych: Dane nie będą przekazywane stronom trzecim, z wyjątkiem obowiązku prawnego.
  5. Przechowywanie danych: baza danych hostowana przez Occentus Networks (UE)
  6. Prawa: w dowolnym momencie możesz ograniczyć, odzyskać i usunąć swoje dane.