एसवीजी नॉकआउट पाठ - सीएसएस-ट्रिक्स

यहां विचार एक दूसरे के ऊपर खड़ी तीन परतों की कल्पना करना है जहां तीसरी परत को प्रकट करने के लिए दूसरी परत में एक आकृति को काटने के लिए शीर्ष परत का उपयोग किया जाता है।

यदि ऊपर दिए गए आरेख की ऊपरी परत पर स्थित पाठ का आकार हम दूसरी परत से काट रहे हैं, तो निम्न छवि नॉकआउट पाठ की अवधारणा को दर्शाती है।

एसवीजी स्निपेट

यहाँ एक स्निपेट है जो नीचे की परत को स्थापित करता है ( .knockout) जो कि नॉकआउट पाठ को प्रकट करेगा, मध्य परत ( .knockout-text-bg) जिसे हम काट रहे हैं, और शीर्ष परत ( .knockout-text) में SVG पाठ है जो कटने के लिए मास्क के रूप में कार्य करेगा। दूसरी परत।

 Knock Out Text 

निर्देशांक इस उदाहरण में पूरी तरह से मनमाने ढंग से कर रहे हैं और वास्तविक आकार और पाठ जोड़ा जा रहा है की नियुक्ति सूट करने के लिए समायोजित किया जा सकता।

ध्यान दें कि fillदूसरी परत काली है और fillशीर्ष परत सफेद है। यह है कि मुखौटे कैसे काम करते हैं: सफेद काले रंग के लिए एकदम विपरीत है और काले भागों को छिपाएगा। हम शीर्ष परत को पूरी तरह से अलग रंग का बना सकते हैं और यह पूरी तरह से काले रंग को नहीं छिपाएगा, लेकिन इसमें से कुछ को फिसलने देता है।

सीएसएस स्टाइलिंग

बाकी सीएसएस स्टाइल है। उदाहरण के लिए, हम नाटकीय प्रभाव के अधिक पाने के लिए नीचे की परत पर एक पृष्ठभूमि ढाल जोड़ सकते हैं और फ़ॉन्ट आकार को स्टाइल कर सकते हैं।

.knockout ( /* Ensure the bottom layer is full screen */ height: 100vh; width: 100%; /* Add a colorful texture and cutom font-styling */ background-image: linear-gradient(to left, #ff4e50 , #f9d423); text-transform: uppercase; ) /* Knockout text font sizing for each line */ text:nth-child(2) ( font-size: 5em; ) text:nth-child(3) ( font-size: 5.1em; ) text:nth-child(4) ( font-size: 15em; )

CodePen पर ज्योफ ग्राहम (@geoffgraham) द्वारा पेन SVG नॉक आउट टेक्स्ट देखें।