CSS-da va Javascript-ning ozida 29 ta ajoyib dizayn muddatlari

Yilnomani aylantiring

Vaqt jadvallari yoki vaqt jadvallari - bu biz qila oladigan qo'shimcha elementlardan yana biri taraqqiyot yoki evolyutsiyani ko'rsatish uchun veb-saytga qo'shilish kompaniya yoki kompaniya yillarida. Uni tipografiya va vizual elementlar bilan qanday qilib oqlangan tarzda tuzishni bilishni yaxshi ko'radigan grafik ifodasi, vaqt o'tishi bilan xizmat yoki mahsulot tomonidan qilingan qadamlarni ko'rsatishi mumkin.

Quyida topadigan ushbu 29 ta vaqt jadvallari vertikal vaqt jadvallaridan gorizontallar kabi. Siz uni mijoz uchun yoki o'zingiz uchun ishlab chiqayotgan veb-sayt sahifasida sizning ehtiyojingizga mos keladigan eng yaxshisini topasiz. Biz juda qiziqarli vaqt jadvallari to'plami bilan ingl.

O'tkazish orqali vaqt jadvalini

Yilnomani aylantiring

HTML, CSS va JavaScript kodlarida joylashgan va o'z o'rnini oqilona joylashtirish uchun vaqt jadvalini yaxshi minimalist chap tomonda yillar ro'yxati uchun qizil rangga, shrift va H2 uchun qora rangga urg'u beradi. Ushbu vaqt jadvalining eng yaxshi tomoni shundaki, sahifani varaqlaganingizda, yil o'zgarishi avtomatik ravishda amalga oshiriladi. Ajoyib tugatish, dizayn va natija.

CSS-dagi xronologiya

CSS xronologiyasi xususiyatlari

Ushbu xronologiya CSS kodidan foydalanib, hatto ba'zi xususiyatlarida to'g'ri sozlanishi mumkin. Unda aylantirish mavjud emas oldingisi singari, lekin u yana bir qator nafis va ko'k rang bilan ajralib turadi, unga yana bir nafis teginish berish va ushbu nashrning vaqt jadvallari ro'yxatiga qo'shish mumkin.

Vaqt jadvalining slayderi

Vaqt jadvalining slayderi

Ushbu xronologiya Swiper JS kutubxonasida HTML, CSS va JavaScript kodlarini o'z ichiga olgan holda tuzilgan. Biz veb-sahifani bosib o'tishda uni siljitish imkoniyati yo'q, lekin u shunday qiladi yillarni o'ng tomonga joylashtiradi va ma'lum bir yilga borish uchun sichqoncha ko'rsatgichidan foydalanish imkoniyatidan tashqari, keyingisiga o'tishimiz mumkin bo'lgan tugma. O'tishlarning har birida ajoyib animatsiya.

Murakkab xronologiya

Murakkab xronologiya

Ushbu vaqt jadvalidan tashqari HTML, CSS va JavaScript-ni ishlatish bilan ajralib turadi monokolorga o'ting, aniq qizil tonlarda. Bundan tashqari, bu juda yaxshi natija kodi bilan belgilangan vaqt jadvaliga o'tishga yoki orqaga qaytishga imkon beradigan tugmachani ishlatish bilan tavsiflanadi.

Ruxsat etilgan sarlavha va Flexbox bilan xronologiya

Xronologiya aniqlandi

Belgilangan sarlavha uchun HTML va CSS kodlari biz aylantirishni amalga oshirganimizda u aniq bo'lib qoladi sahifada. Mavjud veb-dizayn standartlari bilan ajralib turishni istagan har qanday ishlab chiquvchi uchun katta qiziqish uyg'otadigan vaqt chizig'i juda nozik.

Loyiha muddati

Loyiha muddati

Ushbu xronologiya CSS va HTML-dan foydalanadigan muhim xronologiyani taqdim etish uchun foydalanadi bu aniq vaqt davri loyiha uchun. O'tkazish paytida u haftaning kunlarini bosib o'tadi, shuning uchun uni kompaniyaning o'zi tomonidan ishlab chiqarilgan hamkorlik vositalari uchun amalga oshirish juda yaxshi.

Timeline

Timeline

Vaqt xati Qolganlaridan ajralib turadigan HTML, CSS va JavaScript vizual mavzu uchun. Vertikal xronologiya bo'ylab harakatlanayotganda, har safar vaqt jadvalida yangi fotosurat topilsa, u biz ushbu kodni joylashtirgan veb-sahifaning orqa fon rasmiga aylanadi.

Hyperloop

Hyperloop

