लंबे समय से, वेब डिज़ाइनर को आयत की सीमाओं के भीतर निर्माण करने के लिए मजबूर किया गया है. वेब की ज़्यादातर सामग्री अब भी साधारण बॉक्स में फंसी हुई है, क्योंकि ज़्यादातर क्रिएटिव कारोबार गैर-आयताकार लेआउट में फंस जाते हैं और उन्हें निराशा हाथ लगती है. यह बदलाव, Chrome 37 और इसके बाद के वर्शन में उपलब्ध CSS शेप्स के लॉन्च होने के बाद होने वाला है.
सीएसएस शेप, वेब डिज़ाइनर को सर्कल, एलिप्सिस, और पॉलीगॉन जैसे कस्टम पाथ के आस-पास कॉन्टेंट रैप करने की सुविधा देते हैं. इस तरह, वे रेक्टैंगल की सीमाओं से अलग हो जाते हैं.
आकार मैन्युअल तौर पर तय किए जा सकते हैं या उनका अनुमान इमेज से लगाया जा सकता है.
आइए, एक बहुत आसान उदाहरण देखते हैं.
ऐसा हो सकता है कि आप पहली बार किसी ऐसी इमेज को फ़्लोट कर रहे हों जो कॉन्टेंट के रैप और खाली हिस्से को भरने की उम्मीद करती हो. इस दौरान, आपको भी वैसा ही अनुभव होगा जैसा किसी एलिमेंट के आस-पास दिख रहा होता है. इस समस्या को हल करने के लिए, CSS शेप का इस्तेमाल किया जा सकता है.
shape-outside: url(image.png) सीएसएस एलान, ब्राउज़र को इमेज से आकार निकालने के लिए कहता है.
shape-image-threshold प्रॉपर्टी पिक्सल के कम से कम ओपैसिटी लेवल के बारे में बताती है, जिसका इस्तेमाल आकार बनाने के लिए किया जाएगा. इसकी वैल्यू, 0.0 (पूरी तरह से पारदर्शी) और 1.0 (पूरी तरह से ओपेक) के बीच की होनी चाहिए. इसलिए, shape-image-threshold: 0.5 का मतलब है कि आकार बनाने के लिए सिर्फ़ उन पिक्सल का इस्तेमाल किया जाएगा जिनकी ओपैसिटी 50% या इससे ज़्यादा है.
यहां float प्रॉपर्टी अहम है. shape-outside प्रॉपर्टी, उस जगह का आकार तय करती है जिसके आस-पास कॉन्टेंट रैप किया जाएगा. हालांकि, फ़्लोट के बिना आपको उस जगह के असर नहीं दिखेंगे.
एलिमेंट की float वैल्यू के दूसरी तरफ़ फ़्लोट एरिया होता है. उदाहरण के लिए, अगर कॉफ़ी कप की इमेज वाले किसी एलिमेंट को बाईं ओर फ़्लोट किया जा रहा है, तो कप के दाईं ओर फ़्लोट एरिया बनाया जाएगा. भले ही, ऐसी इमेज तैयार की जा सकती है जिसके दोनों तरफ़ खाली जगह हो, लेकिन कॉन्टेंट सिर्फ़ फ़्लोट प्रॉपर्टी के ज़रिए तय की गई दूसरी तरफ़ आकार में रैप होगा. भले ही, उसे बाईं या दाईं ओर रखा गया हो, दोनों पर नहीं.
आने वाले समय में, उन एलिमेंट पर shape-outside का इस्तेमाल किया जा सकेगा जो शुरुआती सीएसएस एक्सक्लूज़न के साथ फ़्लोट नहीं किए गए हैं.
मैन्युअल रूप से आकार बनाना
इमेज से आकार निकालने के अलावा, उन्हें मैन्युअल तरीके से भी कोड में बदला जा सकता है. आकार बनाने के लिए कुछ फ़ंक्शनल वैल्यू में से चुना जा सकता है: circle(), ellipse(), inset(), और polygon(). हर आकार फ़ंक्शन निर्देशांकों के एक सेट को स्वीकार करता है और इसे संदर्भ बॉक्स के साथ जोड़ा जाता है जो निर्देशांक प्रणाली को स्थापित करता है. रेफ़रंस बॉक्स के बारे में जल्द ही ज़्यादा जानकारी पाएं.
सर्कल() फ़ंक्शन
सर्कल के आकार की वैल्यू का पूरा नोटेशन circle(r at cx cy) है, जहां r वृत्त की रेडियस है. वहीं, cx और cy, X-ऐक्सिस और Y-ऐक्सिस पर सर्कल के सेंटर के निर्देशांक हैं. सर्कल सेंटर के लिए निर्देशांक वैकल्पिक हैं. अगर इन्हें छोड़ा जाता है, तो एलिमेंट के बीच वाले हिस्से (डायगनल का इंटरसेक्शन) को डिफ़ॉल्ट के तौर पर इस्तेमाल किया जाएगा.
ऊपर दिए गए उदाहरण में, कॉन्टेंट गोल पाथ के बाहर रैप किया जाएगा. एक तर्क 50%, सर्कल की दूरी तय करता है. इस खास मामले में, यह रेडियस की चौड़ाई या ऊंचाई का आधा होता है. एलिमेंट के डाइमेंशन बदलने से सर्कल के आकार की रेडियस पर असर पड़ेगा. इस उदाहरण में बताया गया है कि सीएसएस शेप किस तरह रिस्पॉन्सिव हो सकते हैं.
आगे बढ़ने से पहले, ध्यान दें: यह ध्यान रखना ज़रूरी है कि CSS आकार, एलिमेंट के आस-पास के फ़्लोट एरिया के आकार पर ही असर डालते हैं. अगर एलिमेंट में बैकग्राउंड है, तो उसे आकार से क्लिप नहीं किया जाएगा. इस इफ़ेक्ट को पाने के लिए, आपको सीएसएस मास्किंग की प्रॉपर्टी का इस्तेमाल करना होगा - clip-path या mask-image. clip-path प्रॉपर्टी बहुत काम का होती है, क्योंकि यह सीएसएस शेप्स के नोटेशन का पालन करती है, ताकि आप वैल्यू का फिर से इस्तेमाल कर सकें.
इस दस्तावेज़ में दिखाई गई तस्वीरों में क्लिप का इस्तेमाल किया गया है, ताकि आकार को हाइलाइट किया जा सके. साथ ही, इससे आपको इफ़ेक्ट समझने में मदद मिलेगी.
गोले के आकार पर वापस जाएं.
सर्कल की रेडियस के लिए प्रतिशत का इस्तेमाल करते समय, वैल्यू की गणना असल में, थोड़ा ज़्यादा जटिल फ़ॉर्मूला से की जाती है: sqrt(width^2 +height^2) / sqrt(2). इसे समझना फ़ायदेमंद होगा, क्योंकि इससे आपको यह कल्पना करने में मदद मिलेगी कि अगर एलिमेंट के डाइमेंशन बराबर नहीं हैं, तो सर्कल का आकार क्या होगा.
सभी सीएसएस यूनिट टाइप का इस्तेमाल, शेप फ़ंक्शन के निर्देशांक में किया जा सकता है. जैसे, px, em, rem, vw, vh वगैरह. आप वह विकल्प चुन सकते हैं जो आपकी ज़रूरतों के हिसाब से सुविधाजनक या सख्त हो.
वृत्त के केंद्र के निर्देशांक के लिए स्पष्ट मान सेट करके उसकी स्थिति को समायोजित किया जा सकता है.
.element{
shape-outside: circle(50% at 0 0);
}
यह वृत्त के केंद्र को निर्देशांक प्रणाली की शुरुआत की ओर स्थित करता है. निर्देशांक सिस्टम क्या है? यहां पर हमने रेफ़रंस बॉक्स की सुविधा शुरू की.
सीएसएस शेप के लिए रेफ़रंस बॉक्स
रेफ़रंस बॉक्स, एलिमेंट के आस-पास एक वर्चुअल बॉक्स होता है, जिससे आकार बनाने और उसे सही जगह पर रखने के लिए इस्तेमाल किया जाने वाला निर्देशांक सिस्टम तय होता है. निर्देशांक सिस्टम का शुरुआती बिंदु इसके ऊपरी बाएं कोने में है, जहां X-ऐक्सिस दाईं ओर और Y-ऐक्सिस नीचे की ओर है.
याद रखें कि shape-outside उस फ़्लोट एरिया का आकार बदल देता है जिसके चारों ओर कॉन्टेंट रैप होगा. फ़्लोट एरिया, margin प्रॉपर्टी के बताए गए बॉक्स के बाहरी किनारों तक फैलता है. इसे margin-box कहा जाता है. अगर किसी आकार के बारे में साफ़ तौर पर नहीं बताया गया है, तो यह डिफ़ॉल्ट रेफ़रंस बॉक्स होता है.
सीएसएस के इन दो एलानों के नतीजे एक जैसे हैं:
.element{
shape-outside: circle(50% at 0 0);
/* identical to: */
shape-outside: circle(50% at 0 0) margin-box;
}
हमने अभी तक एलिमेंट पर मार्जिन सेट नहीं किया है. इस बिंदु पर, यह मान लेना सुरक्षित है कि निर्देशांक सिस्टम की शुरुआत और सर्कल केंद्र एलिमेंट के कॉन्टेंट एरिया के ऊपरी बाएं कोने में हैं. जब कोई मार्जिन सेट किया जाता है, तो इसमें बदलाव होता है:
.element{
shape-outside: circle(50% at 0 0) margin-box;
margin: 100px;
}
निर्देशांक सिस्टम की शुरुआत की जगह अब एलिमेंट के कॉन्टेंट एरिया (100 पिक्सल ऊपर और 100 पिक्सल बाएं) के बाहर है, जैसा कि सर्कल सेंटर में होता है. वृत्त के दायरे का परिकलित मान margin-box रेफ़रंस बॉक्स की मदद से तय किए गए निर्देशांक सिस्टम की बढ़ी हुई सतह के हिसाब से भी बढ़ता है.