आपके वेब लेआउट को बदलने के लिए 10 अविश्वसनीय सीएसएस ट्रिक्स

वेब डिज़ाइन में अनुभव रखने वाला कोई भी, चाहे आपने DIY वेबसाइट बिल्डरों का उपयोग किया हो या स्क्रैच से साइट बनाई हो, संभवतः सीएसएस के बारे में पहले सुना होगा। इस अविश्वसनीय रूप से शक्तिशाली टूल का उपयोग आपके वेब लेआउट को बदलने के लिए किया जा सकता है, जिससे आपको अपनी वेबसाइट पर नियंत्रण रखने और अपनी रचनात्मक दृष्टि प्राप्त करने की शक्ति मिलती है। लेकिन आप अपनी अगली वेबसाइट की क्षमता को अनलॉक करने के लिए कैस्केडिंग स्टाइल शीट का उपयोग कैसे कर सकते हैं?

यह मार्गदर्शिका केवल CSS गुणों की एक श्रृंखला का विवरण देगी जिनका उपयोग आप ऊपर की छवि में देख सकने वाले शीर्षलेख को बनाने के लिए किया गया है। आप इस परियोजना को यहाँ पर पा सकते हैं कोडपेन, आपको इसे अपने लिए आजमाने का मौका देता है।

सीएसएस छवि हेरफेर

अपना हेडर सेक्शन बनाने के लिए हमें जो पहला कदम उठाने की जरूरत है, वह है पेज पर इमेज जोड़ना। आप इस लक्ष्य को प्राप्त करने के लिए कई तरीकों का उपयोग कर सकते हैं, इसलिए हमने आपकी छवियों में हेरफेर करने में आपकी मदद करने के लिए कुछ तरकीबों के साथ सबसे लोकप्रिय को कवर किया है।

1. सीएसएस पृष्ठभूमि-छवि

हम अपने हेडर के लिए एक फ़ुल-स्क्रीन बैकग्राउंड इमेज चाहते हैं, और बैकग्राउंड-इमेज CSS प्रॉपर्टी आदर्श है। सबसे पहले, हमें अपनी छवि के लिए एक कंटेनर बनाने की आवश्यकता है (और हेडर के बाकी तत्व)।

हमने इसकी कक्षा के रूप में "हेडर" के साथ एक div टैग जोड़कर शुरुआत की, इसके बाद इसकी ऊंचाई से 100vh और इसके चौड़ाई से 100vw; यह हमें एक बॉक्स देता है जो बिल्कुल व्यूपोर्ट के समान आकार का होता है। हमने पृष्ठ के मुख्य भाग के लिए एक CSS नियम भी जोड़ा है, इसके साथ अतिप्रवाह छुपा करने के लिए सेट और इसके मार्जिन 0px. पर सेट है.

कंटेनर के साथ, हम एक पृष्ठभूमि छवि जोड़ सकते हैं, और इस लक्ष्य को प्राप्त करने के लिए हमें तीन अलग-अलग सीएसएस नियमों की आवश्यकता है। पहली, पृष्ठभूमि-छवि, को पृष्ठभूमि छवि के स्रोत के रूप में कार्य करने के लिए एक URL की आवश्यकता होती है, और हमने इसके लिए आसान Unsplash कैटलॉग का उपयोग किया है। हमें सेट करने की भी आवश्यकता है कवर करने के लिए पृष्ठभूमि-आकार और यह पृष्ठभूमि-स्थिति नीचे करने के लिए, लेकिन आप सर्वोत्तम परिणामों के लिए इनके साथ प्रयोग करना चाह सकते हैं।

2. सीएसएस पृष्ठभूमि-मिश्रण-मोड

CSS ब्लेंड मोड छवियों और टेक्स्ट को ब्लेंड करना संभव बनाता है, ठीक उसी तरह जैसे Adobe Photoshop जैसे सॉफ़्टवेयर में ब्लेंड फीचर। ब्लेंड मोड को हमारी बैकग्राउंड इमेज के साथ काम करने के लिए, हम सेट करते हैं पृष्ठभूमि-रंग से अर्ध-पारदर्शी सफेद ब्लेंड मोड जोड़ने से पहले हम उपयोग करना चाहते थे।

