२ CSS CSS हेडरहरू र तपाईंको ब्लग वा वेबसाइटको लागि फुटरहरू

CSS फुटर

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

त्यसैले हामी साझा गर्न जाँदै छौं २ CSS CSS हेडरहरू र फुटरहरू जुन तपाईं आफ्नो ब्लग वा वेबसाइटमा प्रयोग गर्न सक्नुहुनेछ, र यसैले यो गुणस्तरको अनुहार दिनुहोस् जुन तपाईं खोजिरहनु भएको थियो। यो सूची पूर्ण स्क्रीन लेख हेडरको बनेको छ, साथै मानक आकार, फिक्स्ड वा फिक्स्ड हेडरहरू, फुटरहरू र केही भिडियो हेडरहरू तपाईंको वेबसाइटमा परिप्रेक्ष्यको अर्को बुँदा दिनको लागि बनेको छ।

अनुक्रमणिका

वक्र हेडर

वक्र हेडर

हेडर द्वारा चिनिन्छ तल यसको वक्र शैली जसले यसलाई वेबसाइट वा ब्लगको लागि धेरै विशेष हेडर बनाउँदछ। यो शुद्ध सीएसएस हो, त्यसैले यो पहिले नै तपाईंको वेब स्टेजिंग परीक्षणको लागि समय लिइरहेको छ किनकि यस्तो देखिन्छ कि तपाईंले यसलाई आफ्नो ब्लगमा समावेश गर्नुभयो भने।

हेडर छवि लंबन

परेला

एक उत्कृष्ट लंबन छवि प्रभावको साथ, यस हेडरले आफैंलाई पहिचान गर्दछ CSS पृष्ठभूमि-छवि स्थिति प्रयोग गर्नुहोस्। हेडर छवि महान प्रभाव कोडको लागि पृष्ठको शीर्षमा स्थित हुनेछ।

हेडर निश्चित कोणमा

एled्गल हेडर

यो हेडर वेब पृष्ठको शीर्षमा राम्रोसँग फिक्स गरिएको छ त्यो विकर्ण रेखाको साथ भिन्नता गर्नुहोस् त्यो प्रयोगकर्ताको दृश्यको सम्पूर्ण क्षैतिज पार गर्दछ। यसले पृष्ठभूमि छवि सहित निश्चित हेडर सिर्जना गर्न कसरी CSS छद्म-तत्त्वहरू प्रयोग गर्न सकिन्छ भनेर देखाउँदछ।

Skewed हेडर

तिरस्कृत

CSS र यस हेडरको लागि HTML जुन दिइएको उदाहरणमा विशेषता छ त्यो विकर्ण रेखाको साथ यसले सम्पूर्ण स्क्रीन एक साइड बाट अर्कोमा पार गर्यो।

SVG एनिमेसनको साथ हेडर

वक्र svg

एक धेरै सरल हेडर, यद्यपि यसले प्रयोग गर्दछ आफूलाई छुट्याउनको लागि एक SVG एनिमेसन हामीसँग यो सूचीमा छ। तपाईं वेब पृष्ठहरूको एक ठूलो सूची पहुँच गर्न सक्नुहुन्छ यहाँबाट SVG एनिमेसनको साथ.

Div को साथ फिक्स हेडर

Div फिक्स

लंबित छवि प्रभावको साथ, एक निश्चित हेडर जुन महान प्रभावको लागि खडा हुन्छ स्थिर पृष्ठभूमि छविको साथ प्राप्त गरियो जबकि बाँकी स्क्रोल हुँदैछ हामी माउसको साथ स्क्रोल गर्दा।

लंबन बहु-तह दृष्टान्त

बहु-तह

मा ठूलो समाप्त को एक हेडर बहु-स्तरित HTML, CSS र जाभास्क्रिप्ट र त्यो भिडियो खेल को दुनिया संग सम्बन्धित वेबसाइट को लागी राम्रोसँग प्रयोग गर्न सकिन्छ। सबै भन्दा राम्रो समाप्त।

