एक अनुवादक से: ब्रेट कैमरन के सीएसएस ट्रिक्स के लेख को आपके लिए अनुवादित किया गया था। न केवल शुरुआती के लिए, बल्कि अनुभवी डेवलपर्स के लिए भी कई बिंदु उपयोगी होंगे।यह लेख सीएसएस तकनीकों के बारे में है जो मैंने सीखा और एक्सक्लूसिव है: "आहह!" आशा है आप कुछ खोज भी करेंगे।
CSS एक विशिष्ट तकनीक है। पहली नज़र में, यह बहुत सरल लगता है। लेकिन कुछ प्रभाव, जो सिद्धांत में सरल लगते हैं, व्यवहार में ऐसे नहीं हैं।
मैं आपको कुछ ट्रिक्स दिखाऊंगा और सीएसएस में उनका उपयोग करने के तरीके के बारे में बात करूंगा। लेख स्वयं जटिलता के बारे में नहीं है। इसके विपरीत, यह आपके काम को और अधिक आरामदायक बनाने के लिए डिज़ाइन किया गया है।
स्किलबॉक्स सलाह देता है: दो महीने का हैंड्स -ऑन कोर्स, "प्रोफेशन फ्रंटेंड-डेवलपर । "
हम आपको याद दिलाते हैं: हैबर के सभी पाठकों के लिए - जब हेरा प्रचारक कोड के अनुसार किसी भी स्किलबॉक्स कोर्स के लिए पंजीकरण करते समय 10,000 रूबल की छूट।
1. चिपचिपा पाद
कार्यान्वयन में आसानी के बावजूद, यह नौसिखिया डेवलपर्स के लिए एक ठोकर बन सकता है।
अधिकांश परियोजनाओं में, आप चाहते हैं कि पाद लेख स्क्रीन के निचले भाग पर बना रहे, भले ही सामग्री की मात्रा हो, और विभिन्न देखने की स्थिति के अनुकूल हो।
CSS3 से पहले, यह प्रभाव पाद की सटीक ऊंचाई को जाने बिना हासिल करना मुश्किल था। लेकिन अब यह कोई समस्या नहीं है, स्टिकी बॉक्स का उपयोग करने के लिए एक चिपचिपा पाद बनाने के लिए सबसे अच्छा है। अर्थात्, फ्लेक्स-सिकुड़ संपत्ति ले लो, ताकि आप सुनिश्चित करेंगे कि पाद अपने आकार को बनाए रखेगा।
आकार 0 पर, यह बिल्कुल संपीड़ित नहीं करेगा।
2. होवर आवर्धन
यह प्रभाव क्लिक करने योग्य छवि के लिए उपयोगकर्ता का ध्यान आकर्षित करने का एक शानदार तरीका है। जब वह चित्र पर कर्सर ले जाता है, तो यह उसी आकार को बनाए रखते हुए थोड़ा "उगता" है।
इस तरह के एक प्रभाव को बनाने के लिए, हमें एक रैपर div की आवश्यकता है, उन्हें HTML में छवि टैग को लपेटने की आवश्यकता है।
इसके अलावा, काम करने के लिए प्रभाव के लिए, आपको तत्व की चौड़ाई और ऊंचाई निर्धारित करने की आवश्यकता है, और यह भी सुनिश्चित करें कि इसका अतिप्रवाह छिपा हुआ है। उसके बाद, आप किसी भी प्रकार के परिवर्तन को लागू कर सकते हैं।
3. स्थायी रात मोड
यदि आपको अपनी साइट के लिए रात मोड सेट करने के लिए एक त्वरित तरीके की आवश्यकता है, तो इनवर्ट और ह्यू-रोटेट फ़िल्टर का उपयोग करें।
फ़िल्टर: इनवर्ट () 0 से 1. मान ले सकता है। 1 एक उलटा है, सफेद काला हो जाता है।
फ़िल्टर: ह्यू-रोटेट () आपके तत्वों की रंग सामग्री को बदलता है ताकि वे एक-दूसरे से अलग होने के समान स्तर को कम या ज्यादा बनाए रखें। मान 0 से 360 डिग्री तक होता है।
यदि आप इन प्रभावों को बॉडी टैग के अंदर जोड़ते हैं, तो आप साइट के लिए जल्दी से एक रात की त्वचा पा सकते हैं (इस मामले में पृष्ठभूमि को रंग सेट करने की आवश्यकता है)।
यहाँ एक उदाहरण है:
body { background: #FFF; filter: invert(1) hue-rotate(210deg); }
इन सेटिंग्स का उपयोग करके, आप Google प्रारंभ पृष्ठ को इसमें बदल सकते हैं।
4. कस्टम बुलेट
किसी सूची के लिए कस्टम बुलेट बनाने के लिए, आप छद्म तत्व से पहले :: के साथ सामग्री का उपयोग कर सकते हैं
नीचे दिए गए CSS में, मैं दो वर्गों .comlete और .incomplete का उपयोग दो प्रकार के शूटआउट के बीच अंतर करने के लिए करता हूं।
बोनस: नेविगेशन में ब्रेडक्रंब
सामग्री संपत्ति का उपयोग करके दिलचस्प प्रभाव प्राप्त करने के कई तरीके हैं, लेकिन मैं विरोध नहीं कर सका और दूसरे को जोड़ा।
चूंकि ब्रेडक्रंब को अलग करने के लिए उपयोग किए जाने वाले स्लैश और अन्य वर्ण शैलीगत हैं, इसलिए सीएसएस में उन्हें परिभाषित करना समझ में आता है। जैसा कि इस लेख में कई अन्य उदाहरणों में है, प्रभाव अंतिम बच्चे के छद्म वर्ग पर आधारित है। यह केवल CSS3 में उपलब्ध है:
.breadcrumb a:first-child::before { content: " » "; } .breadcrumb a::after { content: " /"; } .breadcrumb a:last-child::after { content: ""; }
5. लंबन चित्र
यह लोकप्रिय प्रभाव उपयोगकर्ताओं का ध्यान आकर्षित करता है। यदि आप स्क्रॉल करते समय किसी पृष्ठ को चेतन करना चाहते हैं तो यह उपयोग करने योग्य है।
जबकि नियमित चित्र स्क्रॉल करते समय स्थान बदलते हैं, लंबन चित्र जगह में बने रहते हैं।
CSS उदाहरण (केवल CSS)यहां, एक अभिन्न तत्व पृष्ठभूमि-अनुलग्नक है: निश्चित, यह पृष्ठभूमि छवि की स्थिति को एक विशिष्ट स्थिति में बांधता है। चित्र जगह में रहता है, जबकि खिड़की जिसमें से यह दिखाई देता है स्क्रॉल। ऐसा लगता है कि तस्वीर पूरी साइट के पीछे है। इस प्रभाव को विपरीत के साथ बदलने के लिए, पृष्ठभूमि-अनुलग्नक निर्दिष्ट करें: स्क्रॉल करें।
सीएसएस + जावास्क्रिप्ट6. फसली छवियों के साथ एनीमेशन
CSS3 से पहले, चिपचिपा पाद लेख के साथ, फसली छवियों के साथ एनिमेशन बनाना मुश्किल था। अब हमें ऑब्जेक्ट-फिट और ऑब्जेक्ट-पोज़िशन प्राप्त हुई है, जो आपको इमेज के पहलू अनुपात को प्रभावित किए बिना इमेज को आकार देने की अनुमति देते हैं।
पहले, आपको एक छवि संपादक का उपयोग करना था। CSS3 का महान लाभ छवियों को एनीमेशन का एक हिस्सा बनाने की क्षमता है।
यहाँ एक टैग के साथ एक उदाहरण है। इस मामले में, आप इसका लाभ उठा सकते हैं: चेक किया हुआ छद्म वर्ग, और जावास्क्रिप्ट की आवश्यकता नहीं है।
7. ब्लेंड मोड
यदि आप फ़ोटोशॉप से परिचित हैं, तो आप विभिन्न दिलचस्प प्रभावों को प्राप्त करने के लिए सम्मिश्रण के लाभों से अच्छी तरह परिचित हैं। लेकिन क्या आप जानते हैं कि CSS में भी यही मोड उपलब्ध हैं।
यहां पृष्ठभूमि-रंग के साथ मध्यम पृष्ठों के लिए मिश्रण मोड का उपयोग करने के उदाहरण हैं - लाइटब्लू और ब्लेंड-मोड - अंतर:
आप न केवल पृष्ठभूमि के साथ काम करने के लिए इन विधियों को लागू कर सकते हैं। मिक्स-ब्लेंड-मोड संपत्ति आपको पृष्ठभूमि के साथ तत्वों को मिश्रण करने की अनुमति देती है। इसलिए, उदाहरण के लिए, मिक्स-ब्लेंड-मोड - कलर-डॉज और बैकग्राउंड लाइटस्ल्मन का उपयोग करके आप यह प्रभाव पा सकते हैं।
CSS3 से पहले, यह विश्वास करना कठिन था कि साइटें इस तरह दिख सकती हैं।
हाँ, Chrome 58+ के साथ एक समस्या है जो पारदर्शी या टैग में सेट किए गए तत्वों को गलत तरीके से प्रस्तुत करती है। एक त्वरित फिक्स पृष्ठभूमि-रंग - सफेद जोड़ना है।
8. पिंटरेस्ट स्टाइल - इमेजबोर्ड
सीएसएस ग्रिड और फ्लेक्सबॉक्स ने विभिन्न प्रकार के उत्तरदायी लेआउट के निर्माण को बहुत सरल बनाया है, जिससे आप पृष्ठ पर आसानी से तत्वों को केंद्र में रख सकते हैं।
लेकिन वे Pinterest शैली के छवि बोर्डों में व्यावहारिक रूप से बेकार हैं, जहां प्रत्येक तत्व की ऊर्ध्वाधर व्यवस्था इसके ऊपर के तत्व की ऊंचाई के आधार पर बदलती है।
इसे प्राप्त करने का सबसे अच्छा तरीका सीएसएस स्तंभ गुणों के एक सेट का उपयोग करना है। वे अक्सर अख़बार-शैली के पाठ के कई कॉलम बनाने के लिए उपयोग किए जाते हैं, लेकिन एक और उपयोग का मामला है।
इसे काम करने के लिए, आपको तत्वों को एक div में लपेटने और स्तंभ-चौड़ाई और स्तंभ-अंतराल गुणों को सेट करने की आवश्यकता है।
फिर, दो स्तंभों के बीच तत्वों के पृथक्करण को रोकने के लिए, स्तंभ-तोड़-अंदर पैरामीटर जोड़ें:
ऊपर एक उदाहरण का उपयोग है: नहीं () छद्म वर्ग। यहाँ इस्तेमाल किया: मंडराना
CSS के साथ काम करते समय आप किन ट्रिक का उपयोग करते हैं? टिप्पणियों में उन्हें इंगित करें - मुझे यकीन है कि यह सभी पाठकों के लिए उपयोगी होगा।
स्किलबॉक्स अनुशंसा करता है: