कस्टम सीएसएस स्क्रॉलबार बनाएं

सुंदर, आधुनिक स्क्रॉलबार डिज़ाइन करें जो हमारे सहज जनरेटर के साथ आपकी वेबसाइट की शैली से मेल खाते हों। कोई कोडिंग कौशल की आवश्यकता नहीं है!

नियंत्रण पॅनेल

8px
0px

Preview

स्क्रॉलबार पूर्वावलोकन सामग्री

यह आपके कस्टम स्क्रॉलबार के लिए एक प्रदर्शन क्षेत्र है. रीयल-टाइम परिवर्तन देखने के लिए बाईं ओर सेटिंग्स समायोजित करें।

Feature 1

आधुनिक वेबसाइटों और अनुप्रयोगों के लिए पूरी तरह से अनुकूलन स्क्रॉलबार।

Feature 2

विभिन्न ब्राउज़रों के लिए स्वचालित उपसर्ग के साथ क्रॉस-ब्राउज़र समर्थन।

लंबी पाठ सामग्री उदाहरण: Lorem ipsum dolor sit amet, consectetur adipiscing elit. इस घटना के बाद आप अपने शरीर में दर्द महसूस कर रहे हैं। यह आपके लिए न्यूनतम समय है, जो हमारे श्रम को कम करने के लिए श्रम करता है, और उसके बाद के जीवन में सुधार करता है। Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. सिवाय इसके कि कोई भी व्यक्ति काम नहीं कर रहा है, लेकिन दोषी ठहराया गया है कि वह काम नहीं कर रहा है।

अधिक पाठ सामग्री: Curabitur pretium tincidunt lacus। गर्भावस्था के दौरान रक्त एक ओडियो। फलम, फल, तारपाई और कमोडो फेरेट्रा, एक इरोस बिबेंडम एलिट, नेक ल्यूक्टस मैग्ना फेलिस सॉलिसिटुडिन मौरिस। पूर्णांक in mauris eu nibh euismod gravida. यह बात कहने और वाहन चलाने पर जोर देती है। Donec lobortis risus a elit. Etiam tempor. अगर आप किसी भी तरह की बारिश कर सकते हैं, तो आप एक दूसरे के साथ तनाव महसूस कर सकते हैं। Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. एलिक़म फ़ौसीबस, एलिट यूटी डिक्टम एलिकेट, फेलिस निस्ल एडिपिसिंग सेपियन, सेड मालेसुदा डायम लैकस एगेट एरात। Cras mollis scelerisque nunc. नुल्लम आर्कु। एलिकम कॉन्सक्वेट। क्यूराबिटुर ऑग लोरेम, डैपिबस क्विस, लॉरेट एट, प्रीटियम एसी, निसी। एनीन मैग्ना निस्ल, मोलिस क्विस, मोलेस्टी ईयू, फ्यूगिएट इन, ओरसी। इन हैबिटेस प्लेटा डिक्टमस्ट।

पाठ का अंत: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptatem sit aspernatur aut odit aut fugit, sed quia conquuntur magni dolores eos qui ratione voluptatem sequi nesciunt. यदि आप किसी के प्रति उदासीन नहीं हैं, तो जो पेट में दर्द करता है, वह अमेट, संभलकर, आदिपिसी वेलिट, जो कुछ भी नहीं है, वह उस समय के बारे में नहीं जानता है जो श्रम और प्रेम के कारण होता है। यदि आप किसी भी समय कम समय के लिए व्यायाम करते हैं, तो क्या हमारे शरीर को श्रम के रूप में इस्तेमाल किया जाता है, लेकिन क्या यह एक तरल पदार्थ है जो परिणामस्वरूप होता है? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

जनरेट किया गया सीएसएस कोड

क्लिपबोर्ड पर कॉपी किया गया!
            

शक्तिशाली विशेषताएं

पूरी तरह से अनुकूलन

अपनी वेबसाइट के डिज़ाइन से पूरी तरह मेल खाने के लिए चौड़ाई, रंग, त्रिज्या और सीमाओं सहित अपने स्क्रॉलबार के हर पहलू को समायोजित करें।

क्रॉस-ब्राउज़र समर्थन

सीएसएस कोड उत्पन्न करें जो क्रोम, फ़ायरफ़ॉक्स, सफारी और एज सहित सभी आधुनिक ब्राउज़रों में काम करता है।

उपयोग के लिए तैयार प्रीसेट

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

वास्तविक समय पूर्वावलोकन

देखें कि हमारे इंटरैक्टिव पूर्वावलोकन पैनल के साथ समायोजन करते समय आपका स्क्रॉलबार कैसा दिखेगा।

अच्छी तरह से स्वरूपित, न्यूनतम सीएसएस कोड प्राप्त करें जो बिना किसी ब्लोट के आपकी परियोजना में एकीकृत होने के लिए तैयार है।

प्रभावी डिजाइन

