Zaman çizelgeleri veya zaman çizelgeleri, yapabileceğimiz ekstra unsurlardan bir diğeridir. İlerlemeyi veya gelişimi göstermek için bir web sitesine entegre edin bir şirketin veya şirketin yıllarında. Tipografi ve görsel öğelerle zarif bir şekilde nasıl oluşturulacağını bilen, bir hizmetin veya ürünün zaman içinde attığı adımları gösterebilen iyi görsel bir grafik ifade.
Aşağıda bulacağınız bu 29 zaman çizelgesi dikey zaman çizelgelerinden yatayda olduğu gibi. Bir müşteri için veya kendiniz için geliştirdiğiniz web sitesinin bir sayfasında bulmak için ihtiyaçlarınıza en uygun olanı bulacaksınız. Görsel olarak hoşa giden çok ilginç zaman çizelgelerinden oluşan bir koleksiyonla gidiyoruz.
Kaydırarak zaman çizelgesi
Kendini zarif bir şekilde konumlandırmak için HTML, CSS ve JavaScript kodunda bulunan bir zaman çizelgesi iyi minimalist sol tarafta yıl listesi için kırmızı vurguyu, yazı tipi ve H2s için siyah vurguyu yapar. Bu zaman çizelgesiyle ilgili en iyi şey, siz sayfada gezinirken yıl değişikliğinin otomatik olarak yapılacağıdır. Mükemmel sonuç, tasarım ve sonuç.
CSS'de zaman çizelgesi
Bu zaman çizelgesi, bazı özelliklerinde düzgün şekilde yapılandırılabilmek için bile CSS kodunu kullanır. Kaydırma yok bir öncekine benzer, ancak bu yayındaki zaman çizelgeleri listesine başka bir zarif dokunuş katmak için bir dizi kare ve mavi bir renk ile karakterize edilmiştir.
Duyarlı zaman çizelgesi kaydırıcısı
Bu zaman çizelgesi, Swiper JS kitaplığı ile HTML, CSS ve JavaScript kodunu içerecek şekilde yapılır. Web sayfasında ilerledikçe kaydırma yok, ama var yılları doğru tarafa yerleştirir ve belirli bir yıla gitmek için fare imlecini kullanabilmemiz dışında bir sonrakine gidebileceğimiz bir düğme. Geçişlerin her birinde harika animasyon.
Gelişmiş zaman çizelgesi
Bu zaman çizelgesi, HTML, CSS ve JavaScript kullanımıyla öne çıkmaktadır. tek renge git, tam olarak kırmızı tonlarda. Oldukça minimalist olması için bu harika sonuç koduyla işaretlenen zaman çizelgesinde ileri veya geri hareket etmenize izin veren bir düğmenin kullanılmasıyla da karakterize edilir.
Sabit başlık ve Flexbox ile zaman çizelgesi
Sabit bir başlık için HTML ve CSS kodu kaydırma yaptığımız anda sabit kalacaktır sayfada. Mevcut web tasarım standartlarına göre öne çıkmak isteyen mevcut geliştiriciler için büyük ilgi uyandıran bir zaman çizelgesi olması büyük bir incelik.
Proje zaman çizelgesi
Bu zaman çizelgesi, kullanım için önemli bir zaman çizelgesi sunmak için CSS ve HTML kullanır. o belirli zaman dilimi bir proje için. Kaydırırken, haftanın günleri arasında ilerler, bu nedenle onu şirketin kendisi tarafından yapılan ortak çalışma araçları için uygulamak mükemmeldir.
Tarihçesi
İçinde bir zaman çizelgesi Diğerlerinden sıyrılan HTML, CSS ve JavaScript görsel tema için. Ve dikey zaman çizelgesinde ilerlerken, zaman çizelgesinde her yeni fotoğraf bulduğumuzda, bu kodu yerleştirdiğimiz web sayfasının arka plan görüntüsü olacak.
hyperloop
Hyperloopu bir zaman çizelgesidir daha çok kullanılan tasarımla öne çıkıyor ve programlandığı için HTML ve CSS'den başka bir şey değil. Metnin yazı tipinde dikey bir çizgi ve zaman çizelgesinin her önemli anını işaretleyen bir dizi kutu ile farklı boyutların kullanılmasıyla karakterize edilir.
Dikey zaman çizelgesi
Bir aralık zaman çizelgesi görsel dokunuşuyla kendini diğerlerinden uzaklaştırır. Tasarımda çok güncel bir gradyan arka planına ve bu aralıkların her birini işaretleyen bir dizi kutuya sahiptir. CSS ve HTML'de programlanmıştır.
Flexbox'ta zaman çizelgesi
En iyi bitmiş zaman çizelgelerinden biri ve bu kartlara dayalıdır o zaman aralığı için ihtiyacımız olan tüm bilgileri dahil etmek. Ayrıca HTML ve CSS'de geliştirilen, daha büyük ekranlar için alanı hesaplamak için tüm kartların aynı yükseklik ve genişliğe sahip olması gerektiği dikkate alınmalıdır.
DIV'deki zaman çizelgesi
Tasarımda minimalist bir zaman çizelgesi ve sadece HTML ve CSS'de geliştirildi, bu nedenle uygulaması çok hızlı olabilir. Tek renkli yüzeyi sayesinde bir bilgi ortamında bir zaman çizelgesini ifade etmek için mükemmel bir şekilde uygundur.
CSS ve HTML'de zaman çizelgesi
Yerleştirebilirsin 400 × 300 boyutlu görseller bu zaman çizelgesinde, çizgilerin yeşil rengi ve tarih ve günlerin metni ile ayırt edilir. Animasyonu yoktur ve daha çok her seviyedeki basit tasarımı ile karakterizedir.
Yorumlar ve geri bildirim zaman çizelgesi
İzin vermek için diğerlerinden çok farklı bir zaman çizelgesi kullanıcıların fotoğraflarının bulunduğu kartlar koyveya en azından ilk başta niyet bu. Harika görsel stille kartlar, animasyonlar olmadan oldukça düz bir zaman çizelgesi için gölgelendirme kullanır.
HTML ve CSS'de zaman çizelgesi sabahı
Duyarlılık için mükemmel bir zaman çizelgesi HTML, CSS olmasıyla karakterizedir ve oldukça basit ama çok hareketli bir zaman çizelgesi sunar.
Zaman çizelgesi kullanıcı arayüzü
HTML ve CSS'deki bu kod, iş gününü sunmak bir antrenmanın. Görsel açıdan çok net ve temiz bir şekilde gösteren bir başlık görüntüsü ve bir dizi düğme ile duyarlıdır.
Yalnızca CSS'de zaman çizelgesi
Bu zaman çizelgesi, CSS'de olması ve bir iyi seçilmiş renkler serisi: kırmızı ve yeşil. Tüm sayfayı tamamen kaplamak için yeşil, metin ve bölme çizgileri için beyaz ve içinde bulunduğumuz zaman aralığını ayırt etmek için kırmızı. Her aralığa tıklayıp, onu çevreleyen ve vurgulayan bir kutuya yerleştirebiliriz.
Duyarlı zaman çizelgesi V3
HTML, CSS ve JavaScript'teki listedeki yatay zaman çizelgelerinin ilki. Görsel olarak öne çıkıyor siyah ve gri renklerin kullanımı bir dizi noktaya sahip yatay bir çizgi yerleştirmek için. Her aralık, kaynakta ve metin içeriğinde daha fazla ağırlık ile vurgulanır.
Renkli yuvalanmış zaman çizelgesi
Yatay zaman çizelgelerinden biri listedeki en yüksek görsel kalite. Zaman aralıklarından birine her basıldığında harika bir kullanıcı deneyimi sunmak için çok ince ve iyi sunulmuş animasyonlarla iyi etkileşimli bir zaman çizelgesi. İle yapılır HTML CSS / Sass ve JavaScript / TypeScript (jquery.js).
Duyarlı geçmiş zaman çizelgesi
İçin mükemmel bir zaman çizelgesi farklı olayları resimlerde göster Tarihte bir zaman dilimi. HTML, CSS ve JavaScript ile geliştirilmiş olması yatay ve duyarlıdır.
Grup zaman çizelgesi
Bu zaman çizelgesi iyi bir geçiş için öne çıkıyor yatay bir animasyon ile gerçekleştirildi. Her bir zaman aralığını vurgulamak için harika bir renk ve zarif bir tasarım. Temsili bir arka plan görüntüsünün üzerine yerleştirilmiş bir dizi kart sunmak için HTML, CSS ve JavaScript formatındadır.
Yatay CSS ve HTML zaman çizelgesi
Onun tarafından yapıldı bilinen Envato Tuts +tasarımda bir dizi temiz ve basit kartla birlikte yatay bir zaman çizelgesi sunulur. Düz renkler ve her aralığı birbirine bağlayan bir dizi kırmızı noktadan oluşan yatay bir çizgi.
Zaman çizelgesi CSS, HTML ve slick.js
Bir zaman çizelgesi için tasarımdaki pastel tonlar her bir görüntünün sunumu ile dikkat çekiyor her zaman aralığını gösteren. Bu zaman çizelgesini öne çıkaran her bir görüntü ve aralık arasındaki geçiştir.
Zaman çizelgesi dizisi V1
Öne çıkan bir zaman çizelgesi her dikey çizgideki düğmeler Birine her bastığımızda tam ekran bir arka plan görüntüsünü birbirine bağlamak için her aralık.
Yatay zaman çizelgesi HTML CSS
Bu zaman çizelgesinde bir ile vurgulanan hiçbir yeri tıklayamazsınız. akıllıca renk paleti seçimi ile mükemmel tasarım ve zaman çizelgelerinin her biri için bir dizi sandviç. Animasyon yok ama görsel olarak göze çok hoş geliyor.
Codyhouse Zaman Çizelgesi
Bu zaman çizelgesi Codyhouse tarafından sunulan tek renktir tasarımda ve HTML, CSS ve JavaScript ile geliştirilmiştir. Tıklanacak aralıklar olarak bir dizi noktadan oluşan minimalist bir çizgi sunar ve yarım saniyeden daha az yatay animasyona neden olur. Basit ama güçlü.
Yatay zaman çizelgesi
HTML, CSS ve JavaScript ile yapılmış başka bir zaman çizelgesi. Tek renk ile karakterize edilmiştirZaman aralıklarını temsil eden noktaların her birine danteller yerleştirmek için yeşil renkte zarif bir tasarım içerir. Birine her bastığımızda, çok düzgün bir yan animasyon başlar.
Adsız zaman çizelgesi
En alttaki listedeki tek siyah zaman çizelgesi. Sonra kullanır her yıl ve metni farklılaştırmak için farklı renkler aynı zamanda sınırları ile. Metinlerin her biri arasında geçiş yapmak için olağanüstü bir animasyonu var.
Zaman çizelgesi
Bu zaman çizelgesi koyar yeşil renkteki vurgu tamamen statik olmak.
Başka bir yatay zaman çizelgesi
Bu olabilir tam ekrana yakın bir görüntü yerleştir mavi ve gri artı her yılı temsil eden bir dizi dairenin kullanımıyla öne çıkan bir zaman çizelgesi için.
Kaçırma CSS ve HTML'de başka bir menü dizisi.