शुभ दिन प्रिय हरजितेली। आज, सीएसएस के साथ, आप कई अलग-अलग तत्व बना सकते हैं। यह निश्चित रूप से बहुत मनभावन है, कुछ साल पहले वेब को याद करते हुए। लेकिन कभी-कभी आप इन सभी ट्रिक्स के "थक" जाते हैं: पहले और बाद में ... हाल ही में, मुझे
सीएसएस मास्किंग लेवल 1 और
सीएसएस शेप्स लेवल 2 के लिए दो दिलचस्प स्पेसिफिकेशन्स मिले हैं, जिसकी बदौलत निकट भविष्य में हमारे पास कंटेंट बनाने और डेवलपमेंट फॉर्म के लिए पूरी तरह से नई संभावनाएं होंगी। ।
सीएसएस मास्किंग
अनुकूलता
सभी आधुनिक ब्राउज़र मास्क और क्लिप-पथ गुणों का समर्थन करते हैं, जैसा कि एसवीजी तत्वों के लिए एसवीजी 1.1 में परिभाषित किया गया है। लेकिन केवल फ़ायरफ़ॉक्स आपको इन गुणों को एचटीएमएल तत्वों, और उपसर्गों के बिना लागू करने की अनुमति देता है। लेकिन सीएसएस मास्किंग विनिर्देश के बारे में विशेष रूप से बोलते हुए, मुखौटा, क्लिप-पथ, मुखौटा-बॉक्स-छवि गुण केवल वेबकिट उपसर्ग के साथ नवीनतम वेबकिट / ब्लिंक पर समर्थित हैं।
क्लिप-पथ
क्लिप-पथ गुण HTML तत्वों या ग्राफिक तत्वों में से किसी के लिए एक क्लिपिंग क्षेत्र बनाता है, जिसमें एसवीजी कंटेनर तत्व, क्लिपपाथ शामिल हैं। गठित तत्व एनिमेटेड हो सकते हैं।
एक प्रभावशाली डेमो (दुर्भाग्य से केवल नवीनतम क्रोम पर काम करता है)।
rectangle(x, y, width, height, [rx, ry]);
एक आयत का वर्णन करता है, x और y मान रूप, चौड़ाई और ऊंचाई - चौड़ाई और ऊंचाई, आरएक्स और आरआई - कोनों की त्रिज्या की स्थिति निर्धारित करते हैं।
circle(cx, cy, r);
सर्कल का वर्णन करता है, मान cx और साइबर सर्कल के केंद्र के निर्देशांक निर्धारित करते हैं, आर त्रिज्या है।
ellipse(cx, cy, rx, ry);
एक सर्कल का वर्णन करता है, मान cx और साइबर सर्कल के केंद्र के निर्देशांक निर्धारित करते हैं, rx और ry त्रिज्या का निर्धारण करते हैं।
polygon(<x1> <y1>, <x2> <y2>, ..., <xn> <yn>);
प्रेषित निर्देशांक के आधार पर बहुभुज का वर्णन करता है।
url(path/to/image.png);
चयनित छवि या एसवीजी फ़ाइल द्वारा निर्दिष्ट फ़ॉर्म का वर्णन करता है।
उदाहरण का उपयोग करें .element1 { clip-path: url(#clipping); } .element2 { clip-path: circle(50%,50%,50%); }
मास्क
क्रॉप करने के अलावा, विनिर्देश सीएसएस (साथ ही फ़ोटोशॉप) में मास्किंग को नियंत्रित करता है। छवि मास्क एक तत्व के दृश्य भागों को फ़िल्टर करने के लिए "रंग ग्रिड" के रूप में उपयोग किया जाता है। मास्क दो प्रकारों में विभाजित होते हैं: मास्क रंग संतृप्ति (ल्यूमिनेंस मास्क) और अल्फा मास्क (अल्फा मास्क)।
रंग संतृप्ति मास्क
रंग संतृप्ति मास्क (छवि। शीर्ष बाएं) की छवि चमक पैमाने की एक रेखापुंज छवि में बदल जाती है (यदि यह चमक पैमाने में अब नहीं है)। मुखौटा छवि का हिस्सा जितना हल्का होगा, उतना ही अधिक तत्व इस स्थान पर दिखाई देगा।
अल्फा मास्क
अल्फा मास्क लगाने में (अंजीर। टॉप राइट), रंग संतृप्ति के मुखौटे में समान सिद्धांतों का उपयोग किया जाता है। अंतर यह है कि यहां मूल्य केवल छवि का अल्फा चैनल है। मुखौटा छवि का हिस्सा जितना अधिक अपारदर्शी होगा, उतना कम दिखाई देने वाला तत्व उसी स्थान पर होगा।
निम्न गुणों के मूल्य और कार्य पूरी तरह से
बैकग्राउड के बराबर हैं:
- मुखौटा
- मुखौटा छवि
- मुखौटा-दोहराने
- मुखौटा स्थिति
- मुखौटा क्लिप
- मुखौटा मूल के
- मुखौटा आकार
उदाहरण का उपयोग करें img { mask: url(#masking); }
<svg> <defs> <linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%"> <stop stop-color="black" offset="0"/> <stop stop-color="white" offset="1"/> </linearGradient> <mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> <rect y="0.3" width="1" height=".7" fill="url(#gradient)" /> <circle cx=".5" cy=".5" r=".35" fill="white" /> </mask> </defs> </svg>
मुखौटा बॉक्स छवि
एकमात्र ऐसी संपत्ति जिसकी पृष्ठभूमि में कोई एनालॉग नहीं है,
मुखौटा-बॉक्स-छवि है । संपत्ति छवि मुखौटा को नौ मोज़ेक तत्वों में विभाजित करती है: चार कोने, चार किनारे और मध्य। परिणामी भागों को विभिन्न तरीकों से स्तरित, बढ़ाया और बढ़ाया जा सकता है।
mask-box-image: <URL/Gradient> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
एक दिलचस्प विशेषता यह है कि मुखौटा सीएसएस ग्रेडिएंट हो सकता है। और
एक्स-रिपीट और
वाई-रिपीट वैल्यू सीमा-छवि में समान हैं:
- खिंचाव - तत्व के आकार की सीमा रेखा खींचती है। यह मान डिफ़ॉल्ट रूप से उपयोग किया जाता है।
- दोहराना - तत्व की पूरी सीमा के साथ मुखौटा का प्रदर्शन दोहराता है
- राउंड - मुखौटा के प्रदर्शन को दोहराता है और इसे तराजू करता है ताकि तत्वों की तरफ छवियों की एक पूर्णांक संख्या दिखाई दे।
img { mask-box-image: url("stamp.svg") 35 repeat; }
सीएसएस आकार
जहां तक मैं समझता हूं कि यह विनिर्देश एक आधुनिक सीएसएस बहिष्करण है । यदि मैं गलत हूं, तो मैं इस बिंदु को समझाने वाली टिप्पणियों के लिए आभारी रहूंगा।
समर्थन
CSS Shapes को
WebKit Nightly और
Chrome Canary के नवीनतम बिल्ड में (
क्रोम: // झंडे में, प्रयोगात्मक WebKit फीचर आइटम
सक्षम करें ) समर्थित हैं।
आकार-बाहर
आकार-बाहर उस तत्व के अंदर एक आकृति बनाता है जिसके चारों ओर वह बहेगा। संपत्ति केवल फ्लोट तत्वों के लिए काम करती है।
आकार-बाहर की बेहतर समझ के लिए, मैंने नीचे इनसेट-आयत उदाहरण में इसके संचालन को स्पष्ट रूप से प्रदर्शित किया। तत्व स्वयं पारदर्शी नीला है, जो अंदर के चारों ओर प्रवाह के लिए एक रूप है। यह इस तथ्य पर भी ध्यान देने योग्य है कि क्लिप-पथ संपत्ति का उपयोग सभी तत्वों के लिए किया जाता है, जो केवल तत्व के दिए गए आकार को काट देता है, लेकिन आसपास के प्रवाह को प्रभावित नहीं करता हैडेमो rectangle(x, y, width, height, [rx, ry]);
एक आयत का वर्णन करता है, x और y मान रूप, चौड़ाई और ऊंचाई - चौड़ाई और ऊंचाई, आरएक्स और आरआई - कोनों की त्रिज्या की स्थिति निर्धारित करते हैं। तत्व की उत्पत्ति तत्व से उत्पत्ति से होती है।
rectangle(x, y, width, height, [rx, ry]);
एक आयत का वर्णन करता है, x और y मान रूप, चौड़ाई और ऊंचाई - चौड़ाई और ऊंचाई, आरएक्स और आरआई - कोनों की त्रिज्या की स्थिति निर्धारित करते हैं। फार्म की स्थिति तत्व के रूप में ही होती है।
circle(cx, cy, r);
सर्कल का वर्णन करता है, मान cx और साइबर सर्कल के केंद्र के निर्देशांक निर्धारित करते हैं, आर त्रिज्या है।
ellipse(cx, cy, rx, ry);
एक सर्कल का वर्णन करता है, मान cx और साइबर सर्कल के केंद्र के निर्देशांक निर्धारित करते हैं, rx और ry त्रिज्या का निर्धारण करते हैं।
polygon(<x1> <y1>, <x2> <y2>, ..., <xn> <yn>);
प्रेषित निर्देशांक के आधार पर बहुभुज का वर्णन करता है।
url(path/to/image.png);
चयनित छवि या एसवीजी फ़ाइल द्वारा निर्दिष्ट फ़ॉर्म का वर्णन करता है।
आकार-अंदर
आकार-अंदर एक तत्व के अंदर एक आकार बनाता है जिसके भीतर एक प्रवाह होगा।
आकार-अंदर का अर्थ आकार-बाहर जैसा है rectangle(x, y, width, height, [rx, ry]);
एक आयत का वर्णन करता है, x और y मान रूप, चौड़ाई और ऊंचाई - चौड़ाई और ऊंचाई, आरएक्स और आरआई - कोनों की त्रिज्या की स्थिति निर्धारित करते हैं। तत्व की उत्पत्ति तत्व से उत्पत्ति से होती है।
rectangle(x, y, width, height, [rx, ry]);
एक आयत का वर्णन करता है, x और y मान रूप, चौड़ाई और ऊंचाई - चौड़ाई और ऊंचाई, आरएक्स और आरआई - कोनों की त्रिज्या की स्थिति निर्धारित करते हैं। फार्म की स्थिति तत्व के रूप में ही होती है।
circle(cx, cy, r);
सर्कल का वर्णन करता है, मान cx और साइबर सर्कल के केंद्र के निर्देशांक निर्धारित करते हैं, आर त्रिज्या है।
ellipse(cx, cy, rx, ry);
एक सर्कल का वर्णन करता है, मान cx और साइबर सर्कल के केंद्र के निर्देशांक निर्धारित करते हैं, rx और ry त्रिज्या का निर्धारण करते हैं।
polygon(<x1> <y1>, <x2> <y2>, ..., <xn> <yn>);
प्रेषित निर्देशांक के आधार पर बहुभुज का वर्णन करता है।
url(path/to/image.png);
चयनित छवि या एसवीजी फ़ाइल द्वारा निर्दिष्ट फ़ॉर्म का वर्णन करता है।
कोडपेन डेमो पेजआकार छवि सीमा
यह गुण छवि के अल्फा चैनल की सीमा को निर्धारित करता है जिसके आधार पर आकार निर्धारित किया जाता है। डिफ़ॉल्ट 0.5 से मान 0.0 से 0.1।
यही है, यदि आप किसी विशिष्ट छवि से आकार निर्धारित करते हैं, तो डिफ़ॉल्ट रूप से उस क्षेत्र को जहां अपारदर्शिता 50% से कम है, को ध्यान में नहीं रखा जाएगा।आकार-मार्जिन और आकार-पैडिंग
इन संपत्तियों की बारीकियों मार्जिन और पैडिंग मानकों से थोड़ा अलग काम करती हैं।
इस पृष्ठ पर (नीचे) ऑपरेशन का सिद्धांत बहुत स्पष्ट रूप से प्रदर्शित किया गया है
।हाइफ़न
मैं इस छोटी सी अद्भुत संपत्ति का उल्लेख नहीं कर सकता। इसका उपयोग अधिकांश आकार के अंदर के उदाहरणों में किया जाता है, और इसका एक कार्य हाइफ़न के साथ स्वचालित शब्द आवरण है। इस संपत्ति के बिना, एक विशेष रूप में सामग्री भयानक दिखाई देगी।
यह पहले से ही फ़ायरफ़ॉक्स, IE, सफारी में काम करता है यह आश्चर्य की बात है कि यह क्रोम में नहीं है ।
- कोई नहीं - हाइफ़नेशन रोकें, लाइन ब्रेक को केवल शब्दों के बीच रखा जाए। (परिचित प्रदर्शन)
- मैनुअल - मैनुअल हाइफ़नेशन - शब्द केवल विशेष वर्णों की व्यवस्था के स्थानों में टूट जाते हैं।
- ऑटो - स्वचालित हाइफ़नेशन, लेकिन विशेष वर्णों वाले स्थानों को प्राथमिकता दी जाती है।
W3C विनिर्देशों के अतिरिक्त उपयोग किए जाने वाले संसाधन:
HTML5ROCKसीएसएस आकार और फ्लोट पोजिशनिंग: क्या पुराना है नया फिर सेसीएसएस आकार मॉड्यूल - बॉक्स से बाहर तोड़करवेब प्लेटफॉर्मआपके ध्यान के लिए बहुत बहुत धन्यवाद।