Hyperloopu bu vaqt jadvalidir ishlatilgan dizayni bilan ajralib turadi va HTML va CSS-dan boshqa hech narsa dasturlashtirilmaganligi uchun. Matn shriftida vertikal chiziq va xronologiyaning har bir muhim momentini belgilaydigan qator qutilar bilan har xil o'lchamlardan foydalanish bilan tavsiflanadi.

Vertikal xronologiya

Vertikal xronologiya

Bu vaqt oralig'i vizual teginish orqali o'zini boshqalardan uzoqlashtiradi. U dizayndagi juda zamonaviy gradient fonga va ushbu har bir intervalni belgilaydigan qator qutilarga ega. CSS va HTML da dasturlashtirilgan.

Flexbox-dagi vaqt chizig'i

Vaqt chizig'i fleksboks

Eng yaxshi yakunlangan vaqt jadvallaridan biri va bu kartochkalarga asoslangan o'sha vaqt oralig'ida kerak bo'lgan barcha ma'lumotlarni kiritish. Bundan tashqari HTML va CSS-da ishlab chiqilgan bo'lib, kattaroq ekranlar uchun joyni hisoblash uchun barcha kartalarning balandligi va kengligi bir xil bo'lishi kerakligini hisobga olish kerak.

DIV-dagi xronologiya

Xronologiya div

Dizayndagi minimalist xronologiya va shunday bo'ldi faqat HTML va CSS-da ishlab chiqilgan, shuning uchun uni amalga oshirish juda tez bo'lishi mumkin. Monoxrom rangga ega bo'lganligi sababli, u vaqtni jadvalda ifodalash uchun juda mos keladi.

CSS va HTML dagi vaqt chizig'i

CSS xronologiyasi

Siz joylashtirishingiz mumkin 400 × 300 o'lchamdagi rasmlar chiziqlarning yashil rangi va sanalar va kunlarning matni bilan ajralib turadigan ushbu vaqt jadvalida. Unda animatsiyalar yo'q va barcha darajalarda oddiy dizayni bilan ajralib turadi.

Fikrlar va mulohazalar xronologiyasi

Xronologiya sharhlari

Ruxsat berish uchun boshqalardan juda farq qiladigan vaqt jadvallari foydalanuvchilarning fotosuratlari tushirilgan kartalarni qo'yish, yoki hech bo'lmaganda dastlab bu niyat. Ajoyib vizual uslub bilan kartochkalar animatsiyasiz tekis vaqt jadvaliga soyadan foydalanadi.

HTML va CSS-da vaqt jadvalining tongi

Tezkor xronologiya

Bunga javob beradigan mukammal xronologiya u HTML, CSS bo'lish bilan tavsiflanadi va juda sodda, ammo juda mobil vaqt jadvalini taklif eting.

Xronologiya UI

Timeline

HTML va CSS-dagi ushbu kod juda yaxshi ishlaydi ish kunini taqdim eting jismoniy mashqlar. U vizual jihatdan juda aniq va toza ko'rinadigan sarlavha tasviri va bir qator tugmalar bilan javob beradi.

Faqat CSS-da xronologiya

CSS xronologiyasi

Ushbu xronologiya CSS-da va a bilan tavsiflanadi yaxshi tanlangan ranglar seriyasi: qizil va yashil. Yashil rang butun sahifani to'liq qoplaydi, oq va bo'linadigan satrlar uchun oq, biz esa vaqt oralig'ini ajratish uchun qizil rang. Biz uni o'rab turgan va ajratib turadigan quti bilan joylashtirish uchun har bir intervalni bosishimiz mumkin.

Javob beruvchi vaqt jadvallari V3

Responsive Timeline V3

HTML, CSS va JavaScript-dagi ro'yxatdagi gorizontal vaqt jadvallarining birinchisi. Vizual jihatdan ajralib turadi qora va kul ranglardan foydalanish gorizontal chiziqni bir qator nuqtalar bilan joylashtirish uchun. Har bir interval manbada va matn tarkibida katta vazn bilan ta'kidlangan.

Ranglar ichida joylashgan xronologiya

Ichki

Gorizontal vaqt jadvallaridan biri ro'yxatdagi eng yuqori vizual sifat. Vaqt oralig'ini bosish har safar katta foydalanuvchi tajribasini taqdim etish uchun juda nozik va yaxshi namoyish qilingan animatsiyalarga ega bo'lgan yaxshi interaktiv xronologiya. U bilan qilingan HTML CSS / Sass va JavaScript / TypeScript (jquery.js).

Javob beruvchi tarix xronologiyasi

Javob beruvchi hikoya

Uchun mukammal xronologiya turli xil voqealarni tasvirlarda ko'rsatish tarixdagi vaqt oralig'i. HTML, CSS va JavaScript-da ishlab chiqilganligi uchun gorizontal va javob beradi.

Guruh xronologiyasi