फिक्स्ड पोस्ट हेडर

स्थिर पोष्ट

HTML, CSS र जाभास्क्रिप्टमा बनाइएको प्रत्येक पोष्टको लागि निश्चित हेडर। जुन क्षण हामी तल झर्छौं, हेडर छोटा छ र शीर्षमा स्थिर।

एनिमेसनको साथ पूरा स्क्रीन हेडर

एनिमेटेड तरंगहरू

हेडर जसले एनिमेसन प्रदान गर्दछ ढिला चालमा र त्यो दर्शक मा एक आराम प्रभाव पैदा गर्दछ।

हीरो छवि पूर्ण स्क्रीन

नायक छवि

con एक जुम प्रभाव, यो हेडर पूर्ण स्क्रीन यो महान मौलिकताको रूपमा प्रकट भएको छ। एक वेबसाइटको लागि एकदम उत्तम छ जसमा आगन्तुकले यसको वरिपरि घुम्न स्क्रोलि ofको ठूलो प्रयोग गर्न गइरहेको छ।

बटनको साथ फ्लेक्सबक्स 

बटनको साथ फ्लेक्सबक्स

हेडरले बटन प्रदर्शन गर्न स्क्रिनको पूरा चौडाइ लिन्छ। अवतरण पृष्ठहरूका लागि उत्तम CSS फ्लेक्सबक्सको साथ।

फ्लेक्सबक्स हीरो हेडर

फ्लेक्सबक्स नायक

प्रभावको साथ हेडर लंबन र फ्लेक्सबक्स एकदम सरल त्यो मुख्य रूपमा यसको डिजाइन को सुन्दरता को लागी खडा छ।

स्क्रोलमा स्टिकी हेडर

टाँसिने हेडर

यसको नामले सुझाव दिँदा निश्चित हेडर कहिले हुन्छ हामी सार्दा माउसको साथ स्क्रोल गर्दछौं बाँकी वेब पृष्ठ हेर्नका लागि।

उत्तरदायी स्क्रोलि St स्टिकी

उत्तरदायी स्क्रोल

महान प्रभावको अर्को निश्चित हेडर जब मेनू पृष्ठको शीर्षमा पुग्दछ, किनर त्यो क्षण मा यो स्थिर रहन्छ र हामी साइट स्क्रोलिंग राख्न सक्छौं।

स्क्रोल हेडर

स्क्रोल हेडर

यो बाँकी भन्दा फरक छ उचित र नाजुक एनिमेसन हामी सार्न को रूप मा। यसको अन्तमा, हेडबोर्ड शीर्षमा स्थिर रहन्छ।

उत्तरदायी स्क्रोल हेडर

उत्तरदायी स्क्रोल हेडर

का लागि अर्को महान एनिमेसन बाँकीबाट हेडर छुट्याउनुहोस् HTML, CSS र जाभास्क्रिप्टको साथ।

हेडर भित्र / बाहिर

एनिमेट हेडर

हेडर जुन प्रभावबाट भिन्न छ भित्र / बाहिर स्क्रोलिंग पछि र त्यो पलटाव को सनसनी उत्पन्न गर्दछ।

हेडर फेड

हेडर फेड

अर्को एनिमेसन प्रभाव जिज्ञासु र धेरै सुरुचिपूर्ण HTML, CSS र जाभास्क्रिप्टमा।

हेडर लुकाइएको छ

स्वत: लुकाउनुहोस्

एक फरक हेडर जब अनुसार लुकाइन्छ हामी एनिमेसनको साथ स्क्रोलिंग प्रयोग गर्दछौं त्यो ध्यान दिएर जान्छ तर महान गुणको।

लंबन फुटर

लंबन फुटर

