सीएसएस शेप का इस्तेमाल शुरू करना

कस्टम पाथ के आस-पास कॉन्टेंट रैप करना

Razvan Caliman

लंबे समय से, वेब डिज़ाइनर को रेक्टैंगल की सीमाओं के अंदर ही डिज़ाइन बनाना पड़ता था. वेब पर मौजूद ज़्यादातर कॉन्टेंट अब भी साधारण बॉक्स में ही दिखता है. ऐसा इसलिए है, क्योंकि नॉन-रेक्टैंगलर लेआउट में क्रिएटिविटी दिखाने की ज़्यादातर कोशिशें नाकाम हो जाती हैं. Chrome 37 से उपलब्ध सीएसएस शेप की मदद से, अब इसमें बदलाव होने वाला है. सीएसएस शेप की मदद से, वेब डिज़ाइनर कॉन्टेंट को सर्कल, एलिप्स, और पॉलीगॉन जैसे कस्टम पाथ के आस-पास रैप कर सकते हैं. इससे, रेक्टैंगल की सीमाओं से बाहर निकलने में मदद मिलती है.

आकार को मैन्युअल तरीके से तय किया जा सकता है या इमेज से अनुमान लगाया जा सकता है.

आइए, एक आसान उदाहरण से समझते हैं.

शायद आपने भी मेरी तरह, पहली बार पारदर्शी हिस्सों वाली इमेज को फ़्लोट करते समय यह उम्मीद की हो कि कॉन्टेंट, इमेज के आस-पास रैप हो जाएगा और खाली जगहों को भर देगा. हालांकि, एलिमेंट के आस-पास रेक्टैंगल रैप शेप की वजह से आपको निराशा हुई हो. इस समस्या को हल करने के लिए, सीएसएस शेप का इस्तेमाल किया जा सकता है.

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

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() फ़ंक्शन

सर्कल शेप की वैल्यू का पूरा नोटेशन circle(r at cx cy) है. इसमें r सर्कल की त्रिज्या है, जबकि cx और cy, X-ऐक्सिस और Y-ऐक्सिस पर सर्कल के केंद्र के निर्देशांक हैं. सर्कल के केंद्र के निर्देशांक डालना ज़रूरी नहीं है. अगर इन्हें शामिल नहीं किया जाता है, तो एलिमेंट के सेंटर (इसके डायगनल के इंटरसेक्शन) को डिफ़ॉल्ट के तौर पर इस्तेमाल किया जाएगा.

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

ऊपर दिए गए उदाहरण में, कॉन्टेंट को सर्कुलर पाथ के बाहर रैप किया जाएगा. एक आर्ग्युमेंट 50%, सर्कल की त्रिज्या तय करता है. इस मामले में, यह एलिमेंट की चौड़ाई या ऊंचाई का आधा होता है. एलिमेंट के डाइमेंशन बदलने से, सर्कल के आकार की रेडियस पर असर पड़ेगा. यह एक बुनियादी उदाहरण है कि सीएसएस शेप कैसे रिस्पॉन्सिव हो सकते हैं.

आगे बढ़ने से पहले, एक ज़रूरी बात: यह याद रखना ज़रूरी है कि सीएसएस शेप, किसी एलिमेंट के आस-पास मौजूद फ़्लोट एरिया के शेप पर ही असर डालते हैं. अगर एलिमेंट का कोई बैकग्राउंड है, तो उसे शेप के हिसाब से क्लिप नहीं किया जाएगा. यह इफ़ेक्ट पाने के लिए, आपको सीएसएस मास्किंग की प्रॉपर्टी इस्तेमाल करनी होंगी. जैसे, 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 रेफ़रंस बॉक्स से तय किए गए कोऑर्डिनेट सिस्टम की बढ़ी हुई सतह को दिखाने के लिए होता है.

