CSS मध्ये आणि जावास्क्रिप्टच्या थोडासह 29 डिझाइनची उत्कृष्ट टाइमलाइन

टाइमलाइन स्क्रोल करा

टाइमलाइन किंवा टाइमलाइन हे आपल्याद्वारे आणखी एक अतिरिक्त घटक असू शकतात प्रगती किंवा उत्क्रांती दर्शविण्यासाठी वेबसाइटमध्ये समाकलित करा कंपनी किंवा कंपनीच्या वर्षांत. टायपोग्राफी आणि व्हिज्युअल घटकांसह सुरेखपणे ते कसे तयार करावे हे जाणून, एक दृश्य-दृश्य ग्राफिक अभिव्यक्ती, वेळोवेळी सेवेद्वारे किंवा उत्पादनाद्वारे उचललेले चरण दर्शवू शकते.

या 29 टाइमलाइन आपल्‍याला खाली आढळतील उभ्या टाइमलाइन पासून क्षितिजे होईल म्हणून. आपण क्लायंटसाठी किंवा आपल्या स्वतःसाठी विकसित करीत असलेल्या वेबसाइटच्या पृष्ठावर शोधण्यासाठी आपल्या गरजा भागविण्यासाठी सर्वोत्कृष्ट एक सापडेल. आम्ही अत्यंत मनोरंजक टाइमलाइनच्या संग्रहात आहोत जे अतिशय नेत्रदीपकपणे आवडतात.

स्क्रोल करून टाइमलाइन

टाइमलाइन स्क्रोल करा

एचटीएमएल, सीएसएस आणि जावास्क्रिप्ट कोडमध्ये असलेली एक टाइमलाइन ज्याने स्वतःला ए म्हणून सुयोग्यपणे स्थितीत आणले चांगला मिनिमलिस्ट जे डाव्या बाजूस असलेल्या वर्षांच्या यादीसाठी लाल रंगावर आणि टाइपफेस आणि एच 2s साठी काळ्या रंगावर उच्चारण ठेवते. या टाइमलाइनबद्दल सर्वात चांगली गोष्ट म्हणजे आपण पृष्ठाकडे स्क्रोल करताच वर्ष बदल आपोआप होईल. उत्तम समाप्त, डिझाइन आणि परिणाम.

सीएसएस मध्ये टाइमलाइन

सीएसएस टाइमलाइन गुणधर्म

ही टाइमलाइन त्याच्या काही गुणधर्मांमध्ये योग्यरितीने कॉन्फिगर करण्यात सक्षम होण्यासाठी CSS कोड वापरते. त्यात स्क्रोलिंग नाही मागील प्रमाणे, परंतु यास आणखी एक चवदार स्पर्श देण्यासाठी आणि या प्रकाशनातील टाइमलाइनच्या सूचीमध्ये जोडण्यासाठी चौरसांच्या मालिका आणि निळ्या रंगाने वैशिष्ट्यीकृत आहे.

प्रतिसाद टाइमलाइन स्लाइडर

प्रतिसाद टाइमलाइन स्लाइडर

एचटीएमएल, सीएसएस आणि जावास्क्रिप्ट कोड समाविष्ट करण्यासाठी ही वेळ स्वीपर जेएस लायब्ररीद्वारे तयार केली गेली आहे. आम्ही वेबपृष्ठाद्वारे प्रगती करीत असताना त्यात स्क्रोलिंग नाही, परंतु तसे आहे वर्षे उजवीकडे ठेवतात आणि एका विशिष्ट वर्षावर जाण्यासाठी माऊस पॉईंटर वापरण्याशिवाय आम्ही पुढील बटणावर जाऊ शकतो. प्रत्येक संक्रमणामध्ये उत्तम अ‍ॅनिमेशन.

प्रगत टाइमलाइन

प्रगत टाइमलाइन

या टाइमलाइनशिवाय HTML, CSS आणि जावास्क्रिप्ट वापरण्यासाठी उपलब्ध आहे एकाधिकारात जातंतोतंत लाल टोनमध्ये. हे या बटणाच्या वापराद्वारे वैशिष्ट्यीकृत आहे जे आपल्याला या उत्कृष्ट रिझल्ट कोडद्वारे चिन्हांकित केलेल्या टाइमलाइनमध्ये पुढे किंवा मागे जाण्याची परवानगी देते जेणेकरून हे अगदी किमानच असू शकते.

निश्चित शीर्षलेख आणि फ्लेक्सबॉक्ससह टाइमलाइन

वेळ निश्चित केली

एचटीएमएल आणि सीएसएस कोड जो निश्चित शीर्षलेख आहे आम्ही स्क्रोलिंग करत असताना हे निश्चित केले जाईल पृष्ठात सध्याच्या वेब डिझाइनच्या मानकांनुसार उभे राहू इच्छित असलेल्या कोणत्याही सध्याच्या विकसकासाठी मोठी आवड असणारी सूक्ष्मता आहे.

