विषय पहले से ही काफी पस्त है, लेकिन मैं अपनी विधि साझा करना चाहता हूं। उन्होंने खुद ही तकनीक का आविष्कार किया, मैं मूल होने का ढोंग नहीं करता, हालाँकि अभी तक मुझे इस तरह की तकनीक का वर्णन नहीं मिला है।
तो, कार्य सीएसएस में तीर के साथ एक सुंदर टूलटिप बनाना है।
हम चित्रों के साथ विकल्प पर विचार नहीं करेंगे, हम छद्म तत्वों का उपयोग करेंगे: पहले और बाद में।
हाल ही में, सीएसएस परिवर्तनों का उपयोग करके इस तरह की तकनीक पर पहले ही विचार किया जा चुका है:
http://habrahabr.ru/blogs/css/136061/मैं एक और तरीका सुझाता हूं - पात्रों का उपयोग करना।
लेख के मूल संस्करण में प्रतीकों का उपयोग माना जाता है ◄,
article ,
article ,
article , लेकिन, जैसा कि
FTDeBUGgeR ने सही ढंग से नोट किया है, सब कुछ Android पर गिर गया। यह समस्या आम हो गई: एंड्रॉइड के लिए फोंट में, कोई तीर नहीं बचा है (out) और दाएं (।)।
पीछे हटने के लिए कहीं नहीं था, और मैंने तीर ↓, →, → और ← का उपयोग करने का फैसला किया, जो एंड्रॉइड पर भी थे। लेकिन फिर अचानक हाथ से एक तंबूरा उठ गया - आखिरकार, यह प्रतीक सभी दिशाओं के तीरों के लिए पर्याप्त है! इसके अलावा, बड़े ↑, ↑, → और not तीर वास्तव में तेज नहीं हैं, और एंड्रॉइड पर वे आम तौर पर गोल छोर होते हैं।
इसलिए, हम "हीरा" टूलटिप्स आकर्षित करेंगे।
आरंभ करने के लिए, चलो टूलटिप ब्लॉक को एक सुंदर ढाल पृष्ठभूमि, सीमा और छाया के साथ बनाएं:
font-size: 12px; color:#FFF; position:relative; width:300px; padding:20px; margin:20px; border: 1px solid #186F8F; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; background-color:#35acd7; background-image: -moz-linear-gradient( #29A2CE 0%, #3ABAE6 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #29A2CE), color-stop(100%, #3ABAE6)); background-image: -webkit-linear-gradient( #29A2CE 0%, #3ABAE6 100%); background-image: -o-linear-gradient( #29A2CE 0%, #3ABAE6 100%); background-image: -ms-linear-gradient( #29A2CE 0%, #3ABAE6 100%); background-image: linear-gradient( #29A2CE 0%, #3ABAE6 100%); -moz-box-shadow: 0 1px 0 #7FD2F1 inset, 0 0 7px 4px #666; -webkit-box-shadow: 0 1px 0 #7FD2F1 inset, 0 0 7px 4px #666; box-shadow: 0 1px 0 #7FD2F1 inset, 0 0 7px 4px #666;
हमारे उदाहरण में, हम 2 सीएसएस वर्गों - सामान्य गुणों के लिए 'टूलटिप' और साथ ही स्पष्टता के लिए, अलग-अलग दिशाओं के अलग-अलग तीर वर्गों का उपयोग करेंगे, उदाहरण के लिए, 'बायीं ओर'।
<div class="tooltip leftArrow"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis, felis a volutpat semper, leo erat sollicitudin tortor, eget vulputate elit erat sed eros. Donec diam nibh, mollis sit amet molestie vel, condimentum ut justo. Duis congue justo non enim ornare sed dapibus sapien elementum. Proin mollis tellus sit amet nibh luctus condimentum. Ut viverra orci nec erat feugiat vitae dictum neque aliquet. </div>
अगला, हमारे तीर जोड़ें। छद्म तत्वों को प्रदर्शित करने के लिए 16 वें वर्ण कोड के साथ एक सामग्री संपत्ति होगी।
चूंकि हम ब्लॉक पर बॉर्डर का उपयोग करते हैं, इसलिए बॉर्डर और एरो को देखना तार्किक और अच्छा है। लेकिन एक सीमा केवल एक ब्लॉक पर नहीं बल्कि एक पाठ पर लटकी जा सकती है। इसलिए, हमारे पास तीर के साथ 2 छद्म तत्व होंगे -: पहले और: बाद में, पहले तीर में सीमा का रंग होगा, दूसरा - पृष्ठभूमि का रंग। "सीमा" के सापेक्ष "पृष्ठभूमि" तीर की ऑफसेट का उपयोग करके आप सीमा की नकल प्राप्त कर सकते हैं। तीर छाया "बॉर्डर" तीर (: पहले) के लिए पाठ-छाया के माध्यम से बनाई जाएगी।
यदि आपको सीमाओं के बिना एक ब्लॉक की आवश्यकता है, तो कार्य सरल है और एक छद्म तत्व का उपयोग करने के लिए पर्याप्त है, उदाहरण के लिए :: पहले।
हम उपयोगकर्ता-चयन के माध्यम से अपने पाठ तीर के चयन पर भी रोक लगाते हैं:
.tooltip:before, .tooltip:after { content:"\2666"; font-family: monospace; font-size:50px; line-height:52px; text-align:center; position:absolute; overflow:hidden; width:50px; height:50px; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } .tooltip:before { color:#186F8F; } .tooltip:after { color:#35acd7; }
प्रतीक स्वयं 50x50 पिक्सल के ब्लॉक के केंद्र में स्थित है, और क्लिप संपत्ति का उपयोग करके, हम प्रतीक के हिस्से को काट देंगे, जिससे वांछित दिशा का त्रिकोणीय तीर ब्लॉक बन जाएगा।
मुख्य कठिनाई हमारे छद्म तत्वों के पूर्ण निर्देशांक को निर्धारित करना है, हालांकि फायरबग के साथ आप फ़ॉन्ट-आकार और तत्व की स्थिति के माध्यम से आवश्यक तीर आकार का चयन कर सकते हैं। "पृष्ठभूमि" तीर को स्थानांतरित करना महत्वपूर्ण है ताकि यह ब्लॉक बॉर्डर को कवर करे।
हम यह भी मानते हैं कि हमें किनारे के केंद्र में एक तीर होना चाहिए। ऐसा करने के लिए, हम शीर्ष या बायीं ओर 50% पोजीशनिंग का उपयोग करते हैं, साथ ही ब्लॉक की आधी ऊंचाई या चौड़ाई का एक नकारात्मक मार्जिन क्रमशः।
वैसे, मूल संस्करण ने एम का उपयोग किया, आकार की इकाई के रूप में पीएक्स नहीं, लेकिन हर किसी के प्रिय ओपेरा ने अफसोस से क्लिप में शब्दों को समझने से इनकार कर दिया, इसलिए मुझे पीएक्स का उपयोग करना पड़ा।
यहां हम एक बाएं तीर बनाते हुए देखते हैं, लेख के अंत में सभी 4 तीर विकल्पों (बाएं, दाएं, नीचे और ऊपर) के उदाहरणों के लिए एक लिंक है।
.leftArrow:before, .leftArrow:after { top:50%; left:-25px; margin-top:-25px; clip:rect(0px, 25px, 50px, 0px); } .leftArrow:before { -moz-text-shadow: -4px 0px 6px #666; -webkit-text-shadow:-4px 0px 6px #666; text-shadow: -4px 0px 6px #666; } .leftArrow:after { left:-24px; }
वास्तव में, यह सब, हम एक "हीरे टूलटिप के ट्रम्प कार्ड" से मिलते हैं:
IE के लिए, बस PIE को सुंदरता (गोल कोनों, छाया और ढाल पृष्ठभूमि) देखने के लिए जोड़ें।
एक माइनस था - टूलटिप पृष्ठभूमि के ऊर्ध्वाधर ढाल को बाएं और दाएं तीर पर नहीं दिखाया जा सकता है, लेकिन यह हमेशा ध्यान देने योग्य नहीं है, लेकिन एक नीरस पृष्ठभूमि रंग के साथ टूलटिप्स पर और बिल्कुल भी माइनस नहीं।
एक उदाहरण के डेमो और पूर्ण स्रोत कोड