Xronologiya guruhi

Ushbu vaqt jadvali yaxshi o'tish uchun ajralib turadi gorizontal animatsiya bilan amalga oshiriladi. Har bir vaqt oralig'ini ta'kidlash uchun ajoyib rang va ajoyib dizayn. HTML, CSS va JavaScript-larda vakillik fon rasmiga joylashtirilgan bir qator kartalarni taqdim etish mumkin.

Landshaft CSS va HTML xronologiyasi

Landshaft envato

U tomonidan qilingan ma'lum bo'lgan Envato Tuts +, dizayndagi toza va asosiy kartalar qatori bilan gorizontal vaqt jadvalini taqdim etamiz. Yassi ranglar va har bir intervalni bir-biriga bog'lab turadigan bir qator qizil nuqta bilan gorizontal chiziq.

CSS, HTML va slick.js vaqt jadvallari 

Pastel xronologiyasi

Vaqt chizig'i uchun dizayndagi pastel tovushlar har bir tasvirning taqdimoti bilan ajralib turadi har bir vaqt oralig'ini ko'rsatadigan. Ushbu vaqt jadvalini ajratib turadigan har bir rasm va intervallar orasidagi o'tish.

V1 ketma-ketligi

Vaqt jadvalining ketma-ketligi

Ajratib turadigan xronologiya har bir vertikal chiziqdagi tugmalar har safar bitta tugmachani bosganimizda to'liq ekranli fon rasmini bog'lash uchun har bir intervalni.

HTML gorizontal xronologiyasi

Xronologiya HR

Siz ushbu vaqt jadvalida a bilan belgilangan biron bir joyni bosa olmaysiz rang palitrasini oqilona tanlash bilan ajoyib dizayni va vaqt jadvallarining har biri uchun bir qator sendvichlar. Hech qanday animatsiya yo'q, lekin ingl. Bu ko'zga juda yoqadi.

Vaqt chizig'i Codyhouse

Yilnoma CodyHouse

Ushbu xronologiya Codyhouse tomonidan taqdim etilgan bitta rang dizaynida va HTML, CSS va JavaScript-da ishlab chiqilgan. U bosilgan vaqt oralig'ida va yarim soniyadan kamroq gorizontal animatsiyani keltirib chiqaradigan minimalist chiziqni bir qator nuqtalar bilan taqdim etadi. Oddiy, ammo ajoyib effekt.

Landshaft xronologiya

Landshaft xronologiya

HTML, CSS va JavaScript-da yaratilgan yana bir xronologiya. Bitta rang bilan tavsiflanadi, unda vaqt oralig'ini ifodalaydigan har bir nuqtaga dantel qo'yish uchun yashil rangga ega oqlangan dizayni mavjud. Har safar bittasini bosganimizda, juda silliq yon animatsiya boshlanadi.

Noma'lum xronologiya

Noma'lum xronologiya

Pastki ro'yxatdagi yagona qora xronologiya. Keyin u foydalanadi har yili va matnni farqlash uchun turli xil ranglar uning chegaralari bilan bir vaqtda. Matnlarning har biri o'rtasida o'tish uchun ajoyib animatsiya mavjud.

Xronologiya

Xronologiya

Ushbu xronologiya qo'yadi yashil rangga urg'u butunlay statik bo'lish.

Yana bir gorizontal xronologiya

Boshqa xronologiya

Mumkin rasmni to'liq ekranga yaqin joyda joylashtiring ko'k va kul ranglardan foydalanish bilan ajralib turadigan vaqt jadvaliga, shuningdek, har yili namoyish etadigan bir qator doiralar uchun.

O'tkazib yuborma CSS va HTML-dagi yana bir qator menyular.


Maqolaning mazmuni bizning printsiplarimizga rioya qiladi muharrirlik etikasi. Xato haqida xabar berish uchun bosing bu erda.

Birinchi bo'lib izohlang

Fikringizni qoldiring

Sizning email manzilingiz chop qilinmaydi. Kerakli joylar bilan belgilangan *

*

*

  1. Ma'lumotlar uchun javobgardir: Migel Anxel Gaton
  2. Ma'lumotlarning maqsadi: SPAMni boshqarish, izohlarni boshqarish.
  3. Qonuniylashtirish: Sizning roziligingiz
  4. Ma'lumotlar haqida ma'lumot: qonuniy majburiyatlar bundan mustasno, ma'lumotlar uchinchi shaxslarga etkazilmaydi.
  5. Ma'lumotlarni saqlash: Occentus Networks (EU) tomonidan joylashtirilgan ma'lumotlar bazasi
  6. Huquqlar: istalgan vaqtda siz ma'lumotlaringizni cheklashingiz, tiklashingiz va o'chirishingiz mumkin.