आकार-बाहर - सीएसएस-ट्रिक्स

shape-outsideसंपत्ति नियंत्रण कैसे सामग्री एक जारी तत्व का सीमांकन-बॉक्स के आसपास लपेटो जाएगा। आमतौर पर ऐसा इसलिए होता है ताकि पाठ एक वृत्त, दीर्घवृत्त या बहुभुज जैसे आकार से अधिक परिलक्षित हो सके:

.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )

यह ध्यान रखना महत्वपूर्ण है कि यह संपत्ति केवल अभी के लिए फ़्लोट किए गए तत्वों पर काम करेगी, हालांकि यह भविष्य में बदलने की संभावना है। shape-outsideसंपत्ति भी संक्रमण या एनिमेशन के साथ हेरफेर किया जा सकता।

मूल्यों

• circle(): गोलाकार बनाने के लिए।
• ellipse(): अण्डाकार आकार बनाने के लिए।
• inset(): आयताकार आकार बनाने के लिए।
• polygon(): 3 या अधिक कोने के साथ किसी भी आकार बनाने के लिए।
• url(): पहचानता है कि पाठ को चारों ओर लपेटने के लिए किस छवि का उपयोग किया जाना चाहिए।
• initial: फ्लोट क्षेत्र अप्रभावित है।
• inherit: shape-outsideमाता-पिता से विरासत में मिली संपत्ति ।

निम्नलिखित मूल्यों की पहचान है कि बॉक्स मॉडल के संदर्भ को किस आकार में स्थिति के लिए इस्तेमाल किया जाना चाहिए:

• margin-box
• padding-box
• border-box

इन मूल्यों को अंत तक जोड़ा जाना चाहिए, उदाहरण के लिए shape-outside: circle(50% at 0 0) padding-box:। डिफ़ॉल्ट रूप से margin-boxसंदर्भ का उपयोग किया जाएगा।

दीर्घवृत्त ()

.element ( shape-outside: ellipse(150px 300px at 50% 50%); )

ellipse()समारोह एक्स के लिए त्रिज्या मूल्यों की आवश्यकता है, अंडाकार निर्देशांक द्वारा पीछा के y अक्ष अपने सीमांकन बॉक्स के भीतर आकार के केंद्र स्थित करने के लिए। उदाहरण के लिए ऊपर दिए गए उदाहरण से .elementdiv के ऊर्ध्वाधर और क्षैतिज केंद्र में दीर्घवृत्त का केंद्र होगा :

यद्यपि ऊपर दिया गया डेमो यह सुझाव दे सकता है कि हम divस्वयं के आकार को बदल रहे हैं , यदि हम सीमाएँ और एक पृष्ठभूमि-छवि जोड़ते हैं, तो हम पाएंगे कि बाउंडिंग बॉक्स वास्तव में अभी भी आयताकार है:

यह इस तरह से सोचना बेहतर हो सकता है: shape-outsideसंपत्ति के साथ हम एक तत्व के आसपास अन्य तत्वों के रिश्ते को बदल रहे हैं, न कि तत्व की ज्यामिति। यह तय करने के लिए कि हमें संपत्ति के shape-outsideसाथ उपयोग करना होगा clip-path(), जैसे कि इस उदाहरण में:

वृत्त()

.element ( shape-outside: circle(50%); )

यह फ़ंक्शन एक सर्कल बनाता है, और ऊपर दिए गए कोड उदाहरण में यह एक त्रिज्या के साथ एक सर्कल बना देगा जो कि ऊंचाई और चौड़ाई का आधा है .element। circle()समारोह भी आकार स्थिति के भीतर के लिए एक ही वाक्य विन्यास का उपयोग कर सकते हैं।

url ()

.element ( shape-outside: url('circle.png.webp'); )

इस उदाहरण में, हमारे पास दो फ़्लोट की गई छवियां हैं, जिनमें से एक पाठ के ब्लॉक के दोनों ओर है। चूंकि दोनों छवियों में shape-outsideसंपत्ति सेट है तो नीचे दिए गए पाठ उन दो फ़्लोट से बचेंगे।

यह shape-image-thresholdसंपत्ति को सेट करना भी संभव है जो ब्राउज़र को सूचित करेगा कि उनकी पारदर्शिता के आधार पर कौन सा पिक्सेल, आकार बनाना चाहिए। उदाहरण के लिए:

.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )

इस उदाहरण में केवल पिक्सेल जो आकार बनाएंगे उनमें 50% पारदर्शिता और ऊपर होनी चाहिए। 0.0(पारदर्शी) से 1.0(अपारदर्शी) मान मान्य हैं।

बहुभुज ()

.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )

यह फ़ंक्शन किसी भी आकार का निर्माण करता है जिसमें तीन या अधिक कोने होते हैं, उदाहरण के लिए:

यह नोट करना महत्वपूर्ण है कि यदि यह संपत्ति एनिमेटेड होने जा रही है, तो जब आपको एनिमेटेड राज्य घोषित किया जाता है तो उसे उतने ही वर्टिकल की आवश्यकता होती है:

.element ( shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: shape-outside 1s; ) .element:hover ( shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%); )

इनसेट ()

.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )

inset()आयताकार आकृतियाँ बनाने के लिए एक समारोह है, इसमें पाँच पैरामीटर हैं लेकिन पाँचवाँ, border-radiusवैकल्पिक है। अन्य तर्क किनारे से अंदर की ओर हैं .element:

ऊपर हमारे पास एक ऐसा तत्व है जो 200px लंबा 200px चौड़ा है और हम बाईं ओर को छोड़कर हर दिशा में 50px के भीतर आकार की भरपाई कर रहे हैं। इस तरह से पाठ आकार के ऊपर लपेटेगा भले ही div शीर्ष पर फैली हो।

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
३।	६२	नहीं न	। ९	7.1 *

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	8 *