Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

त्वरित सुझाव: आपके UI-यूआई डिजाईन से मेल खाती हुई Scrollbar-स्क्रोलबार की स्टाइल बनाना

by
Length:LongLanguages:

Hindi (हिंदी) translation by Dee.P.Tree (you can also view the original English article)

यह सुझाव आपको आपके UI design-यूआई डिज़ाइन-यूज़र इंटरफ़ेस डिज़ाइन-उपयोगकर्ता आंतरफलक अभिकल्पना से मेल खाती हुई scrollbar-स्क्रोलबार का रूप और भाव को बेहतर बनाने में मार्गदर्शक बनेगा। हम देखेंगे कि Webkit browser-वेबकिट ब्राऊज़र हमें CSS-सीएसएस के संदर्भ में क्या उपलब्ध कराते हैं, साथ ही में हम अन्य ब्राउसर पे चलाने के लिए एक jQuery fallback-जे क्वेरी फॉलबैक-जे क्वेरी विकल्प का प्रयोग करेंगे।

क्या आप छोटे वैकल्पिक तरीके की तलाश में है?

यदि आपको आपकी वेबसाइट के किसी अंग के styling-स्टाइलिंग-रूप तैयार करने में सहायता की जरुरत है, तो किसी पेशेवर से मदद लेना ज्यादा जल्दी हो सकता है। Envato-एन्वाटो पे re-styling-रि-स्टाइलिंग-फिरसे रूप देने के लिए या सभी तरह के web components-वेब कंपोनेंट्स-वेबसाइट के अंगों को इच्छानुसार बनाने हेतु सहायता के लिए विशेषज्ञ मौजूद हैं।

Web component services on Envato Studio

ब्राउज़र के बारे में त्वरित टिप्पणी

जब हम Webkit-वेबकिट आधारित ब्राउज़र का संदर्भ दे रहे हैं, तब हम मुख्यतः Apple Safari-एप्पल सफारी और Google Chrome-गूगल क्रोम की बात कर रहे हैं। अभी दोनों साथ में मिलकर डेस्कटॉप ब्राउज़र के संपूर्ण बाजार में से ४०% से ज्यादा हिस्सा रखते हैं। Tablets-टैबलेट्स-टेबलेटों के लिए, Apple's iPad-एप्पल'ज़् आईपैड-एप्पल का आईपैड हमेशा Webkit-वेबकिट का प्रयोग करेगा, भले ही कोई भी कंपनी का ब्राउज़र उपयोग में लिया गया है। Google-गूगल ने भी उसकी Android OS-एंड्रॉइड ओएस-एंड्रॉइड ऑपरेटिंग सिस्टम में Chrome-क्रोम को शामिल किया है और Chromebooks-क्रोमबुक, बेशक, Google Chrome-गूगल क्रोम पे आधारित हैं।

इन आंकड़ों को देखकर लगता है कि स्क्रोलबार का रूप तैयार करने की प्रक्रिया-स्टाइलिंग का भविष्य बहुत ही उज्जवल होना चाहिए!


चरण १:एक सरल पृष्ठ स्क्रोलबार के साथ

इससे पहले कि हम 'CSS-सीएसएस के द्वारा स्क्रोलबार का स्टाइलिंग' के मुख्य विषय में आगे बढ़ें, हमें एक काम करते हुए नमूने की जरुरत है; एक पृष्ठ जिसमे स्क्रोलबार हो। स्क्रोलबार को देखा जा सकता है, अगर:

  • विषयवस्तु दिखाई दे रही window-विंडो के क्षेत्र से बड़ा हों (दांईं तरफ एक स्क्रोलबार दिखेगा)।
  • textarea में पर्याप्त text-टेक्स्ट-पाठ हो ताकि स्क्रोलबार दिखे।
  • एक दूसरा पृष्ठ दिखाने के लिए iframe का प्रयोग किया गया है।
  • div और अन्य कोई block element-ब्लॉक एलिमेंट का overflow property-प्रॉपर्टी सुनिश्चित किया है।

इस नमूने के लिए, हम अंतिम विकल्प से आगे बढ़ेंगे। ये रहा मेरा initial markup-इनिशियल मार्कअप-शरुआती मार्कअप:

यह बहुत ही बनावटी विषयवस्तु के साथ एक div है। और ये रहा शरुआती CSS-सीएसएस, जो नियत मापों-फिक्स्ड डायमेंशन को सुनिश्चित करता है और क्षैतिज-होरिजोंटल और ऊर्ध्व-वर्टीकल स्क्रोलबार को उत्प्रेरित-ट्रिगर करता है।

आपको इसके जैसा कुछ दिखना चाहिए:


चरण २: Webkit-वेबकिट ब्राउज़र से शुरुआत करना

स्क्रोलबार को लक्ष्य बनाने के लिए, Webkit-वेबकिट ब्राउज़र में कुछ समय पहले (बहुत साल) CSS Pseudo Elements-सीएसएस स्यूडो एलिमेंट्स-सीएसएस आभासी एलिमेंट प्रस्तुत किए गए थे, जो आपकी theme-थीम-विषय के अनुरूप पृष्ठ को रूप देने के लिए-स्टाइल करने के लिए सुविधा उपलब्ध करता है।

