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

CSS प्रॉपर्टी जनरेटर हे स्लायडर आणि रंग निवडकांच्या संचातून दृश्य परिणामासाठी CSS कोड तयार करणारे साधन आहे; वापरकर्त्याला कोड हाताने लिहावा लागत नाही. यात चार परिणाम समाविष्ट आहेत: ग्रेडियंट, बॉक्स शॅडो, बॉर्डर रेडिअस आणि टेक्स्ट शॅडो. प्रत्येक पॅनेलमध्ये थेट पूर्वदृश्य दिसते आणि लगेच कॉपी करता येईल असा CSS तयार होतो.

हे काय तयार करते

• ग्रेडियंट: दोन रंगांमधील रेषीय किंवा रेडियल रंगबदल
• बॉक्स शॅडो: एखाद्या घटकाभोवती ऑफसेट, ब्लर, स्प्रेड, रंग आणि अपारदर्शकता नियंत्रणे असलेली बाह्य किंवा अंतर्गत सावली
• बॉर्डर रेडिअस: चारही कोपऱ्यांसाठी समान किंवा प्रत्येकासाठी स्वतंत्रपणे ठरवलेले गोलाकार कोपरे
• टेक्स्ट शॅडो: मजकुरामागील ऑफसेट, ब्लर, रंग आणि अपारदर्शकता नियंत्रणे असलेली सावली

प्रत्येक सेटिंगमुळे पूर्वदृश्य आणि तयार होणारा CSS एकाच वेळी अद्ययावत होतो, त्यामुळे कोड कॉपी करण्यापूर्वी बदल तपासता येतात.

CSS रेषीय ग्रेडियंटची गणना कशी करावी

रेषीय ग्रेडियंट सरळ रेषेच्या दिशेने एका रंगापासून दुसऱ्या रंगाकडे बदलतो. त्याची CSS रचना अशी आहे:

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

कोन अंशांमध्ये ० ते ३६० पर्यंत मोजला जातो. position1 आणि position2 यांद्वारे ग्रेडियंटच्या लांबीच्या टक्केवारीनुसार प्रत्येक रंग पूर्ण तीव्रतेने कुठे दिसेल हे ठरते.

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

जनरेटरची सुरुवातीची मूल्ये ९० अंशांचा कोन, #ff5f6d हा रंग ०% वर आणि #ffc371 हा रंग १००% वर अशी आहेत. त्यातून हे तयार होते:

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

पहिली ओळ साध्या रंगाचा राखीव पर्याय आहे. काही कारणाने ग्रेडियंट दाखवता न येणाऱ्या ब्राउझरसाठी तो वापरला जातो. दुसरी ओळ स्वतः ग्रेडियंटची आहे.

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

रेडियल ग्रेडियंट सरळ रेषेऐवजी मध्यबिंदूपासून बाहेरच्या दिशेने पसरतो:

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

हा जनरेटर नेहमी वर्तुळाकार रेडियल ग्रेडियंट तयार करतो. यात लंबवर्तुळाकार आकाराचा पर्याय किंवा मध्यबिंदू हलवण्याची सुविधा नाही; फक्त दोन रंग आणि त्यांची स्टॉप स्थाने बदलता येतात.

या साधनातील दोन्ही ग्रेडियंट प्रकारांमध्ये Color १ आणि Color २ निवडकांद्वारे निश्चित केलेले नेमके दोन रंग वापरले जातात. तिसरा रंग-स्टॉप जोडण्याचा पर्याय नाही.

CSS बॉक्स शॅडोचे सूत्र

बॉक्स शॅडो म्हणजे घटकाच्या कडांभोवती काढली जाणारी सावली:

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

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

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

डीफॉल्ट सेटिंग्जमध्ये (आडवा ऑफसेट ५px, उभा ऑफसेट ५px, ब्लर १०px, स्प्रेड ०px आणि २०% अपारदर्शकतेचा काळा रंग) साधनातून हे आउटपुट मिळते:

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

रंग निवडकाचा अपारदर्शकता स्लायडर ० ते १०० पर्यंत असतो आणि rgba() वापरत असलेल्या ०-ते-1 प्रमाणपट्टीत रूपांतरित केला जातो; त्यामुळे २०% चे मूल्य ०.२ होते.

CSS बॉर्डर रेडिअसचे सूत्र

बॉर्डर रेडिअस घटकाचे कोपरे गोल करतो. याचे दोन प्रकार आहेत:

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

चारही कोपऱ्यांसाठी एकच मूल्य असल्यास जनरेटर संक्षिप्त रूप लिहितो. मूल्ये वेगळी असल्यास ती याच क्रमाने लिहितो: वरचा-डावा, वरचा-उजवा, खालचा-उजवा आणि खालचा-डावा.

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

डीफॉल्ट रेडिअस प्रत्येक कोपऱ्यासाठी १०px आहे:

1border-radius: 10px;
2

वर्तुळाकार अवतार प्रतिमेसाठी सामान्यतः border-radius: 50% वापरले जाते; मात्र हे मूल्य या जनरेटरच्या स्लायडरच्या मर्यादेबाहेर आहे (० ते १०० पिक्सेल).

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

टेक्स्ट शॅडो बॉक्स शॅडोसारखीच असते, परंतु तिच्यात स्प्रेड मूल्य नसते आणि ती घटकाच्या बॉक्सऐवजी अक्षरांवर लागू होते:

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

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

डीफॉल्ट सेटिंग्जमध्ये (आडवा ऑफसेट २px, उभा ऑफसेट २px, ब्लर ३px आणि ५०% अपारदर्शकतेचा काळा रंग):

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 १ आणि Color २, समर्थित आहेत आणि प्रत्येकाचे स्वतःचे स्टॉप स्थान आहे.

अंतर्गत बॉक्स शॅडो आणि नेहमीच्या बॉक्स शॅडोमध्ये काय फरक आहे? नेहमीची बॉक्स शॅडो घटकाच्या कडांच्या बाहेर असते, जणू प्रकाश त्यामागे पडत आहे. अंतर्गत शॅडो कडांच्या आत असते; त्यामुळे घटक उंचावलेला न वाटता आत दाबलेला दिसतो.

गोलाकार कोपऱ्यांची मूल्ये वरचा-डावा, वरचा-उजवा, खालचा-उजवा, खालचा-डावा या क्रमाने का दिसतात? 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