इस से निर्देशित, पृष्ठभूमि-मिश्रण-मोड को नरम-प्रकाश पर सेट किया गया था, हमें छवि को नरम करने की इजाजत देता है।

3. सीएसएस क्लिप-पथ

अपनी अगली ट्रिक के लिए, हम क्लिप-पाथ नामक एक नियम का उपयोग करेंगे। आईएमजी एचटीएमएल टैग का उपयोग करते समय, आप एक पथ सेट कर सकते हैं जो उन छवियों के हिस्सों को छुपाएगा जिनके साथ आप काम कर रहे हैं। आप इसके लिए सामान्य आकृतियों का उपयोग करना चुन सकते हैं, लेकिन अधिक जटिल डिज़ाइन बनाने के लिए आप SVG-जनरेटिंग ऐप का भी उपयोग कर सकते हैं।

हमने तीन छवियों के लिए एक कंटेनर के रूप में कार्य करने के लिए "flex_image_box" के साथ एक div टैग जोड़ा है, इसे फ्लेक्सबॉक्स में बदलने के लिए डिस्प्ले CSS प्रॉपर्टी का उपयोग करके (हम इसके बारे में बाद में बात करेंगे)। "img1", "img2", और "img3" के रूप में सेट किए गए आईडी के साथ, div टैग के अंदर तीन img टैग जोड़े गए। सेटिंग प्रत्येक छवि की चौड़ाई 600px, हम यह कर सकेंगे ऊंचाई संपत्ति को खाली छोड़ दें छवियों के पहलू अनुपात को बदले बिना; अब हमारे क्लिप-पथ को जोड़ने का समय आ गया है!

हमारे तीन त्रिकोण बनाने के लिए, हमने img1 और img3 के लिए समान बहुभुज क्लिप-पथ का उपयोग किया है, जिसमें img2 के लिए एक उल्टा संस्करण है। हमें यह सुनिश्चित करने के लिए अपने फ्लेक्स-बॉक्स कंटेनर की स्थिति के साथ भी खेलना पड़ा कि छवियां स्क्रीन पर सही स्थिति में बैठें। हमारे क्लिप-पथ नियम नीचे देखे जा सकते हैं।

4. सीएसएस अस्पष्टता

अपारदर्शिता किसी भी HTML तत्व की पारदर्शिता का स्तर निर्धारित करती है। हम सेट करते हैं हमारी छवियों की अस्पष्टता 90% तक, उन्हें थोड़ा अपारदर्शी बनाते हैं ताकि वे पृष्ठभूमि के साथ अच्छी तरह से मिल जाएं।

सीएसएस उत्तरदायी पाठ और छवियां

हम पहले ही की कला का पता लगा चुके हैं HTML, CSS और JavaScript का उपयोग करके आश्चर्यजनक प्रतिक्रियाशील वेबसाइट बनाना अतीत में, लेकिन हम उन सिद्धांतों पर निर्माण कर सकते हैं जिन्हें आप अपने वेबसाइट लेआउट में महारत हासिल करने के लिए आवश्यक कौशल में गहन अंतर्दृष्टि प्रदान करते हैं।

1. सीएसएस उत्तरदायी/सापेक्ष इकाइयां

px, pt, और cm जैसी CSS इकाइयाँ निरपेक्ष इकाइयाँ हैं, और इसका मतलब है कि एक वेब ब्राउज़र उन्हें उसी आकार में प्रस्तुत करेगा, चाहे वे जिस विंडो पर हों, उसकी चौड़ाई और ऊँचाई कोई भी हो। सापेक्ष इकाइयाँ भिन्न होती हैं, जो ऊँचाई और लंबाई उत्पन्न करती हैं जो अन्य मापों के सापेक्ष होती हैं, जैसे ब्राउज़र विंडो या मूल तत्व। नीचे दी गई सापेक्ष इकाइयाँ आमतौर पर उत्तरदायी वेब डिज़ाइन के लिए उपयोग की जाती हैं और आवश्यक होती हैं।