प्रोजेक्ट टाइमलाइन

प्रोजेक्ट टाइमलाइन

ही टाइमलाइन वापरण्यासाठी महत्त्वपूर्ण टाइमलाइन सादर करण्यासाठी सीएसएस आणि एचटीएमएलचा वापर करते त्या विशिष्ट कालावधीचा प्रकल्पासाठी जसजसे आम्ही स्क्रोल करीत आहोत ते आठवड्याच्या दिवसात जात आहे, म्हणूनच कंपनीने बनविलेल्या सहयोगी साधनांसाठी याची अंमलबजावणी करणे योग्य आहे.

टाइमलाइन

टाइमलाइन

मध्ये एक टाइमलाइन एचटीएमएल, सीएसएस आणि जावास्क्रिप्ट जी उर्वरित भागांमधून दिसते व्हिज्युअल थीमसाठी. आणि हे असे आहे की जेव्हा आपण अनुलंब टाइमलाइनवर स्क्रोल करीत आहोत, प्रत्येक वेळी आपल्याला टाइमलाइनमध्ये नवीन छायाचित्र सापडेल, तेव्हा आपण हा कोड ठेवलेल्या वेब पृष्ठाची पार्श्वभूमी प्रतिमा होईल.

हायपरलोूप

हायपरलोूप

हायपरलूपू ही एक टाइमलाइन आहे त्याऐवजी वापरल्या गेलेल्या डिझाइनचा अर्थ स्पष्ट करतो आणि HTML आणि CSS व्यतिरिक्त आणखी काही प्रोग्राम केलेले नाही. अनुलंब रेषा असलेल्या मजकूराच्या फॉन्टमध्ये वेगवेगळ्या आकारांचा आणि टाइमलाइनच्या प्रत्येक महत्वाच्या क्षणास चिन्हांकित करणार्‍या बॉक्सची मालिका ही वैशिष्ट्यीकृत आहे.

अनुलंब टाइमलाइन

अनुलंब टाइमलाइन

एक मध्यांतर टाइमलाइन त्याच्या दृश्यास्पद स्पर्शातून स्वत: ला उर्वरितपासून दूर करते. डिझाइनमध्ये यामध्ये सध्याची ग्रेडियंट पार्श्वभूमी आहे आणि या प्रत्येक अंतराने चिन्हांकित केलेल्या बॉक्सची मालिका आहे. सीएसएस आणि एचटीएमएल मध्ये प्रोग्राम केलेले.

फ्लेक्सबॉक्समध्ये टाइमलाइन

टाइमलाइन फ्लेक्सबॉक्स

एक उत्कृष्ट समाप्त टाइमलाइन आणि त्यापैकी एक कार्डवर आधारित आहे आम्हाला त्या वेळेच्या अंतरासाठी आवश्यक असलेली सर्व माहिती समाविष्ट करणे. एचटीएमएल आणि सीएसएस मध्ये विकसित, हे लक्षात घेतले पाहिजे की मोठ्या स्क्रीनसाठी जागेची गणना करण्यासाठी सर्व कार्डांची उंची आणि रुंदी समान असणे आवश्यक आहे.

डीआयव्ही मध्ये वेळ

टाइमलाइन Div

डिझाइनमध्ये किमान टाईमलाईन आणि ती आहे केवळ HTML आणि CSS मध्ये विकसित केले, म्हणून त्याची अंमलबजावणी खूप वेगवान असू शकते. मोनोक्रोम समाप्त झाल्यामुळे माहिती माध्यमात टाइमलाइन व्यक्त करण्यासाठी हे अगदी योग्य आहे.

सीएसएस आणि एचटीएमएल मधील टाइमलाइन

सीएसएस टाइमलाइन

आपण ठेवू शकता 400 × 300 आकाराच्या प्रतिमा या टाइमलाइनमध्ये ओळींचा हिरवा रंग आणि तारखा आणि दिवसांच्या मजकूराने वेगळे केले आहे. त्याचे कोणतेही अ‍ॅनिमेशन नाही आणि त्याऐवजी सर्व स्तरांवर त्याच्या साध्या डिझाइनद्वारे वैशिष्ट्यीकृत आहे.

टिप्पण्या आणि अभिप्राय टाइमलाइन

टाइमलाइन टिप्पण्या

परवानगीसाठी इतरांपेक्षा खूपच वेगळी टाइमलाइन वापरकर्त्यांच्या फोटोंसह कार्डे घाला, किंवा किमान प्रथम हा हेतू आहे. उत्कृष्ट व्हिज्युअल शैलीसह, कार्डे अ‍ॅनिमेशनशिवाय फ्लॅट टाइमलाइनसाठी शेडिंग वापरतात.

HTML आणि CSS मध्ये टाइमलाइन सकाळी

प्रतिसादात्मक टाइमलाइन

त्यास प्रतिसाद देण्यासाठी एक परिपूर्ण टाइमलाइन एचटीएमएल, सीएसएस असण्याचे वैशिष्ट्य आहे आणि बर्‍यापैकी सोपी पण अगदी मोबाईल टाइमलाइन ऑफर करते.

टाइमलाइन यूआय

टाइमलाइन

एचटीएमएल आणि सीएसएस मधील हा कोड उत्तम प्रकारे कार्य करतो कामकाजाचा दिवस सादर करा एक कसरत च्या. हेडर प्रतिमेसह दृश्यात्मक पैलूमध्ये अगदी स्पष्ट आणि स्वच्छ मार्गाने दर्शविणार्‍या बटणाच्या मालिकेसह ते प्रतिसाद देतील.

केवळ सीएसएस मध्ये टाइमलाइन

सीएसएस टाइमलाइन

ही टाइमलाइन सीएसएसमध्ये असून ए द्वारे दर्शविली जाते निवडलेल्या रंगांची मालिका: लाल आणि हिरवा. संपूर्ण पृष्ठ संपूर्णपणे कव्हर करण्यासाठी हिरवा, मजकूर आणि भागाकार ओळींसाठी पांढरा आणि आम्ही ज्या कालावधीत आहोत त्या कालावधीचे अंतर वेगळे करण्यासाठी लाल. त्याभोवती असलेल्या बॉक्ससह त्या ठेवण्यासाठी आम्ही प्रत्येक मध्यांतर क्लिक करू शकतो आणि त्यास हायलाइट करतो.

प्रतिसादात्मक टाइमलाइन व्ही 3

प्रतिसादात्मक टाइमलाइन व्ही 3

एचटीएमएल, सीएसएस आणि जावास्क्रिप्टमधील सूचीतील क्षैतिज टाइमलाइनपैकी प्रथम. दृश्यास्पद बाहेर उभे काळा आणि राखाडी रंगांचा वापर बिंदूंच्या मालिकेसह क्षैतिज रेखा ठेवणे. प्रत्येक मध्यांतर स्त्रोतामध्ये आणि मजकूर सामग्रीमध्ये अधिक वजन देऊन हायलाइट केला जातो.

टाइमलाइन रंगात नेसलेली

घरबसल्या

क्षैतिज टाइमलाइनपैकी एक यादीतील उच्च दृश्य गुणवत्ता. प्रत्येक वेळी एक वेळ मध्यांतर दाबला जातो तेव्हा एक चांगला वापरकर्ता अनुभव देण्यासाठी अतिशय सूक्ष्म आणि चांगले प्रस्तुत अ‍ॅनिमेशनसह एक चांगले परस्पर टाइमलाइन. हे बनलेले आहे एचटीएमएल सीएसएस / सस आणि जावास्क्रिप्ट / टाइपस्क्रिप्ट (jquery.js).

प्रतिसाद इतिहास टाइमलाइन

प्रतिसाद कथा

यासाठी एक परिपूर्ण टाइमलाइन प्रतिमांमध्ये भिन्न कार्यक्रम दर्शवा इतिहासातील वेळ स्लॉट. एचटीएमएल, सीएसएस आणि जावास्क्रिप्टमध्ये विकसित केले गेलेले क्षैतिज आणि प्रतिसाद देणारे आहे.

ग्रुप टाइमलाइन

टाइमलाइन गट

ही टाइमलाइन चांगल्या संक्रमणासाठी दर्शविते क्षैतिज अ‍ॅनिमेशनसह चालते. प्रत्येक काळाच्या अंतराने प्रकाश टाकण्यासाठी उत्कृष्ट रंग आणि एक उत्कृष्ट डिझाइन. एचटीएमएल, सीएसएस आणि जावास्क्रिप्ट मध्ये प्रतिनिधी पार्श्वभूमी प्रतिमेवर आच्छादित कार्डांची मालिका सादर करणे हे आहे.

क्षैतिज सीएसएस आणि एचटीएमएल टाइमलाइन

क्षैतिज एनव्हॅटो

त्याच्याद्वारे बनविलेले ज्ञात एनवाटो टट्स +, आम्ही डिझाइनमधील स्वच्छ आणि मूलभूत कार्डांच्या मालिकेसह क्षैतिज टाइमलाइनसह सादर केले आहे. सपाट रंग आणि लाल ठिपक्यांच्या मालिकेसह क्षैतिज रेखा जी प्रत्येक अंतराला इंटरलॉक करतात.

टाइमलाइन सीएसएस, एचटीएमएल आणि स्लीक.जे 

