CSS प्रॉपर्टी जनरेटर

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

यह क्या तैयार करता है

• ग्रेडिएंट: दो रंगों के बीच रैखिक या रेडियल रंग परिवर्तन
• बॉक्स शैडो: किसी एलिमेंट के चारों ओर ड्रॉप शैडो या इनसेट शैडो, जिसमें ऑफ़सेट, ब्लर, स्प्रेड, रंग और अपारदर्शिता के नियंत्रण होते हैं
• बॉर्डर रेडियस: गोल कोने, या तो चारों कोनों पर समान या प्रत्येक के लिए अलग-अलग
• टेक्स्ट शैडो: टेक्स्ट के पीछे की छाया, जिसमें ऑफ़सेट, ब्लर, रंग और अपारदर्शिता के नियंत्रण होते हैं

प्रत्येक सेटिंग पूर्वावलोकन और तैयार CSS, दोनों को एक साथ अपडेट करती है, इसलिए कोड कॉपी करने से पहले बदलावों की जाँच की जा सकती है।

CSS लीनियर ग्रेडिएंट की गणना कैसे करें

लीनियर ग्रेडिएंट एक सीधी रेखा के साथ एक रंग से दूसरे रंग में बदलता है। इसका CSS सिंटैक्स है:

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

कोण की माप डिग्री में 0 से 360 तक होती है। position1 और position2 यह निर्धारित करते हैं कि प्रत्येक रंग ग्रेडिएंट की लंबाई के कितने प्रतिशत पर पूरी तीव्रता तक पहुँचता है।

उदाहरण सहित गणना

जनरेटर के शुरुआती मान 90 डिग्री का कोण, #ff5f6d को 0% पर और #ffc371 को 100% पर रखते हैं। इससे यह तैयार होता है:

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

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

रेडियल ग्रेडिएंट सूत्र

रेडियल ग्रेडिएंट किसी रेखा के साथ फैलने के बजाय एक केंद्र-बिंदु से बाहर की ओर फैलता है:

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

यह जनरेटर हमेशा वृत्ताकार रेडियल ग्रेडिएंट तैयार करता है। इसमें अंडाकार आकार का विकल्प या केंद्र-बिंदु को स्थानांतरित करने का तरीका नहीं है; केवल दोनों रंगों और उनके स्टॉप स्थानों को बदला जा सकता है।

इस टूल में दोनों प्रकार के ग्रेडिएंट ठीक दो रंगों का उपयोग करते हैं, जिन्हें Color 1 और Color 2 पिकर से सेट किया जाता है। तीसरा कलर स्टॉप जोड़ने का कोई विकल्प नहीं है।

CSS बॉक्स शैडो सूत्र

बॉक्स शैडो किसी एलिमेंट के किनारों के चारों ओर बनाई गई छाया होती है:

1box-shadow: h-offset v-offset blur spread color;
2

h-offset और v-offset छाया को बाएँ/दाएँ और ऊपर/नीचे खिसकाते हैं। धनात्मक मान इसे दाएँ या नीचे धकेलते हैं; ऋणात्मक मान इसे बाएँ या ऊपर धकेलते हैं। blur छाया के किनारे को मुलायम करता है; बड़ी संख्या मुलायमपन को अधिक दूर तक फैलाती है। spread ब्लर लागू होने से पहले छाया का आकार बढ़ाता या घटाता है। ऑफ़सेट से पहले inset कीवर्ड जोड़ने पर छाया एलिमेंट की बॉर्डर के बाहर के बजाय उसके भीतर बनती है।

उदाहरण सहित गणना

डिफ़ॉल्ट सेटिंग में (5px क्षैतिज ऑफ़सेट, 5px ऊर्ध्वाधर ऑफ़सेट, 10px ब्लर, 0px स्प्रेड, 20% अपारदर्शिता वाला काला रंग), टूल यह आउटपुट देता है:

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

रंग पिकर का अपारदर्शिता स्लाइडर 0 से 100 तक चलता है और इसे rgba() द्वारा उपयोग किए जाने वाले 0-से-1 पैमाने में बदला जाता है, इसलिए 20% का मान 0.2 बन जाता है।

CSS बॉर्डर रेडियस सूत्र

बॉर्डर रेडियस किसी एलिमेंट के कोनों को गोल बनाता है। इसके दो रूप होते हैं:

1border-radius: value;                              /* same on all four corners */
2border-radius: top-left top-right bottom-right bottom-left; /* set separately */
3

जब चारों कोनों का मान समान होता है, तो जनरेटर संक्षिप्त रूप लिखता है। जब वे अलग-अलग हों, तो यह चारों मान इसी क्रम में लिखता है: ऊपर-बायाँ, फिर ऊपर-दायाँ, फिर नीचे-दायाँ और फिर नीचे-बायाँ।

उदाहरण सहित गणना

डिफ़ॉल्ट रेडियस प्रत्येक कोने पर 10px होता है:

1border-radius: 10px;
2

वृत्ताकार अवतार चित्र में आमतौर पर इसके बजाय border-radius: 50% का उपयोग किया जाता है, हालांकि यह मान इस जनरेटर के स्लाइडर की सीमा (0 से 100 पिक्सेल) से बाहर है।

CSS टेक्स्ट शैडो सूत्र

टेक्स्ट शैडो बॉक्स शैडो की तरह होती है, लेकिन इसमें स्प्रेड मान नहीं होता और यह किसी एलिमेंट के बॉक्स के बजाय अक्षरों पर लागू होती है:

1text-shadow: h-offset v-offset blur color;
2

उदाहरण सहित गणना

डिफ़ॉल्ट सेटिंग में (2px क्षैतिज ऑफ़सेट, 2px ऊर्ध्वाधर ऑफ़सेट, 3px ब्लर, 50% अपारदर्शिता वाला काला रंग):

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

जनरेटर किन रंग कोड को स्वीकार करता है

प्रत्येक रंग नियंत्रण में एक स्वैच और एक टेक्स्ट बॉक्स होता है। टेक्स्ट बॉक्स हेक्स रंग कोड लेता है, यानी CSS में पूरे समय उपयोग किया जाने वाला # रूप। चार लंबाइयाँ मान्य हैं: तीन अंक (#f00), चार अंक (#f00c), छह अंक (#ff0000) और आठ अंक (#ff0000cc)। छोटे रूप लंबे रूपों के समान रंग दर्शाते हैं, क्योंकि प्रत्येक अंक को दोहराया जाता है: #123 का रंग #112233 के समान है।

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

CSS प्रॉपर्टी जनरेटर का उपयोग कैसे करें

1. एक टैब चुनें: Gradient, Box Shadow, Border Radius या Text Shadow।
2. स्लाइडर, रंग पिकर और चेकबॉक्स समायोजित करें। प्रत्येक स्लाइडर के पास सटीक मान टाइप करने के लिए एक संख्या बॉक्स होता है। पूर्वावलोकन पैनल और CSS कोड, दोनों तुरंत अपडेट होते हैं।
3. "Copy to Clipboard" बटन चुनें और कोड को स्टाइलशीट या style एट्रिब्यूट में पेस्ट करें।
4. सभी चार टैब के प्रत्येक फ़ील्ड को उसके शुरुआती मान पर लौटाने के लिए "Reset" चुनें। इससे सक्रिय टैब भी वापस Gradient पर चला जाता है, भले ही उस समय कोई दूसरा टैब देखा जा रहा हो।

अक्सर पूछे जाने वाले प्रश्न

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

लीनियर और रेडियल ग्रेडिएंट में क्या अंतर है? लीनियर ग्रेडिएंट एक निर्धारित कोण पर सीधी रेखा के साथ रंग बदलता है। रेडियल ग्रेडिएंट एक केंद्र-बिंदु से बाहर की ओर रंग बदलता है। इस टूल का रेडियल विकल्प हमेशा वृत्ताकार आकार का उपयोग करता है।

क्या यह टूल दो से अधिक रंगों वाला ग्रेडिएंट बना सकता है? नहीं। लीनियर और रेडियल, दोनों ग्रेडिएंट पैनल ठीक दो रंगों, Color 1 और Color 2, का समर्थन करते हैं और प्रत्येक का अपना स्टॉप स्थान होता है।

इनसेट बॉक्स शैडो सामान्य शैडो से किस तरह अलग होती है? सामान्य बॉक्स शैडो एलिमेंट के किनारों के बाहर होती है, जैसे प्रकाश उसके पीछे पड़ रहा हो। इनसेट शैडो इसके बजाय किनारों के भीतर होती है, जिससे एलिमेंट ऊपर उठा हुआ दिखने के बजाय अंदर धँसा हुआ लगता है।

गोल-कोने के मान ऊपर-बायाँ, ऊपर-दायाँ, नीचे-दायाँ, नीचे-बायाँ क्रम में क्यों दिखाई देते हैं? CSS border-radius प्रॉपर्टी चार अलग-अलग मानों को इसी क्रम में लिखने की अपेक्षा करती है; यह क्रम ऊपर-बाएँ कोने से शुरू होकर घड़ी की दिशा में चलता है।

क्या तैयार किया गया CSS हर ब्राउज़र में काम करता है? ग्रेडिएंट, बॉक्स शैडो, बॉर्डर रेडियस और टेक्स्ट शैडो, सभी Chrome, Firefox, Safari और Edge के वर्तमान संस्करणों में समर्थित हैं। आउटपुट में कोई वेंडर प्रीफ़िक्स नहीं जोड़ा जाता।

संदर्भ

1. MDN Web Docs: CSS ग्रेडिएंट का उपयोग
2. MDN Web Docs: box-shadow
3. MDN Web Docs: border-radius
4. MDN Web Docs: text-shadow