एक सुसंगत उपयोगकर्ता अनुभव के लिए विभिन्न स्क्रीन आकारों और उपकरणों के लिए पूरी तरह से अनुकूल स्क्रॉलबार बनाएं।

इसका उपयोग कैसे करें:

1

अपना स्क्रॉलबार कस्टमाइज़ करें

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

2

जनरेट किए गए CSS को कॉपी करें

एक बार जब आप पूर्वावलोकन से संतुष्ट हो जाते हैं, तो जेनरेट किए गए कोड को अपने क्लिपबोर्ड पर कॉपी करने के लिए "कॉपी सीएसएस" बटन पर क्लिक करें।

3

अपने प्रोजेक्ट में जोड़ें

सीएसएस कोड को अपने प्रोजेक्ट की स्टाइलशीट में पेस्ट करें या इसे इनलाइन का उपयोग करें। अपने कस्टम स्क्रॉलबार को कार्रवाई में देखने के लिए किसी भी तत्व पर कक्षा लागू करें।

स्क्रॉलबार उदाहरण

गोल कोनों के साथ एक आधुनिक नीले स्क्रॉलबार का उदाहरण। कॉर्पोरेट वेबसाइटों और अनुप्रयोगों के लिए बिल्कुल सही।

यह स्क्रॉलबार गहरे नीले रंग के अंगूठे के साथ हल्के नीले रंग के ट्रैक का उपयोग करता है जो होवर करने पर रंग बदलता है।

पूरा प्रभाव देखने के लिए नीचे स्क्रॉल करें। अंगूठे में चिकने गोल किनारों के लिए 5px त्रिज्या होती है।

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

आधुनिक नीला

गोल किनारों के साथ एक चिकना नीला स्क्रॉलबार

न्यूनतम स्टाइल के साथ एक सूक्ष्म अंधेरे स्क्रॉलबार का उदाहरण। सामग्री-भारी वेबसाइटों के लिए आदर्श।

यह स्क्रॉलबार एक मध्यम ग्रे अंगूठे के साथ एक बहुत हल्के भूरे रंग के ट्रैक का उपयोग करता है जो होवर पर गहरा हो जाता है।

पूरा प्रभाव देखने के लिए नीचे स्क्रॉल करें। नरम किनारों के लिए अंगूठे में थोड़ा 3px त्रिज्या होता है।

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

सूक्ष्म अंधकार

सामग्री साइटों के लिए एक न्यूनतम डार्क स्क्रॉलबार

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

यह स्क्रॉलबार एक ज्वलंत हरे रंग के अंगूठे के साथ हल्के हरे रंग के ट्रैक का उपयोग करता है जो होवर पर अंधेरा हो जाता है।

पूरा प्रभाव देखने के लिए नीचे स्क्रॉल करें। अंगूठे में स्पष्ट गोल किनारों के लिए 6px त्रिज्या होती है।

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

वाइब्रेंट ग्रीन

इको-थीम वाली साइटों के लिए एक बोल्ड ग्रीन स्क्रॉलबार

आधुनिक डिजाइन के साथ एक स्टाइलिश बैंगनी स्क्रॉलबार का उदाहरण। रचनात्मक या पोर्टफोलियो वेबसाइटों के लिए बिल्कुल सही।

यह स्क्रॉलबार एक गहरे बैंगनी अंगूठे के साथ एक हल्के बैंगनी ट्रैक का उपयोग करता है जो होवर पर गहरा हो जाता है।

पूरा प्रभाव देखने के लिए नीचे स्क्रॉल करें। अंगूठे में साफ गोल किनारों के लिए 4px त्रिज्या होती है।

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

स्टाइलिश बैंगनी

रचनात्मक परियोजनाओं के लिए एक आधुनिक बैंगनी स्क्रॉलबार

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

Related Tools

उत्पन्न CSS3 आसानी से बदलता है

जटिल CSS3 बनाने के लिए एक शक्तिशाली, सहज ज्ञान युक्त उपकरण कोड लिखे बिना बदल जाता है। वास्तविक समय में परिवर्तनों की कल्पना करें और अपनी परियोजनाओं में उपयोग करने के लिए उत्पन्न सीएसएस की प्रतिलिपि बनाएं।

CSS3 संक्रमण जेनरेटर

चिकनी अस्पष्टता संक्रमण

सीएसएस से कम कनवर्टर

अपने CSS कोड को चर, नेस्टिंग और अधिक के साथ LESS में बदलें। तेज़, आसान और सुरक्षित।

SHA3-384 हॅश कॅल्क्युलेटर

जल्दी और आसानी से SHA3-384 हैश उत्पन्न करें

आयु कैलकुलेटर

हमारे सटीक आयु कैलकुलेटर के साथ वर्षों, महीनों और दिनों में अपनी सटीक आयु की गणना करें.

Convert JSON to SQL Effortlessly

एक क्लिक के साथ अपने JSON डेटा को SQL INSERT स्टेटमेंट में रूपांतरित करें। तेज़, सुरक्षित और पूरी तरह से ब्राउज़र-आधारित।