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

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

प्रत्येक डेवलपर को अपनी परियोजनाओं को जल्दी और कुशलता से विकसित करने के लिए इन सीएसएस ट्रिक्स को जानना चाहिए। वे निश्चित रूप से आपकी उत्पादकता को अगले स्तर तक बढ़ाएंगे—आइए शुरू करें।

1. होवर प्रभाव

आप HTML तत्व का उपयोग करके होवर प्रभाव जोड़ सकते हैं :होवर चयनकर्ता

उदाहरण: बटन तत्व में होवर प्रभाव जोड़ना।

HTML कोड:

मेरे ऊपर होवर करें

सीएसएस कोड:

बटन: होवर {
रंग: #0062FF;
सीमा: #0062FF ठोस 1px;
पृष्ठभूमि: #FFFF99;
}

आप इस कोड के साथ खेल सकते हैं और प्रभाव जोड़ सकते हैं जैसे में फीका,में बड़े, तिरछा, और इसी तरह। इसे स्वयं अपना बनाएं!

होवर पर सीएसएस फेड-इन प्रभाव

बटन{
अस्पष्टता: 0.5;
}
बटन: होवर {
अस्पष्टता: 1;
}

होवर पर CSS ग्रो-इन प्रभाव

बटन: होवर {
-वेबकिट-ट्रांसफॉर्म: स्केल (1.2);
-एमएस-ट्रांसफॉर्म: स्केल (1.2);
ट्रांसफॉर्म: स्केल (1.2);
}

2. एक div कंटेनर फिट करने के लिए छवियों का आकार बदलें

आप एक डिव कंटेनर में फिट करने के लिए एक छवि का आकार बदल सकते हैं कद, चौड़ाई, तथा वस्तु-फिट गुण।

HTML कोड:

सीएसएस कोड:

यादृच्छिक-छवि {
 ऊंचाई: 100%;
 चौड़ाई: 100%;
 वस्तु-फिट: शामिल;
 }

3. सभी शैलियों को ओवरराइड करना

आप एक विशेषता (इनलाइन शैलियों सहित) की अन्य सभी शैली घोषणाओं को ओवरराइड कर सकते हैं !जरूरी एक मूल्य के अंत में निर्देश।

HTML कोड:

 हैलो वर्ल्ड!

सीएसएस कोड:

पी {
 पृष्ठभूमि-रंग: पीला;
 }
 ।कक्षा का नाम {
 पृष्ठभूमि-रंग: नीला! महत्वपूर्ण;
 }
 #आईडीनाम {
 पृष्ठभूमि-रंग: हरा;
 }

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

4. एलिप्सिस के साथ टेक्स्ट को छोटा करें

आप एक दीर्घवृत्त के साथ अतिप्रवाहित पाठ को काट सकते हैं (...) का उपयोग पाठ-अतिप्रवाह सीएसएस संपत्ति।

HTML कोड:

 लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट, सेड डू ईउसमॉड टेम्पोर।

सीएसएस कोड:

।मूलपाठ {
 व्हाइट-स्पेस: अब्रैप;
 ओवर फलो हिडेन;
 पाठ-अतिप्रवाह: इलिप्सिस;
 चौड़ाई: 200px;
 }

सम्बंधित: CSS बॉक्स मॉडल को उदाहरणों के साथ समझाया गया

5. टेक्स्ट-ट्रांसफॉर्म का उपयोग करना

आप टेक्स्ट को अपरकेस, लोअरकेस, या कैपिटलाइज़ करने के लिए का उपयोग करके बाध्य कर सकते हैं पाठ बदलना सीएसएस संपत्ति।

अपरकेस

HTML कोड:

 लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट।

सीएसएस कोड:

।अपरकेस {
 पाठ-रूपांतरण: अपरकेस;
 }

छोटे

HTML कोड:

 लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट।

सीएसएस कोड:

लोअरकेस {
 पाठ-रूपांतरण: लोअरकेस;
 }

मूल बनाना

HTML कोड:

 लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट।

सीएसएस कोड:

पूंजीकरण {
 पाठ-रूपांतरण: बड़ा करना;
 }

6. एकल-पंक्ति संपत्ति घोषणा का उपयोग करना