पेस्टल टाइमलाइन

टाइमलाइनसाठी डिझाइनमध्ये पेस्टल टोन प्रत्येक प्रतिमेचे सादरीकरण दर्शविते प्रत्येक वेळी मध्यांतर दर्शवित आहे. ही प्रतिमा आणि अंतराळांमधील संक्रमण आहे ज्यामुळे ही टाइमलाइन वेगळी होते.

टाइमलाइन अनुक्रम व्ही 1

टाइमलाइन अनुक्रम

अशी वेळरेखा जी बाहेर असेल प्रत्येक अनुलंब ओळीवर बटणे पूर्ण स्क्रीन पार्श्वभूमी प्रतिमेवर दुवा साधण्यासाठी प्रत्येक मध्यांतर आम्ही प्रत्येक वेळी दाबा.

क्षैतिज टाइमलाइन एचटीएमएल सीएसएस

टाइमलाइन एचआर

ए द्वारा हायलाइट केलेल्या या टाइमलाइनवर आपण कोठेही क्लिक करू शकणार नाही रंग पॅलेटच्या सुज्ञ निवडीद्वारे उत्कृष्ट डिझाइन आणि प्रत्येक टाइमलाइनसाठी सँडविचची मालिका. तेथे कोणतीही अ‍ॅनिमेशन नाहीत, परंतु दृष्टीक्षेपाने ती डोळ्यास आनंददायक आहे.

कोडीहाऊस टाइमलाइन

टाइमलाइन कोडीहाऊस

ही टाइमलाइन कोडीहाऊस प्रस्तुत एक रंग आहे डिझाइनमध्ये आणि एचटीएमएल, सीएसएस आणि जावास्क्रिप्टमध्ये विकसित केले आहे. हे अंतर क्लिक केल्यावर अर्ध्या सेकंदापेक्षा कमी क्षैतिज अ‍ॅनिमेशनला कारणीभूत म्हणून बिंदूंच्या मालिकेसह कमीतकमी रेखा दर्शविते. सोपे, पण शक्तिशाली

क्षैतिज टाइमलाइन

क्षैतिज टाइमलाइन

एचटीएमएल, सीएसएस आणि जावास्क्रिप्टमध्ये बनविलेले आणखी एक टाइमलाइन. एकल रंगाने वैशिष्ट्यीकृत, यात वेळ मध्यांतर दर्शविणार्‍या प्रत्येक बिंदूवर लेस ठेवण्यासाठी हिरव्या रंगासह एक मोहक डिझाइन आहे. प्रत्येक वेळी आम्ही एक दाबा तेव्हा एक अतिशय गुळगुळीत साइड अ‍ॅनिमेशन सुरू होते.

अनामित टाइमलाइन

अनामित टाइमलाइन

तळाशी सूचीमधील एकमेव काळा टाइमलाइन. मग तो वापरतो प्रत्येक वर्षी आणि मजकूरामध्ये भिन्नता करण्यासाठी भिन्न रंग त्याच्या मर्यादेप्रमाणेच. प्रत्येक मजकूर दरम्यान पास करण्यासाठी हे एक उत्कृष्ट अ‍ॅनिमेशन आहे.

टाइमलाइन

टाइमलाइन

ही टाइमलाइन ठेवते हिरव्या रंगाचा उच्चारण पूर्णपणे स्थिर असणे.

आणखी एक क्षैतिज टाइमलाइन

आणखी एक टाइमलाइन

हे असू शकते पूर्ण स्क्रीन जवळ एक प्रतिमा ठेवा अशा टाइमलाइनसाठी ज्या निळ्या आणि राखाडीच्या वापरासह तसेच प्रत्येक वर्षाचे प्रतिनिधित्व करीत मंडळांची मालिका वापरतात.

चुकवू नकोस सीएसएस आणि एचटीएमएल मधील मेनूची आणखी एक श्रृंखला.


टिप्पणी करणारे सर्वप्रथम व्हा

आपली टिप्पणी द्या

आपला ई-मेल पत्ता प्रकाशित केला जाणार नाही. आवश्यक फील्ड चिन्हांकित केले आहेत *

*

*

  1. डेटा जबाबदार: मिगुएल Áन्गल गॅटन
  2. डेटाचा उद्देशः नियंत्रण स्पॅम, टिप्पणी व्यवस्थापन.
  3. कायदे: आपली संमती
  4. डेटा संप्रेषण: कायदेशीर बंधन वगळता डेटा तृतीय पक्षास कळविला जाणार नाही.
  5. डेटा संग्रहण: ओकेन्टस नेटवर्क (EU) द्वारा होस्ट केलेला डेटाबेस
  6. अधिकारः कोणत्याही वेळी आपण आपली माहिती मर्यादित, पुनर्प्राप्त आणि हटवू शकता.