रेफ़रंस बॉक्स के लिए कुछ विकल्प उपलब्ध हैं: `margin-box`, `border-box`, `padding-box`, और `content-box`. इनके नाम से ही इनकी सीमाओं का पता चलता है. हमने पहले `margin-box` के बारे में बताया था. `border-box` को एलिमेंट के बॉर्डर के बाहरी किनारों से सीमित किया जाता है. `padding-box` को एलिमेंट की पैडिंग से सीमित किया जाता है. वहीं, `content-box` एलिमेंट के अंदर मौजूद कॉन्टेंट के इस्तेमाल किए गए असल प्लैटफ़ॉर्म के जैसा होता है.

shape-outside डिक्लेरेशन के साथ, एक समय में सिर्फ़ एक रेफ़रंस बॉक्स का इस्तेमाल किया जा सकता है. हर रेफ़रंस बॉक्स, शेप को अलग-अलग और कभी-कभी मामूली तरीके से प्रभावित करेगा. एक अन्य लेख में, सीएसएस शेप के लिए रेफ़रंस बॉक्स को समझने के बारे में ज़्यादा जानकारी दी गई है.

ellipse() फ़ंक्शन

एलिप्स, चपटे सर्कल की तरह दिखते हैं. इन्हें ellipse(rx ry at cx cy) के तौर पर तय किया जाता है. इसमें rx और ry, X-ऐक्सिस और Y-ऐक्सिस पर एलिप्स की त्रिज्या हैं. वहीं, cx और cy, एलिप्स के केंद्र के निर्देशांक हैं.

