सीएसएस: सीमा-त्रिज्या की दिलचस्प विशेषताएं

सीएसएस border-radius संपत्ति के साथ क्या किया जा सकता है? सामग्री के लेखक, जिसका अनुवाद हम प्रकाशित करते हैं, कहते हैं कि यह पहली नज़र में लगता है। विशेष रूप से, हम इस तथ्य के बारे में बात कर रहे हैं कि इस संपत्ति द्वारा गोल किए गए तत्वों के कोनों का आकार बहुत दिलचस्प हो सकता है।


हमारा सुझाव है कि border-radius का उपयोग करने की पेचीदगियों के बारे में बात करें।

पुराने गुण और आधुनिक वेब डिज़ाइन

इस साल, फ्रंटेंड कॉन्फ्रेंस ज्यूरिख में , राहेल एंड्रयू ने सीएसएस ग्रिड तकनीक की संभावनाओं पर एक प्रस्तुति दी। प्रस्तुति के अंत में, उसने पुराने सीएसएस गुणों के बारे में कुछ कहा और उसके शब्दों ने मेरी आंख को पकड़ लिया। अर्थात्, यह इस तरह लग रहा था: “छवि को विशेष रूप से अच्छी तरह से समर्थित border-radius संपत्ति का उपयोग करके गोल किया गया था। याद रखें कि पुराना CSS अभी भी मौजूद है और अभी भी उपयोगी हो सकता है। किसी भी प्रभाव को बनाने के लिए आपको हमेशा कुछ नया प्रयोग नहीं करना होगा। "

इस प्रदर्शन के कुछ समय बाद, मेरे साथ यह हुआ कि सर्कल केवल border-radius साथ किया जा सकता है। इस विचार से उत्साहित होकर, मैंने इस संपत्ति के साथ उचित रूप से निपटने का फैसला किया।

सीमा-त्रिज्या को माहिर करना

▍ एकल अर्थ

आइए बुनियादी बातों से शुरू करें। मुझे उम्मीद है कि आप इस उदाहरण से ऊब नहीं होंगे। आप CSS और border-radius संपत्ति से भी परिचित हो सकते हैं। यह काफी समय से अस्तित्व में है, और वे इसका उपयोग मुख्य रूप से एकल अर्थ को इंगित करने के लिए करते हैं। यह इस तरह दिखता है: border-radius: 1em । शायद यह 2010 में CSS3 सुविधाओं के बारे में सबसे ज्यादा चर्चा में से एक था, जब css3please.com डिजाइनर का सबसे अच्छा दोस्त था।

border-radius लिए एकल मान का उपयोग करते border-radius तत्व border-radius कोने इस मूल्य के अनुसार गोल होते हैं।


एक वर्ग के सभी कोनों को एक सीमा-त्रिज्या मान पर राउंड करता है

जैसा कि आप ऊपर दिए गए उदाहरण से देख सकते हैं, आप संख्या के बाद माप की इकाइयों को निर्दिष्ट करके न केवल निश्चित मान निर्धारित कर सकते हैं, जैसे कि px , rem या em , बल्कि एक प्रतिशत चिन्ह भी। यह आमतौर पर वर्ग-आधारित सर्कल बनाने के लिए उपयोग किया जाता है जब border-radius 50% पर सेट होती है। प्रतिशत मान तत्व की चौड़ाई और ऊंचाई पर आधारित है। इसलिए, जब इसे आयतों पर लागू किया जाता है, तो परिणामस्वरूप कोण सममित नहीं होंगे। यहाँ एक उदाहरण है जो border-radius: 110px और border-radius: 30% बीच के अंतर को प्रदर्शित करता है border-radius: 30% आयत पर लागू border-radius: 30% गुण।


एक आयत के कोनों को गोल करना

इस तथ्य पर ध्यान दें कि सही आयत के कोने विषम हैं और इसे याद रखें। थोड़ी देर बाद यह हमारे लिए उपयोगी होगा।

Values ​​चार अलग-अलग मूल्य

एक से अधिक border-radius मान का उपयोग करते समय, आप प्रत्येक कोने के लिए सेटिंग्स को समायोजित करते हैं, ऊपर बाईं ओर से शुरू करते हैं और दक्षिणावर्त चलते हैं। यहां, फिर से, आप प्रतिशत मान का उपयोग कर सकते हैं। उन्हें निश्चित मूल्यों के साथ भी मिलाया जा सकता है।


एक तत्व के चार कोनों के लिए पैरामीटर सेट करना

स्लैश द्वारा अलग किए गए आठ मान

