CSS3 का उपयोग करके उपकरण बनाना

सभी को नमस्कार!
पहले से ही कई बार मुझे सामान्य टूलटिप बनाने के लिए कहा गया था, जो इस तरह के तीर के साथ था। सब कुछ ठीक हो जाएगा: राउंड के साथ एक ब्लॉक पकाया जाता है, यहां से त्रिकोण और वॉयला लिया। हालांकि, सब कुछ इतना सरल नहीं है। आखिरकार, डिजाइनरों की कल्पना की उड़ान महान है। या तो उनके पास ढलान के साथ तीर हैं, फिर उनके पास फ्रेम हैं, फिर छाया है। आप निश्चित रूप से, तस्वीरों में सब कुछ गश कर सकते हैं, लेकिन यह पुराने ढंग का अव्यवहारिक है। कम से कम रैपरों के एक समूह के कारण, ताकि सब कुछ सभी दिशाओं में फैल जाए।
यह सब सीएसएस के साथ बिल्कुल सॉल्व हो गया, अगर आप थोड़ी कल्पना को शामिल करें।
शब्दों से कर्मों तक।

मुझे तुरंत कहना होगा कि सभी उदाहरण लेख के निचले भाग में लिंक पर हैं। लेकिन कोई भी "उच्च मामलों" को प्रतिबिंबित करने वाली पोस्ट नहीं पढ़ सकता है, क्योंकि यहां कुछ भी अलौकिक नहीं है।

तो, हम वर्कपीस करते हैं।
हमें एक div और 1 या 2 छद्म तत्वों की आवश्यकता होगी।

div{ position:relative; display:inline-block; padding:10px; min-height:30px; min-width:100px; font-family:'Trebuchet MS'; margin-right:30px; text-align:left; } div:before, div:after{ content:''; position:absolute; } 

फ्रेम के साथ टूलटिप

टूलटिप को ही गोल करें और फ्रेम बनाएं। फिर हम एक तीर के साथ एक छद्म तत्व को निलंबित कर देते हैं और इसे बदलने की मदद से हम पहले इसे मोड़ते हैं और फिर इसे झुकाते हैं। नतीजतन, हम एक झुका हुआ समांतर चतुर्भुज प्राप्त करते हैं। हम इसे एक फ्रेम देते हैं और z-index के माध्यम से: -1 हम इसे "अंडर" मेन ब्लॉक में छिपाते हैं। लेकिन अब हमारे पास तीर पर टूलटिप फ्रेम है। ऐसा करने के लिए, एक और छद्म तत्व लें और इसे इस फ्रेम के बिल्कुल ऊपर लगा दें, जिससे बैकग्राउंड का रंग टूलटिप के समान हो जाए। वह सब है। कोड नीचे है।

 .t1{ border-radius:10px; background:#efefef; border:1px solid #777; } .t1:before{ bottom:-5px; left:10px; width:20px; height:10px; -webkit-transform:rotate(-30deg) skewX(-45deg); -moz-transform:rotate(-30deg) skewX(-45deg); -o-transform:rotate(-30deg) skewX(-45deg); -ms-transform:rotate(-30deg) skewX(-45deg); background:#efefef; z-index:-1; border:1px solid #777; } .t1:after{ left:13px; bottom:-1px; width:15px; height:1px; background:#efefef; } 

तीर के साथ सरल टूलटिप

यहां सब कुछ सरल है। जैसा कि मैंने परिचय में लिखा है: हम एक ब्लॉक लेते हैं और एक छद्म तत्व के माध्यम से एक त्रिकोण लटकाते हैं।

 .t2{ background:#333; border-radius:5px; color:#ccc; } .t2:before{ left:10px; bottom:-10px; width:0px; height:0px; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #333; } 

छाया के साथ टूलटिप

यहां, लगभग सबकुछ पहले संस्करण के समान है, बस एक छाया जोड़ें।
और हम जेड-इंडेक्स को सकारात्मक बनाते हैं (या बिल्कुल नहीं), क्योंकि एक छाया एक छाया है और एक सहायक छद्म तत्व द्वारा छिपाया नहीं जा सकता है। तुरंत, मैं ध्यान देता हूं कि इस डिजाइन का तात्पर्य नीचे के स्थान के टूलटिप में आरक्षण से है।

 .t3:before{ bottom:-4px; right:10px; width:20px; height:10px; -webkit-transform:rotate(30deg) skewX(45deg); -moz-transform:rotate(30deg) skewX(45deg); -ms-transform:rotate(30deg) skewX(45deg); -o-transform:rotate(30deg) skewX(45deg); background:#efefef; z-index:1; box-shadow:4px 5px 5px 0px #777; } 

उदाहरण में, एक ढाल के साथ एक टूलटिप है, लेकिन मैं इसका वर्णन नहीं करूंगा, क्योंकि सब कुछ वहाँ सादृश्य द्वारा किया जाता है। केवल "पूर्वाभास" को जोड़ा जाता है, जो मेरे कथन का विषय नहीं है।

पारभासी टूलटिप

बदले में, यह एक तीर के साथ "सामान्य टूलटिप" से अलग नहीं है। आरजीबीए और जाने के माध्यम से पृष्ठभूमि निर्धारित करें। आदेश के लिए, मैंने इसे भी इत्तला दे दी।

 .t5:before{ left:15px; top:-10px; width:0px; height:0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid rgba(51,51,51,0.5); -webkit-transform:skewX(45deg); -moz-transform:skewX(45deg); -ms-transform:skewX(45deg); -o-transform:skewX(45deg); } 

वह सब तरकीब है।
एक उदाहरण यहाँ है।

मैं कहूंगा कि यह पद अपनी नवीनता और विशिष्टता में नहीं है, यह "कुछ होने" या "जासूसी करने" की श्रेणी से अधिक संभावना है। चूंकि कई पूछते हैं, यह उपयोगी होगा।
आपका ध्यान देने के लिए धन्यवाद।