ग्राफिक्स के बिना सीएसएस गुब्बारा

काम के दौरान कई बार मुझे गुब्बारे (बादल, फ़ाइलेक्टर्स) बनाने की आवश्यकता का सामना करना पड़ा। अगर किसी को पता नहीं है, तो ये वे चीजें हैं, जिनके साथ उन्हें कॉमिक्स में आवाज वाले किरदारों के लिए इस्तेमाल किया जाता है। साइटों के इंटरफेस में, वे आमतौर पर तत्वों के सभी प्रकार के टूलटिप्स के लिए उपयोग किए जाते हैं।



एक बल्कि तुच्छ उपस्थिति (अगले करने के लिए एक त्रिकोण के साथ एक आयताकार ब्लॉक) के अगले गुब्बारे को टाइप करते हुए, मैंने सोचा, क्या यह संभव है कि ग्राफिक्स की मदद के बिना किसी भी तरह से इस मामले को डुबो देना? मूल रूप से, सीमा * संपत्ति का उपयोग करके सीएसएस तीर को खींचना सीधा है।



लब्बोलुआब यह है कि शून्य ऊंचाई और चौड़ाई के साथ एक ब्लॉक के लिए, एक हाथी के आकार का फ्रेम सेट किया जाता है, फिर उस तरफ जहां तीर इंगित करता है, फ्रेम की चौड़ाई शून्य पर सेट होती है, एक पारदर्शी रंग दो साइड फ्रेम पर सेट होता है (IE के लिए एक फिल्टर का उपयोग किया जाता है) और एक दृश्यमान फ्रेम होता है जो प्रतिनिधित्व करता है एक तीर। विधि हर जगह प्रबलित कंक्रीट का काम करती है।



लेकिन क्या होगा अगर तीर छाया देना चाहता है? या पूरे गुब्बारे को एक या दो पिक्सल का फ्रेम बना दें?



निम्नलिखित निर्णय दिमाग में आता है।



सीएसएस

.b-ungle {

position: absolute;



width: 20px;

height: 20px;

overflow: hidden;

}

.b-ungle__rotate {

position: absolute;



width: 20px;

height: 20px;



-webkit-transform: rotate(45deg);

-khtml-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

}









एचटीएमएल

<div class="b-ungle">

<div class="b-ungle__rotate"></div>

</div>









मानव भाषा में अनुवादित: एक ब्लॉक लिया जाता है, इसे चौड़ाई-ऊंचाई दी जाती है। एक और ब्लॉक इसमें रखा गया है, बिल्कुल तैनात। जो तब ट्रांसफॉर्म सीएसएस प्रॉपर्टी (साथ ही मोज़िला और वेबकिट के लिए इसके डेरिवेटिव) के साथ 45 डिग्री तक घूमता है। फिर यह सीएसएस-गुण शीर्ष, दाएं, नीचे, बाएं, और टोपी में चीज का उपयोग करके आंतरिक ब्लॉक को स्थानांतरित करने के लिए रहता है। आप कम से कम एक फ्रेम, कम से कम एक छाया, कम से कम एक अशोभनीय शब्द के साथ संलग्न ब्लॉक पर पेंट कर सकते हैं। और सभी अनावश्यक अतिप्रवाह का उपयोग करके काट दिया जाएगा: छिपा हुआ; बाहरी इकाई में।



लेकिन IE के बारे में क्या? और IE के लिए फ्रेमवर्क का एक गुच्छा है जिसके साथ आप CSS 3 की कई विशेषताओं का अनुकरण कर सकते हैं, जिसमें ट्रांसफ़ॉर्मिंग प्रॉपर्टी भी शामिल है। हालाँकि, मुझे ध्यान देना चाहिए कि IE अपने फ़िल्टर के साथ ब्लॉक को उन ब्राउज़रों की तुलना में थोड़े अलग तरीके से घुमाता है, जो ट्रांसफ़ॉर्मिंग प्रॉपर्टी का उपयोग करते हैं, इसलिए IE के तहत, आपको अन्य ब्राउज़र की तुलना में इनर ब्लॉक को थोड़ा अलग तरीके से स्थानांतरित करना पड़ सकता है। हालाँकि, सामान्य बात है।