HTML, CSS र जाभास्क्रिप्टको साथ एक निश्चित वा निश्चित फुटर को छायांकन संग महान गुणवत्ता प्रभाव।

सामग्री मापनको साथ फुटर

फुटर स्केल

को लागी एक उच्च गुणवत्ता र मूल फुटर पाहुनालाई चकित पार्नुहोस् यस वेब स्थान प्रदर्शनको आकर्षक तरिकाको लागि।

सामाजिक मीडिया फुटर

सामाजिक मिडिया

फुटर जुन बाहिर खडा हुन्छ बटनले सामाजिक नेटवर्कमा लैजान्छ सबै भन्दा राम्रो एनिमेसन उत्पादन जब सामाजिक नेटवर्क को प्रत्येक मा माउस सूचक छोड्दा बाहिर उभिन्छ।

एनिमेटेड मोबाइल फुटर मेनू

एनिमेटेड फुटर मोबाइल

यस फुटर हेर्न वेब ब्राउजर विन्डोलाई घटाएर, तपाईं सक्षम हुनुहुनेछ २- sections खण्डहरू फेला पार्नुहोस् कि प्रयोगकर्ताले मोबाइल उपकरणमा फेला पार्न सक्दछ। यो 767px मा प्रदर्शित छ।

सरल निश्चित फुटर

साधारण फिक्स्ड

HTML र CSS मा बनेको हो a सरल फुटर धेरै धूमधाम बिना र फूलो.

भिडियो हेडर प्रतिक्रिया दिनुहोस्

भिडियो हेडर प्रतिक्रिया दिनुहोस्

सँग हेडर साधारण भिडियो React.js.

भिडियो हेडर

भिडियो हेडर

अन्य सरल भिडियोको साथ हेडर र उत्कृष्ट गुणस्तरको।

मिक्स-ब्लेन्डको साथ पूर्ण स्क्रीन भिडियो हेडर

पूरा पर्दा

देखाउनुहोस् पूर्ण स्क्रीन भिडियो मिक्स-ब्लेन्ड मोड प्रयोग गरेर तहमा पाठको साथ।

भिडियो हेडर एनिमेसन

भिडियो हेडर एनिमेसन

एनिमेसन थियो प्रभाव पछि एडोब संग अनुकूलित सबै ब्राउजरहरूको साथ उपयुक्त हुन। यो मोबाईलमा काम गर्दैन।

ढाँचाको साथ उत्तरदायी भिडियो हेडर

उत्तरदायी

El ढाल भनेको के हो बाकीबाट यस भिडियो हेडरमा।


लेखको सामग्री हाम्रो सिद्धान्तहरूको पालना गर्दछ सम्पादकीय नैतिकता। त्रुटि क्लिक गर्न रिपोर्ट गर्नुहोस् यहाँ.

२ टिप्पणीहरू, तपाइँको छोड्नुहोस्

तपाइँको टिप्पणी छोड्नुहोस्

तपाईंको ईमेल ठेगाना प्रकाशित हुनेछैन। आवश्यक फिल्डहरू चिन्ह लगाइएको छ *

*

*

  1. डाटाका लागि उत्तरदायी: मिगुएल gelन्गल ग्याटन
  2. डाटाको उद्देश्य: नियन्त्रण स्पाम, टिप्पणी प्रबन्धन।
  3. वैधानिकता: तपाईंको सहमति
  4. डाटाको सञ्चार: डाटा कानुनी बाध्यता बाहेक तेस्रो पक्षलाई सूचित गरिने छैन।
  5. डाटा भण्डारण: डाटाबेस ओसीन्टस नेटवर्क (EU) द्वारा होस्ट गरिएको
  6. अधिकार: कुनै पनि समयमा तपाईं सीमित गर्न सक्नुहुनेछ, पुन: प्राप्ति र तपाईंको जानकारी मेटाउन।

  1.   TecnOku भन्यो

    सबैले मलाई विश्वास गरे। धन्यबाद