-webkit- prefix-प्रीफिक्स-उपसर्ग और webkit-वेबकिट की custom scrollbar properties-कस्टम स्क्रोलबार प्रॉपर्टीज-स्क्रोलबार के इच्छानुसार बदल सके ऐसे गुण का प्रयोग करके, चलिए कुछ 'स्टाइल' करते हैं। ध्यान में रहे कि मैं आसानी से समझ में आए इसलिए सिर्फ मूलभूत CSS-सीएसएस प्रॉपर्टीज को, टिप्पणियों में विवरण के साथ, उपयोग में ले रहा हूँ।

When this pseudo element is present, WebKit will turn off its built-in scrollbar rendering and just use the information provided in CSS. (जब ये स्यूडो एलिमेंट हाजिर है, तब वेबकिट उसकी पूर्वस्थापित स्क्रोलबार को प्रस्तुत करने की सुविधा को बंध कर देगा और सीएसएस में दी गई माहिती को ही प्रयोग में लेने देगा।) - Surfin' Safari-सर्फिन सफारी

और अब अन्य स्यूडो-एलिमेंट्स के लिए:

इस CSS-सीएसएस को शामिल करने के बाद आप नीचे दी गई इफ़ेक्ट-प्रभाव देख पाएंगे (फिरसे, सिर्फ Webkit-वेबकिट ब्राउज़रों के लिए)।

अंदाजा लगाएंगे? Internet Explorer-इन्टरनेट एक्स्प्लोरर की अपनी खुदकी स्क्रोलबार की स्टाइल है!

वह सही है - वास्तव में, IE-आइ ई CSS-सीएसएस के माध्यम से  स्क्रोलबार को स्टाइलिंग करने की सुविधा का कभी भी समर्थन देने में सर्वप्रथम ब्राउज़र था। यह IE 5.5-आइ ई ५.५ के दिनों की बात है, लेकिन सिर्फ रंग बदला जा सकता है।

इन properties-प्रॉपर्टीज को आज भी उपयोग में लिया जा सकता है, नमूने के तौर पर ये एक प्रॉपर्टी को IE 9 पे देखें;

देखें, ये कैसा दिखेगा:


चरण ३: गैर Webkit-वेबकिट ब्राउज़र के लिए दूसरे फॉलबैक-विकल्प

Webkit-वेबकिट के बारे में इतना पर्याप्त है। Firefox-फ़ायरफ़ॉक्स, IE-आइ ई और ऑपेरा भी मस्ती में शामिल हो सकते हैं। उनके लिए हमारे पास एक बढ़िया fallback approach-फॉलबैक एप्रोच-वैकल्पिक तरीका, jScrollPane-जे स्क्रॉलपेन के स्वरूप में, है। यह jQuery-जे क्वेरी प्लगइन Kelvin Luck-केल्विन लक के द्वारा विकसित किया हुआ है और वह हमारे लिए आज तारक बनेगा।

Kelvin-केल्विन की वेबसाइट पे कई अच्छे उदाहरण है, लेकिन सामान्य प्रयोग हेतु हमें सिर्फ jQuery-जे क्वेरी और jScrollPane-जे स्क्रॉलपेन फाइलों को डाउनलोड करना रहेगा और उनको नीचे दिए गए तरीके से लागू करना होगा:

मात्र हमारी theme-थीम-विषय से अनुरूप होने के हेतु से, चलिए jquery. jscrollpane.css को खोलें और नीचे दिखाई गई पंक्तिओं-लाइन को हमारी color values-कलर वैल्यूज-रंग मूल्यों के साथ संपादित करें (परफॉरमेंस इम्प्रूवमेंट-निष्पादन उन्नति के लिए आप सभी शैलिओं-स्टाइल्स को आपकी खुद की फाइलों में रख सकते है):

आप जो Firefox-फ़ायरफ़ॉक्स में देखेंगे इसका screenshot-स्क्रीनशॉट ये रहा:


समापन

Web Apps-वेब एप्प्स-इन्टरनेट से चलती एप्लीकेशन-अनुप्रयोग जैसे की Gmail-जीमेल और Google+-गूगल+ (अन्य कईं उदाहरणों के साथ) ने इस विचार को कबका अपना लिया हैं और यदि यह गति से चलता रहा, तो शायद Firefox-फायरफॉक्स और IE-आइ ई भी उनके खुद के समाधान दे देगा।

मुझे आशा है कि आपने यह त्वरित सुझाव का आनंद लिया होगा और मैं आपके डिजाईन के काम में स्क्रोलबार से क्या करते है यह जानने के लिए उत्सुक हूँ!


आगे के लिए संसाधन

Envato Market-एन्वाटो मार्किट पे इच्छानुसार बदल सके ऐसी-कस्टमाइज़ेबल स्क्रोलबार