• एम: यह इकाई आमतौर पर टेक्स्ट के साथ प्रयोग की जाती है। यह वर्तमान तत्व के फ़ॉन्ट-आकार के सापेक्ष है, जो सेट किए गए फ़ॉन्ट-आकार से 4em चार गुना बड़ा है।
• रेमो: एम की तरह, रेम एक तत्व के फ़ॉन्ट-आकार के सापेक्ष है; पदानुक्रम में मूल तत्व का उपयोग आउटपुट आकार को परिभाषित करने के लिए किया जाता है।
• वीडब्ल्यू/वीएच: व्यूपोर्ट के आकार के आधार पर चौड़ाई और ऊंचाई का निर्धारण, 2vw ब्राउज़र की चौड़ाई के 2% के बराबर होता है जबकि 2vh ब्राउज़र की ऊंचाई के 2% के बराबर होता है।
• %: % इकाई किसी तत्व के पैरेंट के आकार के आधार पर आयामों की गणना करती है।
• वीमिन/वीमैक्स: ये इकाइयां व्यूपोर्ट के सबसे छोटे या सबसे बड़े आयामों के 1% के सापेक्ष आयाम उत्पन्न करती हैं, तत्वों को ब्राउज़र विंडो के आकार पर सीधे प्रतिक्रिया देने के साधन प्रदान करती हैं।

2. सीएसएस फ़ॉन्ट-आकार

इस संपत्ति को डिफ़ॉल्ट मानों का उपयोग करके सेट किया जा सकता है जो कि वेबसाइट की मुख्य स्टाइलशीट या उपयोगकर्ता के वेब ब्राउज़र द्वारा पूर्वनिर्धारित हैं। इन मानों में मध्यम, xx-छोटा, x-छोटा, छोटा, बड़ा, x-बड़ा, और xx-बड़ा शामिल है, जिसमें किसी भी पाठ के लिए माध्यम को डिफ़ॉल्ट के रूप में सेट किया गया है जिसमें फ़ॉन्ट-आकार CSS टैग का अभाव है। वैकल्पिक रूप से, फ़ॉन्ट-आकार सीएसएस संपत्ति का उपयोग करते समय सापेक्ष मूल्यों को नियोजित किया जा सकता है, और यह है विधि जिसका उपयोग हमने यह सुनिश्चित करने के लिए किया है कि हमारे हेडर सेक्शन में टेक्स्ट किसी के लिए उचित आकार में है व्यूपोर्ट

हमने अपने HTML में दो शीर्षक टैग जोड़े हैं, जिससे हम प्रोजेक्ट में टेक्स्ट जोड़ सकते हैं। एक मुख्य बड़ा शीर्षलेख है, जबकि दूसरा उपशीर्षक है, और वे दोनों सापेक्ष इकाइयों का उपयोग करते हैं।

संबंधित: CSS में HTML फॉन्ट साइज कैसे बदलें

3. सीएसएस चौड़ाई और ऊंचाई

सभी HTML तत्व ऊंचाई और चौड़ाई के आयामों के साथ आते हैं, चाहे वे div, img, a, या किसी अन्य प्रकार के टैग हों। इन आयामों को स्वचालित रूप से डिफ़ॉल्ट मानों पर सेट किया जा सकता है, लेकिन इन्हें वेब डिज़ाइनर द्वारा सही नियमों का उपयोग करके भी निर्धारित किया जा सकता है; हमने इस हेडर के लिए इन दोनों विधियों का उपयोग किया है।

पृष्ठभूमि छवि के लिए उत्तरदायी इकाइयों का उपयोग किया गया है, जिसकी ऊंचाई 100vh और चौड़ाई 100vw पर सेट है, लेकिन हमने अपनी तीन छवियों के लिए पूर्ण इकाइयों का भी उपयोग किया है। यह सीएसएस चौड़ाई और ऊंचाई इकाइयों के साथ खोज और प्रयोग करने लायक है, जिसमें "विरासत" जैसे विकल्प प्रदान करते हैं एक मूल तत्व के आयामों को अपनाने का मतलब है, और इस तरह की कई अन्य तरकीबें हैं जिनका आप उपयोग कर सकते हैं।

