कस्टम पाथ के आस-पास कॉन्टेंट को रैप करना
लंबे समय से, वेब डिज़ाइनर को आयत की सीमाओं के भीतर निर्माण करने के लिए मजबूर किया गया है. वेब की ज़्यादातर सामग्री अब भी साधारण बॉक्स में फंसी हुई है, क्योंकि ज़्यादातर क्रिएटिव कारोबार गैर-आयताकार लेआउट में फंस जाते हैं और उन्हें निराशा हाथ लगती है. यह बदलाव, Chrome 37 और इसके बाद के वर्शन में उपलब्ध CSS शेप्स के लॉन्च होने के बाद होने वाला है. सीएसएस शेप, वेब डिज़ाइनर को सर्कल, एलिप्सिस, और पॉलीगॉन जैसे कस्टम पाथ के आस-पास कॉन्टेंट रैप करने की सुविधा देते हैं. इस तरह, वे रेक्टैंगल की सीमाओं से अलग हो जाते हैं.
आकार मैन्युअल तौर पर तय किए जा सकते हैं या उनका अनुमान इमेज से लगाया जा सकता है.
आइए, एक बहुत आसान उदाहरण देखते हैं.
ऐसा हो सकता है कि आप पहली बार किसी ऐसी इमेज को फ़्लोट कर रहे हों जो कॉन्टेंट के रैप और खाली हिस्से को भरने की उम्मीद करती हो. इस दौरान, आपको भी वैसा ही अनुभव होगा जैसा किसी एलिमेंट के आस-पास दिख रहा होता है. इस समस्या को हल करने के लिए, CSS शेप का इस्तेमाल किया जा सकता है.
<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(r at cx cy) है, जहां r वृत्त की रेडियस है. वहीं, cx और cy, X-ऐक्सिस और Y-ऐक्सिस पर सर्कल के सेंटर के निर्देशांक हैं. सर्कल सेंटर के लिए निर्देशांक वैकल्पिक हैं. अगर इन्हें छोड़ा जाता है, तो एलिमेंट के बीच वाले हिस्से (डायगनल का इंटरसेक्शन) को डिफ़ॉल्ट के तौर पर इस्तेमाल किया जाएगा.
.element{
shape-outside: circle(50%);
width: 300px;
height: 300px;
float: left;
}
ऊपर दिए गए उदाहरण में, कॉन्टेंट गोल पाथ के बाहर रैप किया जाएगा. एक तर्क 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 रेफ़रंस बॉक्स की मदद से तय किए गए निर्देशांक सिस्टम की बढ़ी हुई सतह के हिसाब से भी बढ़ता है.
एक समय में, shape-outside वाले एलान के साथ सिर्फ़ एक रेफ़रंस बॉक्स इस्तेमाल किया जा सकता है. हर रेफ़रंस बॉक्स, शेप पर एक अलग और कभी-कभी आसान तरीके से असर डालता है. इसके अलावा, एक और लेख भी मौजूद है जिससे आपको सीएसएस शेप के रेफ़रंस बॉक्स समझने में मदद मिलेगी.
elipse() फ़ंक्शन
एलिप्स, गोल घेरे जैसे दिखते हैं. इन्हें 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 पैरामीटर SVG से इंपोर्ट किया जाता है, जो ब्राउज़र को यह निर्देश देता है कि खुद को एक-दूसरे से काटते हुए पाथ या जुड़े हुए आकारों के मामले में किसी पॉलीगॉन के “अंदरूनी” पर कैसे विचार करें. जॉनी ट्राइथल बहुत अच्छे से बताते हैं कि SVG में फ़िल-रूल प्रॉपर्टी कैसे काम करती है. अगर कोई वैल्यू तय नहीं की गई है, तो 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() से ऐक्सेस नहीं किया जा सकता. हालांकि, polygon() की तुलना में inset() आयताकार आकारों के लिए ज़्यादा पढ़ने लायक एक्सप्रेशन देता है.
इनसेट आकार फ़ंक्शन का पूरा नोटेशन 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 सिर्फ़ एक पॉज़िटिव वैल्यू स्वीकार करता है. इसमें लंबा नोटेशन नहीं होता है. वैसे भी, किसी सर्कल के लिए शेप-मार्जिन टॉप क्या होता है?
आकार ऐनिमेट किए जा रहे हैं
आप सीएसएस के आकार को, सीएसएस की कई दूसरी सुविधाओं के साथ मिला सकते हैं, जैसे कि ट्रांज़िशन और ऐनिमेशन. हालांकि, मुझे इस बात पर खास ध्यान देना होगा कि जब पढ़ने के दौरान टेक्स्ट लेआउट बदलता है, तो उपयोगकर्ताओं को यह बहुत परेशान करने वाला होता है. अगर आप आकृतियों को ऐनिमेट करने का फ़ैसला करते हैं, तो अनुभव पर करीब से ध्यान दें.
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 प्रॉपर्टी, बाकी कॉन्टेंट के लिए जगह बनाती है.
अगर ब्राउज़र पर CSS शेप काम नहीं करते हैं, तो पूरा कॉन्टेंट नीचे की ओर धकेलने से, बहुत बुरे असर पड़ सकते हैं. इसलिए, यह ज़रूरी है कि इस सुविधा का इस्तेमाल बेहतर तरीके से किया जाए.
आकार वाले ऐनिमेशन के पहले के उदाहरणों में, आपने देखा होगा कि टेक्स्ट का इधर-उधर होना परेशान करने वाला हो सकता है. इस्तेमाल के सभी मामलों में, ऐनिमेशन वाला आकार मौजूद नहीं होता. हालांकि, सीएसएस शेप के साथ इंटरैक्ट करने वाली अन्य प्रॉपर्टी को ऐनिमेट किया जा सकता है, ताकि ज़रूरत के मुताबिक असरदार बनाया जा सके.
सीएसएस शेप के एलिस इन वंडरलैंड डेमो में, हमने कॉन्टेंट के ऊपरी मार्जिन को बदलने के लिए स्क्रोल की पोज़िशन का इस्तेमाल किया. टेक्स्ट को दो फ़्लोट किए गए एलिमेंट के बीच में दबाया जाता है. जैसे-जैसे यह नीचे की ओर जाता है, इसे दो फ़्लोट किए गए एलिमेंट के shape-outside के हिसाब से रिलेआउट करना पड़ता है. इससे ऐसा लगता है कि टेक्स्ट नीचे की तरफ़ जा रहा है और यह कहानी सुनाने का बेहतरीन अनुभव देता है. क्या नीतियों का करीब-करीब उल्लंघन करना ज़रूरी है? शायद. हालांकि, यह शानदार लग रहा है.
टेक्स्ट लेआउट मूल रूप से ब्राउज़र करता है, इसलिए JavaScript समाधान का इस्तेमाल करने से परफ़ॉर्मेंस बेहतर होती है. हालांकि, स्क्रोल करने पर मार्जिन-टॉप को बदलने से, बहुत सारे रिलेआउट और पेंट इवेंट ट्रिगर होते हैं. इससे परफ़ॉर्मेंस में काफ़ी गिरावट आ सकती है. डिवाइस का इस्तेमाल सावधानी से करें! हालांकि, सीएसएस शेप को बिना ऐनिमेशन के इस्तेमाल करने से, परफ़ॉर्मेंस पर अच्छा असर नहीं पड़ता.
प्रोग्रेसिव एन्हैंसमेंट
यह मानते हुए शुरुआत करें कि ब्राउज़र में CSS आकार की सुविधा नहीं है. जब आप सुविधा का पता लगाएं, तो उस पर काम न करें. मॉडर्निज़र, सुविधा का पता लगाने का एक अच्छा तरीका है. साथ ही, 'नॉन-कोर डिटेक्शन' सेक्शन में सीएसएस आकृतियों के लिए एक टेस्ट उपलब्ध है.
कुछ ब्राउज़र, @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%);
}
}
Lea Verou ने सीएसएस के @supports नियम को इस्तेमाल करने के तरीके के बारे में ज़्यादा लिखा है.
सीएसएस एक्सक्लूज़न से साफ़ तौर पर जवाब देना
आज के समय में हम जिस चीज़ को सीएसएस के तौर पर जानते हैं उसे स्पेसिफ़िकेशन के शुरुआती दिनों में, 'सीएसएस एक्सक्लूज़न' और 'शेप' कहा जाता था. नाम बदलने की प्रक्रिया में बहुत सारी चीज़ें शामिल हो सकती हैं, लेकिन असल में यह बेहद ज़रूरी है. सीएसएस एक्सक्लूज़न, अब एक अलग स्पेसिफ़िकेशन है. इसकी मदद से, एलिमेंट को बिना किसी फ़्लोट प्रॉपर्टी के तय किए गए एलिमेंट के साथ रैप किया जा सकता है. ऐसा करने के लिए, किसी फ़्लोट प्रॉपर्टी की ज़रूरत नहीं होती. सोचें कि कॉन्टेंट को किसी खास पोज़िशन वाले एलिमेंट के आस-पास रैप किया जाना चाहिए. सीएसएस एक्सक्लूज़न के लिए ऐसा ही किया जा सकता है. सीएसएस शेप सिर्फ़ वह पाथ तय करते हैं जिसके चारों ओर कॉन्टेंट रैप होगा.
इसलिए, आकार और एक्सक्लूज़न एक जैसे नहीं हैं, लेकिन वे एक-दूसरे के साथ मिलकर काम करते हैं. सीएसएस शेप आज से ब्राउज़र में उपलब्ध हैं, जबकि सीएसएस एक्सक्लूज़न अभी तक शेप इंटरैक्शन के साथ लागू नहीं किए गए हैं.
CSS Shapes के साथ काम करने के लिए टूल
क्लासिक इमेज ऑथरिंग टूल में पाथ बनाए जा सकते हैं. हालांकि, इस लिखने के समय इनमें से कोई भी, CSS शेप वैल्यू के लिए ज़रूरी सिंटैक्स एक्सपोर्ट नहीं करता. अगर उन्होंने ऐसा किया है, तो भी इस तरह का काम करना ज़्यादा व्यावहारिक नहीं होगा.
सीएसएस शेप का इस्तेमाल ब्राउज़र में किया जाता है, जहां वे पेज पर मौजूद अन्य एलिमेंट के साथ प्रतिक्रिया देते हैं. इससे आस-पास के कॉन्टेंट पर, आकार में बदलाव करने के असर को विज़ुअलाइज़ करना बहुत काम का होता है. इस वर्कफ़्लो में आपकी मदद करने के लिए यहां कुछ टूल दिए गए हैं:
ब्रैकेट: ब्रैकेट के लिए सीएसएस शेप एडिटर एक्सटेंशन, कोड एडिटर के लाइव झलक मोड का इस्तेमाल करता है. इसकी मदद से, शेप की वैल्यू में बदलाव करने के लिए एक इंटरैक्टिव एडिटर को ओवरले किया जाता है.
Google Chrome: Google Chrome के लिए CSS आकार एडिटर एक्सटेंशन, ब्राउज़र के डेवलपर टूल को बेहतर बनाता है. साथ ही, आकार बनाने और उनमें बदलाव करने के कंट्रोल को भी बढ़ाता है. यह एक इंटरैक्टिव एडिटर को चुने गए एलिमेंट के ऊपर रखता है.
Google Chrome के इंस्पेक्टर में आकार हाइलाइट करने की सुविधा पहले से मौजूद होती है. shape-outside प्रॉपर्टी वाले किसी एलिमेंट पर कर्सर घुमाएं. इसके बाद, वह चमकने लगेगा, ताकि उसका आकार दिखाया जा सके.
इमेज से आकार: अगर आपको इमेज जनरेट करनी हैं और ब्राउज़र से उनसे आकार निकालने हैं, तो रेबेका हक ने Photoshop के लिए एक अच्छा ट्यूटोरियल लिखा है.
पॉलीफ़िल: Google Chrome, CSS शेप की शिपिंग करने वाला पहला मुख्य ब्राउज़र है. Apple के iOS 8 और Safari 8 पर, इस सुविधा के लिए जल्द ही सहायता उपलब्ध होगी. अन्य ब्राउज़र वेंडर आने वाले समय में इस पर विचार कर सकते हैं. तब तक, बुनियादी सहायता के लिए सीएसएस के आकार वाला पॉलीफ़िल उपलब्ध है.
नतीजा
ऐसे वेब में जहां कॉन्टेंट ज़्यादातर सामान्य बॉक्स में फंसा होता है, वहां CSS शेप एक बेहतरीन लेआउट बनाने का तरीका मुहैया कराते हैं. इससे वेब और प्रिंट डिज़ाइन के बीच फ़िडेलिटी के अंतर को कम किया जा सकता है. बेशक, आकृतियों का गलत इस्तेमाल किया जा सकता है और उनसे ध्यान भटक सकता है. हालांकि, अगर चीज़ों को दिलचस्प और अच्छी सूझ-बूझ के साथ लागू किया जाए, तो उनसे कॉन्टेंट का प्रज़ेंटेशन बेहतर हो सकता है. साथ ही, इनसे उपयोगकर्ताओं का ध्यान अलग तरह से फ़ोकस किया जा सकता है.
मैं आपको दूसरे लोगों की काम का एक संग्रह देता हूं, जिसमें ज़्यादातर प्रिंट होते हैं, जिसमें गैर-रेक्टैंग्युलर लेआउट के दिलचस्प इस्तेमाल के बारे में बताया गया है. मुझे उम्मीद है कि इससे आपको CSS Shapes आज़माने और नए डिज़ाइन आइडिया के साथ प्रयोग करने की प्रेरणा मिली होगी.
इस लेख को पढ़ने और अहम जानकारी देने के लिए, पर्ल चेन, ऐलन स्टर्न्स, और ज़ोल्टन होर्वाथ को बहुत-बहुत धन्यवाद.