.element{
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

प्रतिशत वैल्यू का हिसाब, कोऑर्डिनेट सिस्टम के डाइमेंशन से लगाया जाएगा. इसके लिए, आपको कोई मुश्किल हिसाब-किताब करने की ज़रूरत नहीं है. दीर्घवृत्त के केंद्र के निर्देशांकों को छोड़ा जा सकता है. इन्हें कोऑर्डिनेट सिस्टम के केंद्र से अनुमानित किया जाएगा.

X और Y ऐक्सिस पर रेडियस को कीवर्ड की मदद से भी तय किया जा सकता है: farthest-side से, एलिप्स के सेंटर और रेफ़रंस बॉक्स के सबसे दूर वाले हिस्से के बीच की दूरी के बराबर रेडियस मिलता है. वहीं, closest-side का मतलब ठीक इसके उलट होता है - सेंटर और किसी हिस्से के बीच की सबसे कम दूरी का इस्तेमाल करें.

.element{
  shape-outside: ellipse(closest-side farthest-side at 50% 50%);
  /* identical to: */
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

यह तब काम आ सकता है, जब एलिमेंट के डाइमेंशन (या रेफ़रंस बॉक्स) में अचानक बदलाव हो जाए, लेकिन आपको एलिप्स के आकार को अडजस्ट करना हो.

circle() शेप फ़ंक्शन में रेडियस के लिए, farthest-side और closest-side कीवर्ड भी इस्तेमाल किए जा सकते हैं.

polygon() फ़ंक्शन

अगर सर्कल और एलिप्स से आपकी ज़रूरतें पूरी नहीं हो रही हैं, तो पॉलीगॉन शेप फ़ंक्शन का इस्तेमाल करें. इसमें आपको कई विकल्प मिलेंगे. इसका फ़ॉर्मैट polygon(x1 y1, x2 y2, ...) है. इसमें पॉलीगॉन के हर वर्टेक्स (पॉइंट) के लिए, x और y निर्देशांक के जोड़े तय किए जाते हैं. पॉलीगॉन बनाने के लिए, कम से कम तीन पेयर की ज़रूरत होती है. इससे एक त्रिकोण बनता है.

.element{
  shape-outside: polygon(0 0, 0 300px, 300px 600px);
  width: 300px;
  height: 600px;
}

वर्टेक्स को कोऑर्डिनेट सिस्टम पर रखा जाता है. रिस्पॉन्सिव पॉलीगॉन के लिए, कुछ या सभी निर्देशांकों के लिए प्रतिशत वैल्यू का इस्तेमाल किया जा सकता है.

.element{
  /* polygon responsive to font-size*/
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  width: 20em;
  height: 40em;
}

एसवीजी से इंपोर्ट किया गया एक वैकल्पिक fill-rule पैरामीटर होता है. यह ब्राउज़र को बताता है कि खुद को काटने वाले पाथ या बंद आकृतियों के मामले में, पॉलीगॉन के “अंदरूनी हिस्से” को कैसे माना जाए. जोनी ट्राइथॉल ने बहुत अच्छे से समझाया है कि एसवीजी में fill-rule प्रॉपर्टी कैसे काम करती है. अगर तय नहीं किया गया है, तो fill-rule डिफ़ॉल्ट रूप से nonzero पर सेट हो जाता है.

.element{
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  /* identical to: */
  shape-outside: polygon(nonzero, 0 0, 0 100%, 100% 100%);
}

inset() फ़ंक्शन

inset() शेप फ़ंक्शन की मदद से, रेक्टैंगल शेप बनाए जा सकते हैं. इनके आस-पास कॉन्टेंट को रैप किया जा सकता है. यह बात आपको अजीब लग सकती है, क्योंकि शुरुआत में हमने बताया था कि सीएसएस शेप, वेब कॉन्टेंट को सिंपल बॉक्स से आज़ाद करते हैं. ऐसा हो सकता है. मुझे अब तक inset() का ऐसा कोई इस्तेमाल नहीं मिला है जो फ़्लोट और मार्जिन या polygon() से पहले से ही न किया जा सकता हो. हालांकि, inset(), रेक्टैंगल शेप के लिए polygon() के मुकाबले ज़्यादा आसानी से पढ़ा जा सकने वाला एक्सप्रेशन उपलब्ध कराता है.

इनसेट शेप फ़ंक्शन का पूरा नोटेशन inset(top right bottom left border-radius) है. पहले चार पोज़िशन आर्ग्युमेंट, एलिमेंट के किनारों से अंदर की ओर ऑफ़सेट होते हैं. आखिरी आर्ग्युमेंट, रेक्टैंगल के आकार के लिए बॉर्डर रेडियस है. यह ज़रूरी नहीं है, इसलिए इसे छोड़ा जा सकता है. यह border-radius शॉर्टहैंड नोटेशन का इस्तेमाल करता है, जो सीएसएस में पहले से इस्तेमाल किया जाता है.

.element{
  shape-outside: inset(100px 100px 100px 100px);
  /* yields a rectangular shape which is 100px inset on all sides */
  float: left;
}

रेफ़रंस-बॉक्स से आकार बनाना

अगर आपने shape-outside प्रॉपर्टी के लिए कोई शेप फ़ंक्शन तय नहीं किया है, तो ब्राउज़र को एलिमेंट के रेफ़रंस बॉक्स से शेप तय करने की अनुमति दी जा सकती है. डिफ़ॉल्ट रेफ़रंस बॉक्स margin-box है. अब तक कुछ भी नया नहीं है. फ़्लोट पहले से ही इसी तरह काम करते हैं. हालांकि, इस तकनीक का इस्तेमाल करके, किसी एलिमेंट की ज्यामिति को फिर से इस्तेमाल किया जा सकता है. आइए, border-radius प्रॉपर्टी के बारे में जानें.

अगर इसका इस्तेमाल किसी फ़्लोट किए गए एलिमेंट के कोनों को गोल करने के लिए किया जाता है, तो आपको क्लिपिंग इफ़ेक्ट मिलता है. हालांकि, फ़्लोट एरिया रेक्टैंगल ही रहता है. border-radius से बनाए गए कॉन्टूर के चारों ओर रैप करने के लिए, shape-outside: border-box जोड़ें.

.element{
  border-radius: 50%;
  shape-outside: border-box;
  float: left;
}

इस तरह से, सभी रेफ़रंस बॉक्स का इस्तेमाल किया जा सकता है. यहां डिराइव्ड शेप का एक और इस्तेमाल बताया गया है - ऑफ़सेट पुल-कोट.

सिर्फ़ फ़्लोट और मार्जिन प्रॉपर्टी का इस्तेमाल करके, ऑफ़सेट पुल-कोट इफ़ेक्ट हासिल किया जा सकता है. हालांकि, इसके लिए आपको एचटीएमएल ट्री में कोट एलिमेंट को उस जगह पर रखना होगा जहां आपको उसे रेंडर करना है.

यहां ऑफ़सेट पुल-कोट इफ़ेक्ट को ज़्यादा फ़्लेक्सिबिलिटी के साथ इस्तेमाल करने का तरीका बताया गया है:

.pull-quote{
  shape-outside: content-box;
  margin-top: 200px;
  float: left;
}

हम आकार के कोऑर्डिनेट सिस्टम के लिए, content-box रेफ़रंस बॉक्स को साफ़ तौर पर सेट करते हैं. इस मामले में, पुल-कोट में मौजूद कॉन्टेंट की मात्रा से यह तय होता है कि बाहर का कॉन्टेंट किस आकार में रैप होगा. यहां margin-top प्रॉपर्टी का इस्तेमाल, पुल-कोट की पोज़िशन (ऑफ़सेट) तय करने के लिए किया गया है. इससे कोई फ़र्क़ नहीं पड़ता कि एचटीएमएल ट्री में इसकी पोज़िशन क्या है.

शेप मार्जिन

आपको दिखेगा कि किसी आकार के चारों ओर कॉन्टेंट को रैप करने से, वह एलिमेंट के बहुत करीब आ सकता है. shape-margin प्रॉपर्टी की मदद से, शेप के आस-पास स्पेस जोड़ा जा सकता है.

.element{
  shape-outside: circle(40%);
  shape-margin: 1em;
  float: left;
}

इसका असर वैसा ही होता है जैसा कि सामान्य margin प्रॉपर्टी का इस्तेमाल करने पर होता है. हालांकि, shape-margin सिर्फ़ shape-outside वैल्यू के आस-पास की जगह पर असर डालता है. यह शेप के आस-पास स्पेस सिर्फ़ तब जोड़ेगा, जब कोऑर्डिनेट सिस्टम में इसके लिए जगह होगी. इसलिए, ऊपर दिए गए उदाहरण में सर्कल की त्रिज्या को 50% के बजाय 40% पर सेट किया गया है. अगर रेडियस को 50% पर सेट किया जाता, तो सर्कल, कोऑर्डिनेट सिस्टम में पूरी जगह ले लेता. इससे shape-margin के असर के लिए कोई जगह नहीं बचती. याद रखें कि आकार, एलिमेंट के margin-box (एलिमेंट और उसके आस-पास की margin) तक ही सीमित होता है. अगर आकार बड़ा है और ओवरफ़्लो हो रहा है, तो उसे margin-box के हिसाब से क्लिप कर दिया जाएगा. इससे आपको रेक्टैंगल आकार मिलेगा.

यह समझना ज़रूरी है कि shape-margin में सिर्फ़ एक पॉज़िटिव वैल्यू डाली जा सकती है. इसमें लॉन्ग-हैंड नोटेशन नहीं है. वैसे, किसी सर्कल के लिए shape-margin-top क्या होता है?

आकारों को ऐनिमेट करना

सीएसएस शेप को सीएसएस की कई अन्य सुविधाओं के साथ इस्तेमाल किया जा सकता है. जैसे, ट्रांज़िशन और ऐनिमेशन. हालांकि, मुझे इस बात पर ज़ोर देना चाहिए कि जब उपयोगकर्ता कॉन्टेंट पढ़ रहे होते हैं, तब टेक्स्ट लेआउट में बदलाव होने पर उन्हें बहुत परेशानी होती है. अगर आपको आकृतियों को ऐनिमेट करना है, तो इस बात का ध्यान रखें कि इससे उपयोगकर्ता अनुभव पर कोई असर न पड़े.

circle() और ellipse() आकृतियों के लिए त्रिज्या और केंद्र को ऐनिमेट किया जा सकता है. हालांकि, इसके लिए ज़रूरी है कि उन्हें ऐसी वैल्यू में तय किया गया हो जिन्हें ब्राउज़र इंटरपोलेट कर सके. circle(30%) से circle(50%) तक जाने की सुविधा उपलब्ध है. हालांकि, circle(closest-side) से circle(farthest-side) के बीच ऐनिमेशन करने से ब्राउज़र धीमा हो जाएगा.

.element{
  shape-outside: circle(30%);
  transition: shape-outside 1s;
  float: left;
}

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

polygon() आकृतियों को ऐनिमेट करते समय, ज़्यादा दिलचस्प इफ़ेक्ट हासिल किए जा सकते हैं. हालांकि, यह ध्यान रखना ज़रूरी है कि पॉलीगॉन में ऐनिमेशन की दोनों स्थितियों के बीच वर्टिसेस की संख्या एक जैसी होनी चाहिए. अगर वर्टिस जोड़े या हटाए जाते हैं, तो ब्राउज़र इंटरपोलेट नहीं कर सकता.

एक तरीका यह है कि आपको जितने वर्टिक्स चाहिए उतने जोड़ें और उन्हें ऐनिमेशन की स्थिति में एक साथ क्लस्टर करें. इससे आपको शेप के कम किनारे दिखेंगे.

.element{
  /* four vertices (looks like rectangle) */
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: shape-outside 1s;
}

.element:hover{
  /* four vertices, but second and third overlap (looks like triangle) */
  shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}

किसी आकार के अंदर कॉन्टेंट को रैप करना

सीएसएस शेप स्पेसिफ़िकेशन के शुरुआती ड्राफ़्ट में, shape-inside प्रॉपर्टी शामिल थी. इसकी मदद से, कॉन्टेंट को किसी शेप के अंदर रैप किया जा सकता था. कुछ समय के लिए, Chrome और Webkit में भी इसे लागू किया गया था. हालांकि, किसी कस्टम पाथ में किसी भी जगह पर मौजूद कॉन्टेंट को रैप करने के लिए, ज़्यादा मेहनत और रिसर्च की ज़रूरत होती है. इससे सभी संभावित स्थितियों को कवर किया जा सकता है और गड़बड़ियों से बचा जा सकता है. इसलिए, shape-inside प्रॉपर्टी को सीएसएस शेप लेवल 2 के लिए टाल दिया गया है. साथ ही, इसके लिए लागू किए गए बदलावों को वापस ले लिया गया है.

हालांकि, थोड़ी मेहनत और कुछ समझौते के साथ, अब भी कॉन्टेंट को कस्टम शेप में रैप किया जा सकता है. इसके लिए, shape-outside के साथ दो फ़्लोटेड एलिमेंट का इस्तेमाल करें. इन्हें कंटेनर के दोनों तरफ़ रखें. हालांकि, इसके लिए आपको एक या दो ऐसे खाली एलिमेंट इस्तेमाल करने होंगे जिनका कोई सिमैंटिक मतलब नहीं होता. ये एलिमेंट, अंदर कोई शेप होने का भ्रम पैदा करने के लिए इस्तेमाल किए जाते हैं.

<div>
  <div class='left-shape'></div>
  <div class='right-shape'></div>

  Lorem ipsum...
</div>

कंटेनर के सबसे ऊपर मौजूद .left-shape और .right-shape स्ट्रट एलिमेंट की पोज़िशन अहम होती है. ऐसा इसलिए, क्योंकि कॉन्टेंट को फ़्लैंक करने के लिए, उन्हें बाईं और दाईं ओर फ़्लोट किया जाएगा.

.left-shape{
  shape-outside: polygon(0 0, ...);
  float: left;
  width: 50%;
  height: 100%;
}

.right-shape{
  shape-outside: polygon(50% 0, ...);
  float: right;
  width: 50%;
  height: 100%;
}

इस स्टाइलिंग की वजह से, फ़्लोट किए गए दोनों स्ट्रट, एलिमेंट के अंदर की पूरी जगह ले लेते हैं. हालांकि, shape-outside प्रॉपर्टी, बाकी कॉन्टेंट के लिए जगह बनाती हैं.

अगर ब्राउज़र में सीएसएस शेप काम नहीं करते हैं, तो इससे कॉन्टेंट नीचे की ओर धकेल दिया जाएगा और वह खराब दिखेगा. इसलिए, इस सुविधा का इस्तेमाल परतदार वृद्धि के तरीके से करना ज़रूरी है.

शेप ऐनिमेशन के पिछले उदाहरणों में, आपने देखा होगा कि टेक्स्ट का इधर-उधर होना परेशानी की वजह बन सकता है. इस्तेमाल के सभी उदाहरणों में, ऐनिमेशन वाले आकार की ज़रूरत नहीं होती. हालांकि, सीएसएस शेप के साथ इंटरैक्ट करने वाली अन्य प्रॉपर्टी को ऐनिमेट किया जा सकता है, ताकि ज़रूरत के हिसाब से इफ़ेक्ट जोड़ा जा सके.

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

टेक्स्ट लेआउट को ब्राउज़र नेटिव तौर पर मैनेज करता है. इसलिए, इसकी परफ़ॉर्मेंस JavaScript के इस्तेमाल से बेहतर होती है. हालांकि, स्क्रोल करने पर margin-top बदलने से, कई रीलेआउट और पेंट इवेंट ट्रिगर होते हैं. इससे परफ़ॉर्मेंस में काफ़ी कमी आ सकती है. सावधानी से इस्तेमाल करें! हालांकि, सीएसएस शेप को ऐनिमेट किए बिना इस्तेमाल करने से, परफ़ॉर्मेंस पर कोई खास असर नहीं पड़ता.

परतदार वृद्धि

सबसे पहले, यह मान लें कि ब्राउज़र में सीएसएस शेप की सुविधा काम नहीं करती. इसके बाद, सुविधा का पता चलने पर उसे बेहतर बनाएं. सुविधा का पता लगाने के लिए, Modernizr एक अच्छा समाधान है. साथ ही, 'नॉन-कोर डिटेक्ट' सेक्शन में सीएसएस शेप के लिए एक टेस्ट मौजूद है.

कुछ ब्राउज़र, बाहरी लाइब्रेरी की ज़रूरत के बिना, @supports नियम के ज़रिए सीएसएस में सुविधा की पहचान करने की सुविधा देते हैं. Google Chrome, सीएसएस शेप के साथ काम करता है. यह @supports नियम को भी समझता है. परतदार वृद्धि के लिए, इसका इस्तेमाल इस तरह किया जाता है:

.element{
  /* styles for all browsers */
}

@supports (shape-outside: circle(50%)){
  /* styles only for browsers which support CSS Shapes */
  .element{
    shape-outside: circle(50%);
  }
}

लिया वेरो ने सीएसएस @supports नियम का इस्तेमाल करने के तरीके के बारे में ज़्यादा जानकारी दी है.

सीएसएस एक्सक्लूज़न से अलग करना

आज हम जिसे सीएसएस शेप के तौर पर जानते हैं उसे पहले सीएसएस एक्सक्लूज़न और शेप कहा जाता था. नाम में यह बदलाव भले ही मामूली लगे, लेकिन यह काफ़ी अहम है. सीएसएस एक्सक्लूज़न, अब एक अलग स्पेसिफ़िकेशन है. इसकी मदद से, कॉन्टेंट को किसी भी तरह से पोज़िशन किए गए एलिमेंट के आस-पास रैप किया जा सकता है. इसके लिए, फ़्लोट प्रॉपर्टी की ज़रूरत नहीं होती. मान लें कि किसी कॉन्टेंट को पूरी तरह से पोज़िशन किए गए एलिमेंट के आस-पास रैप करना है. यह सीएसएस एक्सक्लूज़न का एक उदाहरण है. सीएसएस शेप, सिर्फ़ उस पाथ को तय करते हैं जिसके आस-पास कॉन्टेंट रैप होगा.

इसलिए, शेप और एक्सक्लूज़न एक जैसे नहीं होते, लेकिन वे एक-दूसरे के पूरक होते हैं. सीएसएस शेप, ब्राउज़र में उपलब्ध हैं. हालांकि, सीएसएस एक्सक्लूज़न को अब तक शेप इंटरैक्शन के साथ लागू नहीं किया गया है.

सीएसएस शेप के साथ काम करने के लिए टूल

इमेज बनाने वाले क्लासिक टूल में पाथ बनाए जा सकते हैं. हालांकि, इस लेख को लिखे जाने के समय, इनमें से कोई भी टूल सीएसएस शेप की वैल्यू के लिए ज़रूरी सिंटैक्स एक्सपोर्ट नहीं करता. अगर ऐसा होता भी, तो इस तरह से काम करना ज़्यादा व्यावहारिक नहीं होता.

सीएसएस शेप का इस्तेमाल ब्राउज़र में किया जाता है. यहां ये पेज पर मौजूद अन्य एलिमेंट के साथ इंटरैक्ट करते हैं. आकार में बदलाव करने से, उसके आस-पास मौजूद कॉन्टेंट पर पड़ने वाले असर को विज़ुअलाइज़ करना बहुत मददगार होता है. इस वर्कफ़्लो में आपकी मदद करने के लिए, कुछ टूल उपलब्ध हैं:

Brackets: Brackets के लिए CSS Shapes Editor एक्सटेंशन, कोड एडिटर के लाइव झलक मोड का इस्तेमाल करता है. इससे, शेप की वैल्यू में बदलाव करने के लिए, इंटरैक्टिव एडिटर को ओवरले किया जा सकता है.

Google Chrome: Google Chrome के लिए सीएसएस शेप एडिटर एक्सटेंशन, ब्राउज़र के डेवलपर टूल को बेहतर बनाता है. इसमें शेप बनाने और उनमें बदलाव करने के लिए कंट्रोल होते हैं. यह चुने गए एलिमेंट के ऊपर एक इंटरैक्टिव एडिटर दिखाता है.

Google Chrome में मौजूद इंस्पेक्टर में, आकृतियों को हाइलाइट करने की सुविधा पहले से मौजूद होती है. shape-outside प्रॉपर्टी वाले किसी एलिमेंट पर कर्सर घुमाएं. इससे वह एलिमेंट हाइलाइट हो जाएगा और उसका आकार दिखेगा.

इमेज से शेप बनाना: अगर आपको इमेज जनरेट करना और ब्राउज़र से उनमें मौजूद शेप को एक्सट्रैक्ट करना पसंद है, तो रेबेका हॉक ने Photoshop के लिए एक अच्छा ट्यूटोरियल लिखा है.

पॉलीफ़िल: Google Chrome, सीएसएस शेप की सुविधा देने वाला पहला मुख्य ब्राउज़र है. Apple के iOS 8 और Safari 8 पर, जल्द ही यह सुविधा उपलब्ध होगी. ब्राउज़र उपलब्ध कराने वाली अन्य कंपनियां, आने वाले समय में इस पर विचार कर सकती हैं. सीएसएस शेप पॉलीफ़िल का इस्तेमाल करके, बुनियादी सहायता उपलब्ध कराई जा सकती है.

नतीजा

वेब पर कॉन्टेंट ज़्यादातर साधारण बॉक्स में होता है. हालांकि, सीएसएस शेप की मदद से, कॉन्टेंट को ज़्यादा बेहतर तरीके से दिखाया जा सकता है. इससे वेब और प्रिंट डिज़ाइन के बीच का अंतर कम हो जाता है. हालांकि, आकृतियों का गलत इस्तेमाल किया जा सकता है और इनसे ध्यान भटक सकता है. हालांकि, अगर शेप का इस्तेमाल सही तरीके से किया जाए, तो कॉन्टेंट को बेहतर तरीके से प्रज़ेंट किया जा सकता है. साथ ही, उपयोगकर्ता का ध्यान इस तरह से खींचा जा सकता है जो उनके लिए यूनीक हो.

हम आपको अन्य लोगों के काम का कलेक्शन दिखा रहे हैं. इनमें से ज़्यादातर प्रिंट मीडिया से हैं. इनमें नॉन-रेक्टैंगुलर लेआउट के दिलचस्प इस्तेमाल दिखाए गए हैं. हमें उम्मीद है कि इससे आपको सीएसएस शेप आज़माने और नए डिज़ाइन आइडिया के साथ एक्सपेरिमेंट करने की प्रेरणा मिलेगी.

इस लेख की समीक्षा करने और अहम जानकारी देने के लिए, पर्ल चेन, ऐलन स्टर्न्स, और ज़ोल्टन हॉर्वथ को बहुत-बहुत धन्यवाद.