आप अपने कोड को संक्षिप्त और आसानी से पढ़ने योग्य बनाने के लिए CSS में शॉर्टहैंड गुणों का उपयोग कर सकते हैं।

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

एकल-पंक्ति पृष्ठभूमि संपत्ति घोषणा

पृष्ठभूमि-रंग: काला;
पृष्ठभूमि-छवि: यूआरएल (छवियां/xyz.png);
बैकग्राउंड-रिपीट: नो-रिपीट;
पृष्ठभूमि-स्थिति: बाएं शीर्ष;

आप उपरोक्त घोषणा को एक पंक्ति में सरल बना सकते हैं:

पृष्ठभूमि: काला यूआरएल (छवियां/xyz.png) बाएं शीर्ष पर दोबारा दोहराएं;

आशुलिपि गुण उपयोग करने के लिए बहुत सुविधाजनक हैं, लेकिन आपको कुछ पर विचार करने की आवश्यकता है मुश्किल किनारे के मामले (जैसा कि एमडीएन वेब डॉक्स पर उल्लिखित है) उनका उपयोग करते समय।

टूलटिप्स किसी तत्व के बारे में अधिक जानकारी प्रदान करने का एक तरीका है जब उपयोगकर्ता माउस पॉइंटर को तत्व पर ले जाता है।

HTML कोड:

दायां टूलटिप
यह टूलटिप टेक्स्ट है

सीएसएस कोड:

तन {
 पाठ-संरेखण: केंद्र;
 }
 .टूलटिप_डिव {
 स्थिति: रिश्तेदार;
 प्रदर्शन: इनलाइन-ब्लॉक;
 }
 .टूलटिप_डिव .टूलटिप {
 दृश्यता: छिपा हुआ;
 चौड़ाई: 170px;
 पृष्ठभूमि-रंग: नीला;
 रंग: #fff;
 पाठ-संरेखण: केंद्र;
 सीमा-त्रिज्या: 6px;
 पैडिंग: 5px 0;
 /* टूलटिप की स्थिति बनाना */
 स्थिति: निरपेक्ष;
 जेड-इंडेक्स: 1;
 शीर्ष: -5 पीएक्स;
 बाएं: 105%;
 }
 .टूलटिप_डिव: होवर .टूलटिप {
 दृश्यता: दृश्यमान;
 }

HTML कोड:

बायां टूलटिप
यह टूलटिप टेक्स्ट है

सीएसएस कोड:

तन {
 पाठ-संरेखण: केंद्र;
 }
 .टूलटिप_डिव {
 स्थिति: रिश्तेदार;
 प्रदर्शन: इनलाइन-ब्लॉक;
 }
 .टूलटिप_डिव .टूलटिप {
 दृश्यता: छिपा हुआ;
 चौड़ाई: 170px;
 पृष्ठभूमि-रंग: नीला;
 रंग: #fff;
 पाठ-संरेखण: केंद्र;
 सीमा-त्रिज्या: 6px;
 पैडिंग: 5px 0;
 /* टूलटिप की स्थिति बनाना */
 स्थिति: निरपेक्ष;
 जेड-इंडेक्स: 1;
 शीर्ष: -5 पीएक्स;
 अधिकार: 105%;
 }
 .टूलटिप_डिव: होवर .टूलटिप {
 दृश्यता: दृश्यमान;
 }

HTML कोड:

शीर्ष टूलटिप
यह टूलटिप टेक्स्ट है

सीएसएस कोड:

तन {
 पाठ-संरेखण: केंद्र;
 }
 .टूलटिप_डिव {
 मार्जिन-टॉप: 100px;
 स्थिति: रिश्तेदार;
 प्रदर्शन: इनलाइन-ब्लॉक;
 }
 .टूलटिप_डिव .टूलटिप {
 दृश्यता: छिपा हुआ;
 चौड़ाई: 170px;
 पृष्ठभूमि-रंग: नीला;
 रंग: #fff;
 पाठ-संरेखण: केंद्र;
 सीमा-त्रिज्या: 6px;
 पैडिंग: 5px 0;
 /* टूलटिप की स्थिति बनाना */
 स्थिति: निरपेक्ष;
 जेड-इंडेक्स: 1;
 नीचे: 100%;
 बाएं: 50%;
 मार्जिन-बाएं: -60px;
 }
 .टूलटिप_डिव: होवर .टूलटिप {
 दृश्यता: दृश्यमान;
 }