मुझे लगता है कि आप में से कई ने पहले ही सब कुछ करने की कोशिश की है जो हमने ऊपर के बारे में बात की थी। अब कुछ वास्तव में दिलचस्प प्रयोगों का समय है। यदि मूल्यों को एक स्लैश द्वारा अलग किया जाता है और आठ तक निर्दिष्ट किया जाता है तो क्या होता है? सबसे पहले, विनिर्देश पर एक नज़र डालें। यह हमें बताता है कि यदि स्लैश से पहले और बाद में मान दिए गए हैं, तो स्लैश से पहले के मान क्षैतिज त्रिज्या और ऊर्ध्वाधर के बाद के मान निर्दिष्ट करते हैं। यदि कोई स्लैश नहीं है, तो दोनों रेडी एक समान होंगे।

तो, स्लैश से पहले मूल्य क्षैतिज दूरी के लिए जिम्मेदार हैं, और स्लैश के बाद के मूल्य ऊर्ध्वाधर के लिए जिम्मेदार हैं। यह सब अच्छा है, लेकिन यहां एक तार्किक सवाल उठता है: "हम किस बारे में बात कर रहे हैं?" आयताकार आकृतियों के लिए निर्धारित कोनों की गोलाई का प्रतिशत मान याद रखें? ऊर्ध्वाधर और क्षैतिज दूरी के लिए अलग-अलग पूर्ण मान वहां लागू किए गए थे और असममित रूप से गोल कोने मौजूद थे। यह वही है जो आप border-radius सेट करते समय स्लैश का उपयोग करके प्राप्त कर सकते हैं।

आइए उन प्रभावों की तुलना करें जो निम्नलिखित सेटिंग्स देते हैं: border-radius: 4em 8em और border-radius: 4em / 8em । परिणाम बहुत अलग होंगे।


बाएं तत्व के सममित कोण एक वृत्त के एक चौथाई हैं, और बाएं तत्व के असममित कोण एक दीर्घवृत्त के भाग हैं

ईमानदार होने के लिए, उपरोक्त सेटिंग्स को लागू करने के परिणामस्वरूप प्राप्त आंकड़े अजीब लगते हैं। हालांकि, यह मत भूलो कि निम्नलिखित मापदंडों का उपयोग करके मंडलियां बनाई गई हैं: border-radius: 50% । सर्कल को इस तथ्य के कारण प्राप्त किया जाता है कि एक तरफ को परिभाषित करने वाले दो मूल्यों को जोड़ा जाता है और 100% (50% + 50% = 100%) प्राप्त होते हैं और मूल वर्ग से कोई सीधी रेखाएं नहीं होती हैं। यदि आप border-radius संपत्ति को निर्धारित करने के लिए उपयोग किए जाने वाले आठ मूल्यों के बारे में एक ही भावना में सोचते हैं, तो यह पता चला है कि उनकी मदद से आप एक आंकड़ा का वर्णन कर सकते हैं जो एक गिटार पिक या एक जीवित जीव की तरह दिखता है।


एक स्लैश द्वारा अलग किए गए 8 मूल्यों को लागू करने के परिणामस्वरूप चित्रा


एक आकृति बनाने वाले चार अतिव्यापी ईलिप्स

मुझे इसकी आदत पड़ने में थोड़ा समय लगा। कभी-कभी इन सभी निर्माणों को समझना मुश्किल हो सकता है। यदि आप border-radius साथ अनुकूलन करने वाले तत्वों के जटिल रूपों से आकर्षित हैं, तो आप इस छोटे उपकरण का उपयोग कर सकते हैं।

परिणाम

अब जब आप जानते हैं कि border-radius सेट करते समय आप 8 मानों का उपयोग कर सकते हैं, तो यदि आपने उपर्युक्त उपकरण की कोशिश की, तो आप थोड़ी निराशा महसूस कर सकते हैं, क्योंकि यह आपको प्रत्येक मूल्य को स्वतंत्र रूप से नियंत्रित करने की अनुमति नहीं देता है। यदि हां, तो यहां , विशेष रूप से आपके लिए, इसका संस्करण जो सभी आठ मूल्यों के स्वतंत्र कॉन्फ़िगरेशन का समर्थन करता है। इससे पहले कि आप इसका इस्तेमाल करें, 1984 की घोस्टबस्टर्स फिल्म की एक बातचीत याद करें:

- धाराओं को पार न करें।
- क्यों?
- लेकिन यह बुरा होगा।

तथ्य यह है कि यदि आप मैनिपुलेटर्स को स्थानांतरित करते हैं ताकि वे आंकड़े के एक तरफ को काट दें, तो यह व्यवहार करना शुरू कर देगा ... चलो बस कहते हैं - यह अप्रत्याशित रूप से व्यवहार करना शुरू कर देगा। मैं क्या कह सकता हूं - अपने लिए देखें । अंत में, यह एक सार्वभौमिक तबाही की ओर नहीं ले जाएगा, लेकिन ऐसा करते समय, याद रखें कि हमने आपको चेतावनी दी थी।

प्रिय पाठकों! क्या आप सीमा-त्रिज्या सीएसएस संपत्ति का उपयोग करते हैं?