अगर आप पूर्वनिर्मित-रेडीमेड उपाय खोज रहे है, तो Envato Market-एन्वाटो मार्किट चुनिंदा scrollbars-स्क्रोलबार प्रस्तुत करता है जिनको इफेक्ट्स-प्रभावों की श्रेणी हासिल करने के लिए आप आपकी वेबसाइट में शामिल-प्लग कर सकते है। उनमें से कुछ ये रही:

१. Lazybars - Themable responsive scrollbar jQuery plugin-लेजीबार्स-थीमेबल रिस्पॉन्सिव स्क्रोलबार जेक्वेरी प्लगइन-लेजीबार्स-विषय आधारित अनुक्रियाशील स्क्रोलबार बना सके ऐसा jQuery प्लगइन 

Lazybars-लेज़ीबार्स उपयोग में सरल, थीम-विषय के अनुरूप स्क्रोलबार बनानेवाला jQuery-जे क्वेरी प्लगइन है। आप इन स्क्रोलबार को आपकी वेबसाइट के कोई भी अंग जो स्क्रोलेबल-scrollable हो उसमे एक class-क्लास का नाम शामिल करके लागु किया जा सकता है।

Lazybars-लेजीबार्स के साथ आई हुई themes-थीम्स-विषयों का उपयोग करें, या सरल CSS-सीएसएस के द्वारा अपनी खुदकी बनाएं।

Lazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - Themable responsive scrollbar jQuery plugin-लेजीबार्स-थीमेबल रिस्पॉन्सिव स्क्रोलबार जेक्वेरी प्लगइन-लेजीबार्स-विषय आधारित अनुक्रियाशील स्क्रोलबार बना सके ऐसा jQuery प्लगइन

२. Fancy Scrollbar-Wordpress-फैंसी-रोचक स्क्रोलबार - वर्डप्रेस

'Fancy Scrollbar-Wordpress"-"फैंसी-रोचक स्क्रोलबार - वर्डप्रेस" एक प्लगइन है जो वर्डप्रेस साइट्स पे इच्छानुसार-कस्टम स्क्रोलबार बना सकता है। उसमें इच्छानुसार बदलाव करने के लिए कई सारे विकल्प है। आप रंग, इफेक्ट्स-प्रभावों, scroll delay-स्क्रॉल डिले-स्क्रॉल की क्रिया में डिले, rail strip-रेल स्ट्रिप, और अन्य कई parameter-पैरामीटर-प्राचल में इच्छानुसार बदलाव कर सकते है।

Fancy Scrollbar - WordPress
Fancy Scrollbar-Wordpress-फैंसी-रोचक स्क्रोलबार - वर्डप्रेस

३. Awesome Custom Scrollbar-ओसम कस्टम स्क्रोलबार-मर्ज़ी के मुताबिक बदल सके ऐसी-कस्टमाइज़ेबल अद्भुत स्क्रोलबार

Awesome Custom Scrollbar-ओसम कस्टम स्क्रोलबार एक इच्छानुसार बहुत बदलाव कर सके ऐसा आपकी वर्डप्रेस वेबसाइट के लिए कस्टम  स्क्रोलबार का jQuery-जे क्वेरी प्लगइन है। इस प्लगइन से आप आपके वेबपेज की स्क्रोलबार को कस्टमाइज कर सकते है, आप कस्टम स्क्रोलबार को shortcode-शॉर्टकोड से कहीं भी एम्बेड-लागु कर सकते है, थीम फाइलों में भी।

Awesome Custom Scrollbar
Awesome Custom Scrollbar-ओसम कस्टम स्क्रोलबार-मर्ज़ी के मुताबिक बदल सके ऐसी-कस्टमाइज़ेबल अद्भुत स्क्रोलबार

४. DZS Scroller-डीजेडएक्स स्क्रोलर

DZS Scroller-डीजेडएक्स स्क्रोलर आपकी वेबसाइट के लिए एक स्क्रोलर प्रदान करता है जिसको आप CSS-सीएसएस से बहुत आसानी से कस्टमाइज कर सकते है, अगर साथ में आई हुई तीन skins-स्किन-स्वरूप आपके लिए पर्याप्त नहीं हैं। वह बेहतर काम करने की विशेषताओं के साथ आता है जैसे कि माउस को उसके ऊपर रखकर क्लिक किए बगैर ही-होवर से स्क्रॉल करना या माउस के दूर होते ही धीमे से अदृश्य-फेड होना। और वह iPhone-आईफोन/iPad-आईपैड पे काम करता है।

DZS Scroller
DZS Scroller-डीजेडएक्स स्क्रोलर

५. CSS3 Scrollbar Styles-सी एस एस थ्री स्क्रोलबार स्टाइल्स

यह आपकी वेबसाइट के लिए उपयोग करने में आसान, सुन्दर और रंगबिरंगी CSS3-सीएसएस थ्री स्क्रोलबार है। सिर्फ इसको आपके मौजूदा CSS-सीएसएस में शामिल करें और नई CSS3-सीएसएस थ्री स्क्रोलबार का आनंद उठाएं।

CSS3 Scrollbar Styles
CSS3 Scrollbar Styles-सी एस एस थ्री स्क्रोलबार स्टाइल्स
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.