यह काफी अच्छा लग रहा था, लेकिन पाँचवें बिंदु पर मौजूद एक खराब सिर को आराम नहीं देता। एक सामान्य लम्बी सूचक के साथ एक गुब्बारा बनाने का विचार था। और फिर चौकोर घड़ी की दिशा में मुड़ें - एक साधारण मामला।



जल्दी से नहीं कहा। मैं उन विवरणों को लोड नहीं करूंगा जो सभी उत्सुक लोग आसानी से कोड से निकाल सकते हैं, मैं केवल यह कह सकता हूं कि IE के कारण मुझे बहुत परेशान करना पड़ा और शुरू में सरल ब्लॉक संरचना को जटिल करना पड़ा। बाकी वही है। एक ब्लॉक घूमता है, दूसरा सभी अनावश्यक को काट देता है।



विधि के फायदे

- पीएनजी के साथ गड़बड़ करने की कोई जरूरत नहीं है (तीर किसी भी पृष्ठभूमि पर पूरी तरह से फिट बैठता है),

- विकर्ण रेखा की लंबाई सूत्र द्वारा आसानी से गणना की जाती है कर्ण का वर्ग पैरों के वर्गों के योग के बराबर है,

- आप बांस के बारे में थोड़ा और सोच सकते हैं और पूरी तरह से झुका हुआ तीर बना सकते हैं या इसे नीचे की तरफ से पेंट कर सकते हैं (मैंने अभी खुद को ऐसे काम के लिए तैयार नहीं किया है)

- अधिकांश आधुनिक ब्राउज़रों में, सब कुछ सही ढंग से प्रदर्शित होगा।



विधि के नुकसान

- एक .htc फ़ाइल का उपयोग किया जाता है, जिसका अर्थ है कि यदि IE में जावास्क्रिप्ट अक्षम है, तो कोई कोने नहीं होगा,

- ओपेरा में, कोने का नौवां संस्करण भी नहीं हो सकता है,

- IE और फिल्टर के साथ इसकी विलक्षणता के कारण, html- कोड थोड़ा बहुत है,

- डिजाइनर आसानी से एक गुब्बारा खींच सकता है जिसे इस तरह से नहीं बनाया जा सकता है,

- IE में कोई दिखाई देने वाले गोल कोने नहीं हैं (लेकिन यदि यह वांछित है तो यह ठीक करने योग्य है)।



मुझे नहीं पता कि कोई इस पद्धति का गंभीरता से उपयोग करेगा या नहीं। यहां तक ​​कि मैं मुख्य रूप से अपने दिमाग को बढ़ाने के लक्ष्य के साथ उनसे हैरान था। लेकिन यह विचार अपने आप में कुछ कपटी उद्देश्यों के लिए उपयुक्त हो सकता है। मैं यह भी पूरी तरह से मानता हूं कि इंटरनेट पर यह मैं नहीं था जिसने पहले उपरोक्त सभी के बारे में सोचा था, इसलिए, मैं पहली बार अभिनव होने का नाटक नहीं करता हूं।



टिप्पणियों से वैकल्पिक तरीके:

- घातक निकोलसग्लैगर . com / pure-css-speech-bubbles / demo ,

- jkeks www.lullabot.com/articles/announcing-beautytips-jquery-tooltip-plugin ,

- समदर्क rmcreative.ru ।



गुब्बारे के उपयोग के उदाहरण:

- z-store.ru (शीर्ष मेनू में),

- cnews.ru (दाईं ओर समाचार सूची में),

- games.rambler.ru (जब गेम ब्लॉक पर मंडराता है ),

- news.yandex.ru (उद्धरण के ब्लॉक),

- बिजनेस लिंच स्टूडियो आर्टमी लेबेदेव ,

- facebook.com (उपयोगकर्ता का "व्यवसाय कार्ड")।



पी। एस:

उन लोगों के लिए बोनस ट्रैक, जिन्होंने मेरा बहु-अक्षर बढ़ाया है:

- डार्थ वाडर बनाम लुक स्काईवॉकर ,

- स्टिव जॉब्स बनाम। बिल गेट्स ।