HTML कोड:

निचला टूलटिप
यह टूलटिप टेक्स्ट है

सीएसएस कोड:

तन {
 पाठ-संरेखण: केंद्र;
 }
 .टूलटिप_डिव {
 मार्जिन-टॉप: 100px;
 स्थिति: रिश्तेदार;
 प्रदर्शन: इनलाइन-ब्लॉक;
 }
 .टूलटिप_डिव .टूलटिप {
 दृश्यता: छिपा हुआ;
 चौड़ाई: 170px;
 पृष्ठभूमि-रंग: नीला;
 रंग: #fff;
 पाठ-संरेखण: केंद्र;
 सीमा-त्रिज्या: 6px;
 पैडिंग: 5px 0;
 /* टूलटिप की स्थिति बनाएं */
 स्थिति: निरपेक्ष;
 जेड-इंडेक्स: 1;
 सर्वोच्च 100%;
 बाएं: 50%;
 मार्जिन-बाएं: -60px;
 }
 .टूलटिप_डिव: होवर .टूलटिप {
 दृश्यता: दृश्यमान;
 }

आप कस्टम बनाने के लिए बूटस्ट्रैप लाइब्रेरी का भी उपयोग कर सकते हैं बूटस्ट्रैप टूलटिप्स.

8. छाया प्रभाव जोड़ें

आप टेक्स्ट और तत्वों में सीएसएस छाया प्रभाव जोड़ सकते हैं पाठ की छाया और यह डब्बे की छाया क्रमशः सीएसएस गुण।

सीएसएस पाठ छाया

पाठ की छाया CSS गुण पाठ में छाया और परतें जोड़ता है। पाठ की छाया संपत्ति पाठ पर लागू होने वाली छाया की अल्पविराम से अलग सूची को स्वीकार करती है।

टेक्स्ट-छाया CSS संपत्ति का सिंटैक्स:

/* आप टेक्स्ट-शैडो CSS प्रॉपर्टी के साथ 4 तर्कों का उपयोग कर सकते हैं:
ऑफ़सेट-एक्स, ऑफ़सेट-वाई, ब्लर-त्रिज्या, और रंग */
/* ऑफसेट-एक्स | ऑफसेट-वाई | धुंधला-त्रिज्या | रंग */
पाठ-छाया: 2px 2px 4px लाल;
/* रंग | ऑफसेट-एक्स | ऑफसेट-वाई | धुंधला-त्रिज्या */
पाठ-छाया: #18fa3e 1px 2px 10px;

ध्यान दें: रंग और धुंध-त्रिज्या तर्क वैकल्पिक हैं।

सम्बंधित: CSS टेक्स्ट-शैडो का उपयोग कैसे करें: ट्रिक्स और उदाहरण

उदाहरण के लिए:

पृष्ठभूमि: #e74c3c;
रंग: #fff;
फ़ॉन्ट-परिवार: लेटो;
टेक्स्ट-शैडो: 1px 1px rgba (123, 25, 15, 0.5), 2px 2px rgba (129, 28, 18, 0.51), 3px 3px rgba (135, 31, 20, 0.52), 4px 4px आरजीबीए (140, 33), 22, 0.53), 5px 5px आरजीबीए (145, 36, 24, 0.54), 6px 6px आरजीबीए (150, 38, 26, 0.55), 7px 7px आरजीबीए (154, 40, 28, 0.56), 8px 8px आरजीबीए (158, 42, 30, 0.57), 9px 9px आरजीबीए (162, 44, 31, 0.58), 10px 10px आरजीबीए (166, 45, 33, 0.59), 11px 11px आरजीबीए (169, 47, 34, 0.6), 12px 12पीएक्स आरजीबीए (173, 48, 36, 0.61), 13पीएक्स 13पीएक्स आरजीबीए (176, 50, 37, 0.62), 14पीएक्स 14पीएक्स आरजीबीए (178, 51, 38, 0.63), 15पीएक्स 15पीएक्स आरजीबीए (181, 52, 39, 0.64), 16px 16px आरजीबीए (184, 54, 40, 0.65), 17px 17px आरजीबीए (186, 55, 41, 0.66), 18px 18px आरजीबीए (189, 56, 42, 0.67), 19px 19px आरजीबीए (191, 57, 43, 0.68), 20px 20px आरजीबीए (193, 58, 44, 0.69), 21px 21px आरजीबीए ( 195, 59, 45, 0.7), 22px 22px आरजीबीए (197, 60, 46, 0.71), 23px 23px आरजीबीए (199, 61, 47, 0.72), 24px 24px आरजीबीए (201, 62, 47, 0.73), 25px 25px आरजीबीए (202, 62, 48, 0.74), 26px 26px आरजीबीए (204, 63, 49, 0.75), 27px 27px आरजीबीए (206, 64, 49, 0.76), 28px 28px आरजीबीए (207, 65, 50, 0.77), 29px 29px rgba (209, 65, 51, 0.78), 30px 30px rgba (210, 66, 51, 0.79), 31px 31px rgba (211, 67, 52, 0.8), 32px 32px rgba ( 213, 67, 52, 0.81, 33पीएक्स 33पीएक्स आरजीबीए (214, 68, 53, 0.82), 34पीएक्स 34px आरजीबीए (215, 69, 53, 0.83), 35px 35px आरजीबीए (216, 69, 54, 0.84), 36px 36px आरजीबीए (218, 70, 54, 0.85), 37px 37px आरजीबीए (219, 70, 55, 0.86), 38px 38px आरजीबीए (220, 71, 55, 0.87), 39px 39px आरजीबीए (221, 71, 56, 0.88, 40पीएक्स 40पीएक्स आरजीबीए (222, 72, 56, 0.89), 41पीएक्स 41पीएक्स आरजीबीए (223, 72, 57, 0.9), 42पीएक्स 42पीएक्स आरजीबीए (224, 73, 57, 0.91), 43पीएक्स 43पीएक्स आरजीबीए ( 225, 73, 57, 0.92), 44px 44px आरजीबीए (225, 73, 58, 0.93), 45px 45px आरजीबीए (226, 74, 58, 0.94), 46px 46px आरजीबीए (227, 74, 58, 0.95), 47px 47px आरजीबीए (228, 75, 59, 0.96), 48px 48px आरजीबीए (229, 75, 59, 0.97), 49px 49px आरजीबीए (230, 75, 59, 0.98), 50px 50px आरजीबीए (230, 76, 60, 0.99);

सीएसएस बॉक्स छाया

डब्बे की छाया संपत्ति का उपयोग HTML तत्वों पर छाया लागू करने के लिए किया जाता है।

बॉक्स-छाया CSS संपत्ति का सिंटैक्स

बॉक्स-छाया: [क्षैतिज ऑफसेट] [ऊर्ध्वाधर ऑफसेट] [धुंधला त्रिज्या] [वैकल्पिक फैलाव त्रिज्या] [रंग];

ध्यान दें: धुंधला, फैलाना और रंग पैरामीटर वैकल्पिक हैं।

सम्बंधित: CSS बॉक्स-शैडो का उपयोग कैसे करें: ट्रिक्स और उदाहरण

उदाहरण के लिए:

बॉक्स-छाया: rgba (0, 0, 0, 0.35) 0px 5px 15px;

यदि आप इस लेख में उपयोग किए गए संपूर्ण स्रोत कोड को देखना चाहते हैं, तो यहां है गिटहब भंडार.

आधुनिक सीएसएस ट्रिक्स का उपयोग करके अपनी वेबसाइट को स्टाइल करें

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

आपकी वेबसाइट पर आजमाने के लिए 11 सीएसएस टेक्स्ट शैडो उदाहरण

आप CSS में टेक्स्ट शैडो इफेक्ट्स के साथ बहुत कुछ कर सकते हैं, लेकिन यह जानना मुश्किल हो सकता है कि वास्तव में क्या संभव है। इन दृश्य उदाहरणों के साथ सहायता प्राप्त करें।

आगे पढ़िए

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