4. CSS मिक्स-ब्लेंड-मोड

CSS मिक्स-ब्लेंड-मोड बैकग्राउंड-ब्लेंड मोड के समान है, केवल इसे किसी भी तत्व पर लागू किया जा सकता है, न कि केवल बैकग्राउंड के लिए। बनावट जोड़ने और परियोजना को और अधिक रोचक बनाने के लिए हमने अपने H1 शीर्षक पर इस संपत्ति का उपयोग किया है। हमने अपना सेट करके शुरुआत की पाठ का रंग काला करने के लिए, सेट करने के बाद मिश्रण-मिश्रण-मोड ओवरले करने के लिए.

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

5. सीएसएस पाठ-रूपांतरण

CSS टेक्स्ट-ट्रांसफॉर्म एक चतुर संपत्ति है जो डिजाइनरों को उनकी वेबसाइटों पर टेक्स्ट के मामले को बदलने में सक्षम बनाती है, बिना सर्च इंजन के इसे पढ़ने के तरीके को प्रभावित किए। उदाहरण के लिए, हमारे पास है टेक्स्ट-ट्रांसफ़ॉर्म को अपरकेस में सेट करें हमारे H1 शीर्षक पर, प्रत्येक अक्षर को एक कैपिटल बनाते हुए, चाहे हम इसे अपने HTML में कैसे भी इनपुट करें।

सीएसएस अतिप्रवाह गुण

एचटीएमएल अक्सर एक कठोर ढांचे की तरह लग सकता है जो आपकी वेबसाइटों पर सामग्री के लिए सख्त सीमाएं निर्धारित करता है, लेकिन जब अतिप्रवाह गुण नियोजित होते हैं तो ऐसा नहीं होता है।

सीएसएस ओवरफ्लो और टेक्स्ट-ओवरफ्लो

अतिप्रवाह और पाठ-अतिप्रवाह बहुत समान सीएसएस गुण हैं। अतिप्रवाह किसी भी तत्व पर लागू किया जा सकता है, जिससे आपको उस सामग्री पर नियंत्रण मिलता है जो इसकी सीमाओं से बचने में सक्षम है। टेक्स्ट-ओवरफ़्लो समान है, हालांकि यह केवल टेक्स्ट पर लागू होता है, और आपको अपने नियमों में अतिरिक्त पैरामीटर जोड़ने की क्षमता देता है। हमने इस परियोजना के लिए केवल अतिप्रवाह का उपयोग किया है (हमने इसे अपने पृष्ठ के शरीर के आकार को सीमित करने के लिए उपयोग किया है), लेकिन आप पाठ-अतिप्रवाह के बारे में पढ़ सकते हैं W3स्कूल वेबसाइट।

अपने वेब लेआउट के लिए CSS का उपयोग करना

CSS एक अविश्वसनीय रूप से शक्तिशाली उपकरण है, जो वेब डिजाइनरों और डेवलपर्स को कोड का उपयोग करके आश्चर्यजनक वेबसाइट बनाने में सक्षम बनाता है। हम आपको लेख की शुरुआत में प्रदान किए गए कोडपेन पर एक नज़र डालने के लिए प्रोत्साहित करते हैं, क्योंकि इससे आपको और भी गहरी जानकारी मिलेगी कि ये सभी उपकरण कैसे काम करते हैं। साथ ही, आप उस शीर्षलेख के साथ खेल सकते हैं जिसे हमने आपके अपने अंतिम रूप जोड़ने के लिए बनाया है।

8 आवश्यक सीएसएस टिप्स और ट्रिक्स हर डेवलपर को पता होना चाहिए

क्या आप तीव्र कार्यप्रवाह और एक सुंदर वेब डिज़ाइन के लिए इन प्रमुख CSS विधियों का उपयोग कर रहे हैं?

आगे पढ़िए

लेखक के बारे में