आप में से जो लोग लंबे समय से HTML लिख रहे हैं, उन्हें यह तत्व याद हो सकता है। यह एक ब्राउज़र-विशिष्ट तत्व था जिसने स्क्रीन पर स्क्रॉलिंग टेक्स्ट का बैनर बनाया था। यह तत्व कभी नहीं जोड़ा गया एचटीएमएल इसके लिए विनिर्देश और समर्थन सभी ब्राउज़रों में व्यापक रूप से भिन्न है। इस तत्व के उपयोग के बारे में लोगों की अक्सर बहुत मजबूत राय थी - सकारात्मक और नकारात्मक दोनों। लेकिन चाहे आप इसे प्यार करते हों या नफरत करते थे, इसने ऐसी सामग्री बनाने के उद्देश्य की पूर्ति की जो बॉक्स की सीमाओं से अधिक दिखाई दे।
मजबूत व्यक्तिगत राय के अलावा, ब्राउज़र द्वारा इसे पूरी तरह से लागू नहीं किए जाने का एक कारण यह था कि इसे एक दृश्य प्रभाव माना जाता है और जैसे, इसे HTML द्वारा परिभाषित नहीं किया जाना चाहिए, जो इसे परिभाषित करता है संरचना। इसके बजाय, दृश्य या प्रस्तुति प्रभावों को CSS द्वारा प्रबंधित किया जाना चाहिए। और CSS3 यह नियंत्रित करने के लिए मार्की मॉड्यूल जोड़ता है कि ब्राउज़र कैसे जोड़ते हैं मार्की प्रभाव तत्वों को।
नई CSS3 गुण
CSS3 पांच जोड़ता है नए गुण आपकी सामग्री मार्की में कैसे प्रदर्शित होती है, इसे नियंत्रित करने में सहायता के लिए: अतिप्रवाह-शैली, मार्की-शैली, मार्की-प्ले-काउंट, मार्की-दिशा और मार्की-स्पीड।
अतिप्रवाह-शैली
अतिप्रवाह-शैली की संपत्ति (जिसकी चर्चा हमने लेख सीएसएस ओवरफ्लो में भी की थी) सामग्री बॉक्स को ओवरफ्लो करने वाली सामग्री के लिए पसंदीदा शैली को परिभाषित करती है। यदि आप मान को मार्की-लाइन या मार्की-ब्लॉक पर सेट करते हैं तो आपकी सामग्री बाएं/दाएं (मार्की-लाइन) या ऊपर/नीचे (मार्की-ब्लॉक) में अंदर और बाहर स्लाइड करेगी।
मार्की-शैली
यह गुण परिभाषित करता है कि सामग्री कैसे दृश्य (और बाहर) में जाएगी। विकल्प हैं स्क्रॉल, स्लाइड, और वैकल्पिक। स्क्रॉल पूरी तरह से स्क्रीन से सामग्री के साथ शुरू होता है, और फिर यह दृश्य क्षेत्र में तब तक चलता रहता है जब तक कि यह पूरी तरह से ऑफ स्क्रीन न हो जाए। स्लाइड पूरी तरह से ऑफ स्क्रीन सामग्री के साथ शुरू होती है और तब तक चलती है जब तक सामग्री पूरी तरह से स्क्रीन पर नहीं चली जाती है और स्क्रीन पर स्लाइड करने के लिए कोई और सामग्री नहीं बची है। अंत में, वैकल्पिक रूप से सामग्री को अगल-बगल से उछालता है, आगे और पीछे खिसकता है।
मार्की-प्ले-गिनती
MARQUEE तत्व का उपयोग करने की कमियों में से एक यह है कि मार्की कभी रुकता नहीं है। लेकिन स्टाइल प्रॉपर्टी मार्की-प्ले-काउंट के साथ आप एक विशिष्ट संख्या के लिए सामग्री को चालू और बंद करने के लिए मार्की सेट कर सकते हैं।
मार्की-दिशा
आप उस दिशा को भी चुन सकते हैं जिस दिशा में सामग्री को स्क्रीन पर स्क्रॉल करना चाहिए। आगे और पीछे के मान टेक्स्ट की दिशात्मकता पर आधारित होते हैं जब अतिप्रवाह-शैली मार्की-लाइन होती है और जब अतिप्रवाह-शैली मार्की-ब्लॉक होती है तो ऊपर या नीचे होती है।
मार्की-दिशा विवरण
अतिप्रवाह-शैली |
भाषा निर्देशन | आगे | उलटना |
|---|---|---|---|
मार्की-लाइन |
एल टीआर | बाएं | सही |
| आरटीएल | सही | बाएं | |
मार्की-ब्लॉक |
यूपी | नीचे |
मार्की-स्पीड
यह गुण निर्धारित करता है कि सामग्री कितनी जल्दी स्क्रीन पर स्क्रॉल करती है। मान धीमे, सामान्य और तेज़ हैं। वास्तविक गति सामग्री और इसे प्रदर्शित करने वाले ब्राउज़र पर निर्भर करती है, लेकिन मान धीमा होना चाहिए सामान्य से धीमा है जो तेज से धीमा है।
मार्की गुणों का ब्राउज़र समर्थन Support
आपको उपयोग करने की आवश्यकता हो सकती है विक्रेता उपसर्ग सीएसएस मार्की तत्वों को काम करने के लिए। वे इस प्रकार हैं:
| CSS3 | विक्रेता उपसर्ग |
|---|---|
अतिप्रवाह-एक्स: मार्की-लाइन; |
अतिप्रवाह-एक्स: -वेबकिट-मार्की; |
मार्की-शैली |
-वेबकिट-मार्की-शैली |
मार्की-प्ले-गिनती |
-वेबकिट-मार्की-पुनरावृत्ति |
मार्की-दिशा: आगे|रिवर्स; |
-वेबकिट-मार्की-दिशा: आगे | पीछे की ओर; |
मार्की-स्पीड |
-वेबकिट-मार्की-स्पीड |
| कोई समकक्ष नहीं | -वेबकिट-मार्की-वृद्धि |
अंतिम संपत्ति आपको यह परिभाषित करने की अनुमति देती है कि मार्की में स्क्रीन पर सामग्री स्क्रॉल के रूप में कदम कितने बड़े या छोटे होने चाहिए।
अपने मार्की को काम करने के लिए, आपको पहले विक्रेता के पहले वाले मान रखने चाहिए और फिर CSS3 विनिर्देश मानों के साथ उनका पालन करना चाहिए। उदाहरण के लिए, यहां एक मार्की के लिए सीएसएस है जो 200x50 बॉक्स के अंदर पाठ को बाएं से दाएं पांच बार स्क्रॉल करता है।
{
चौड़ाई: 200px; ऊंचाई: 50 पीएक्स; व्हाइट-स्पेस: अब्रैप;
बहुत ज्यादा गोपनीय;
अतिप्रवाह-एक्स:-वेबकिट-मार्की;
-वेबकिट-मार्की-दिशा: आगे;
-वेबकिट-मार्की-शैली: स्क्रॉल;
-वेबकिट-मार्की-स्पीड: सामान्य;
-वेबकिट-मार्की-वृद्धि: छोटा;
-वेबकिट-मार्की-पुनरावृत्ति: 5;
अतिप्रवाह-एक्स: मार्की-लाइन;
मार्की-दिशा: आगे;
मार्की-शैली: स्क्रॉल;
मार्की-गति: सामान्य;
मार्की-प्ले-काउंट: 5;
}