Create collage effects in the browser with CSS

Feb 6, 2026
कैसे करना है

यदि आपने कभी कामना की है तो आप एक पारंपरिक के प्रभावों को दोहरा सकते हैं समुच्चित चित्रकला का निर्माता आप में वेबसाइट लेआउट , यह आपके लिए ट्यूटोरियल है।

वेब डिज़ाइन ट्यूटोरियल तीन सीएसएस गुणों को देखेंगे: [2 9] मुखौटा

, [2 9] क्लिप-पथ तथा [2 9] आकार-बाहर । यहां तक ​​कि यदि आपने उनका उपयोग किया है, तो चिंता न करें। मैं ऐसे उदाहरण दिखाऊंगा जो आपको कई वेबसाइटों पर नहीं देखे गए प्रभावों को बनाने में मदद करेंगे।

एक अलग प्रकार के ट्यूटोरियल की तलाश में? ले देख फ़ोटोशॉप में फोटो कोलाज कैसे बनाएं । और आसान मार्गदर्शिकाओं के लिए, शीर्ष की हमारी पिक देखें [2 9] वेबसाइट निर्माता

तथा [2 9] वेब होस्टिंग सर्विस।
    [4 9] 18 शीर्ष सीएसएस एनीमेशन उदाहरण

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

आपको चाहिये होगा:

    [4 9] आपका पसंदीदा वेब ब्राउज़र और डेवलपर टूल्स - मैं Google क्रोम का उपयोग करने की सलाह देता हूं क्योंकि यह इस ट्यूटोरियल में उपयोग की जाने वाली सभी सुविधाओं का समर्थन करता है
[4 9] एक कोड संपादक [4 9] छवियों या एसवीजी फाइलों जैसी संपत्तियां - आप उन लोगों को डाउनलोड कर सकते हैं जो हम इस ट्यूटोरियल में उपयोग कर रहे हैं यहां

मास्क छवियां जो पाठ को ओवरलैप करती हैं

CSS masks example

सीएसएस मास्क आपको विशेष प्रभाव बनाने में सक्षम बनाता है - जैसे चुनिंदा रूप से दिखाई देने के लिए साइट शीर्षक को सक्षम करना और गायब हो जाता है क्योंकि उपयोगकर्ता पृष्ठ को ऊपर और नीचे स्क्रॉल करता है (इस छवि को ऊपर के रूप में विपरीत)

मास्किंग पहली सुविधा है जिसे मैं आपको दिखाना चाहता हूं। यह आपके ब्राउज़र को बताकर वेब पर अधिक रचनात्मक आकार और लेआउट बनाने में मदद करता है जो संपत्ति तत्वों को दिखाई देना चाहिए। मास्किंग तीन अलग-अलग तरीकों से किया जा सकता है: एक रास्टर छवि (जो पारदर्शी भागों के साथ पीएनजी प्रारूप में है) का उपयोग करना; सीएसएस ग्रेडियेंट्स; या एसवीजी तत्व। ध्यान दें कि एक सामान्य रास्टर छवि के विपरीत, एसवीजी को गुणवत्ता में महत्वपूर्ण हानि के बिना स्केल या परिवर्तित किया जा सकता है।

मैं विशेष रूप से मास्किंग के बारे में क्या पसंद करता हूं, यह उसी गुण को लागू करने की क्षमता है [2 9] पृष्ठभूमि

- उदाहरण के लिए, हम मास्क की स्थिति, आकार और पुनरावृत्ति को परिभाषित कर सकते हैं: [2 9] मास्क-दोहराना: नो-रिपीट तथा [2 9] मास्क आकार: कवर ।

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

आइए एक चयनित पृष्ठभूमि छवि और दो शीर्षकों के साथ एक शीर्षलेख बनाएं। उनमें से एक प्राथमिक एक (शीर्षक का पहला स्तर) होगा। 

 & lt; शीर्षलेख और जीटी;
        & lt; h3 & gt; यह & lt; / h3 & gt;
        & lt; h1 & gt; & lt; span & gt; मेरा साहसिक & lt; / span & gt; & lt; / h1 & gt;
& lt; / हेडर और जीटी;

शीर्षक का पाठ में रखा जाएगा [2 9] & lt; अवधि & gt;

टैग। यह एक आम बात नहीं है लेकिन, इस मामले में, हम कंटेनर को नहीं, शीर्षक के लिए मास्किंग लागू कर रहे हैं। 
 हेडर {
    चौड़ाई: 100vw;
    ऊंचाई: 80 वीएच;
    शीर्ष: 0;
    बाएं: ऑटो;
    पृष्ठभूमि: यूआरएल (.. / छवियां / landscape.jpg) केंद्र शीर्ष नो-रिपीट;
    पृष्ठभूमि आकार: कवर;
}
H1 {
    मुखौटा: यूआरएल (../ छवियों / मास्क.एसवीजी # मास्कआईडी);
    -वेबिट-मास्क: यूआरएल (../ छवियां / लैंडस्केप-मास्क.पीएनजी)
केंद्र शीर्ष नो-रिपीट;
    मास्क आकार: कवर;
    -वेबिट-मास्क आकार: कवर;
    चौड़ाई: 100vw;
    ऊंचाई: 80 वीएच;
    रंग: #fff;
    फ़ॉन्ट आकार: 100 पीएक्स;
    स्थिति: रिश्तेदार;
}
एच 1 अवधि {
    स्थिति: फिक्स्ड;
    प्रदर्शन: इनलाइन-ब्लॉक;
    पाठ-संरेखण: केंद्र;
    फ़ॉन्ट-परिवार: 'लिबर बास्करविले', सेरिफ़;
    चौड़ाई: 100vw;
    शीर्ष: 80px;
    फ़ॉन्ट शैली: इटैलिक;
}

सीएसएस क्लिपिंग का उपयोग कर छवियों को काटें

CSS clipping example

क्लिपिंग पथ आपको इस उदाहरण में पौधों की छवि को काटने में सक्षम बनाता है

आइए एक और उदाहरण का पता लगाएं और सीएसएस क्लिपिंग के बारे में और जानें। संक्षेप में, क्लिपिंग परिभाषित करता है कि कौन सा छवि क्षेत्र दिखाई देना चाहिए। क्लिपिंग कागज के टुकड़ों को काटने के समान है। आकार की सीमा को क्लिप पथ कहा जाता है: पथ के बाहर कुछ भी छुपाया जाएगा, जबकि पथ के अंदर कुछ भी दिखाई देगा। एक क्लिप पथ के साथ आप भारी पीएनजी फ़ाइलों का उपयोग करने के बजाय, अपनी छवि से पृष्ठभूमि को हटा सकते हैं। इसके लिए हमें पहले से ही कट आउट के लिए आकार तैयार करने की आवश्यकता है।

इस अभ्यास में लक्ष्य पृष्ठभूमि को हटाने, पृष्ठ से बाहर संयंत्र को क्लिप करना है। हम अपनी फाइल से एसवीजी कोड कॉपी कर सकते हैं और इसे एक HTML दस्तावेज़ में पेस्ट कर सकते हैं। क्लिप पथ को भीतर रखा जाना है [2 9] & lt; defs & gt; & lt; / defs & gt;

टैग। 
 & lt; svg & gt;
  & lt; defs & gt;
      & lt; clippath id = "क्लिप-प्लांट" & gt;
     & lt; पथ d = "m293.2,524.8c0,3.3,0 ... [और अधिक संख्या]" & gt;
     & lt; / clippath & gt;
  & lt; / defs & gt;
& lt; / svg & gt;
& lt; div class = "संयंत्र" & gt; & lt; / div & gt;

बाद में हम जोड़कर एसवीजी कोड में परिभाषित पथ को आसानी से संदर्भित कर सकते हैं [2 9] यूआरएल

समारोह। 
 .plant {
    ऊंचाई: 700px;
    पृष्ठभूमि-छवि: यूआरएल (../ छवियों / plant.jpg);
    पृष्ठभूमि आकार: कवर;
    स्थिति: रिश्तेदार;
    पृष्ठभूमि-दोहराना: नो-रिपीट;
    -वेबिट-क्लिप-पथ: यूआरएल ("# क्लिप-प्लांट");
    क्लिप-पथ: यूआरएल ("# क्लिप-प्लांट");}

हटके सोचो

clipping in CSS example

आप उपयोग कर सकते हैं [2 9] आकार-अंदर
तथा [2 9] आकार-बाहर सभी प्रकार के आकार बनाने के लिए

किसने कहा कि पाठ कंटेनर हमेशा आयताकार होने की आवश्यकता है? सामग्री को लागू करके विभिन्न आकारों के सभी प्रकार में काटा जा सकता है [2 9] आकार-बाहर

तथा [2 9] आकार-अंदर गुण जो आपको सीएसएस में कस्टम पथ के आसपास अपनी सामग्री लपेटने में सक्षम बनाता है।

तो यह कैसे काम करता है? बस आवेदन करें [2 9] आकार-बाहर

दी गई तस्वीर या कंटेनर के लिए। यह ध्यान रखना महत्वपूर्ण है कि [2 9] नाव संपत्ति और तत्व के आयाम - या तो ऊंचाई या चौड़ाई - परिभाषित किया जाना चाहिए अन्यथा यह काम नहीं करता है। आप उपयोग कर सकते हैं [2 9] URL () समारोह, जो सक्षम बनाता है [2 9] आकार-बाहर एक एसवीजी फ़ाइल से पथ के आधार पर एक तत्व आकार को परिभाषित करने के लिए संपत्ति। 
 .a-अक्षर {
    पृष्ठभूमि-छवि: यूआरएल ('.. / छवियों / गोल्ड-बीजी.जेपीजी');
    पृष्ठभूमि आकार: 1000 पीएक्स;
    -वेबिट-मास्क-छवि: यूआरएल ('.. / छवियों / ए-लेटर 2.एसवीजी');
    -वेबिट-मास्क-समग्र: स्रोत-आउट;
    -वेबिट-मास्क-दोहराना: नो-रिपीट;
    -वेबिट-मास्क-आकार: 300 पीएक्स;
    चौड़ाई: 100%;
    ऊंचाई: 60 वीएच;
    स्थिति: रिश्तेदार;
    शीर्ष: 0 पीएक्स;
    पृष्ठभूमि-अनुलग्नक: निश्चित;
    नाव छोड़ी;
    प्रदर्शन: इनलाइन-ब्लॉक;
    चौड़ाई: 310 पीएक्स;
    आकार-मार्जिन: 23 पीएक्स;
    आकार-बाहर: यूआरएल ('.. / छवियों / मास्क.एसवीजी');
}

[2 9] आकार-बाहर

संपत्ति अपने फ्लोट क्षेत्र के अलावा किसी अन्य तत्व के बारे में कुछ भी नहीं बदलता है। इसका मतलब है कि किसी भी सीमा और पृष्ठभूमि छवियों को तत्व पर बनाए गए आकार के अनुकूल नहीं होगा। यही कारण है कि हमें आवेदन करने की भी आवश्यकता है [2 9] मुखौटा संपत्ति - परिभाषित आकार से मेल खाने के लिए तत्व की पृष्ठभूमि को काटने के लिए।

नोट करने के लिए एक महत्वपूर्ण बात यह है कि [2 9] आकार-बाहर

फ़ीचर केवल कोर-सक्षम फ़ाइलों के साथ काम करता है। कोर मूल संसाधन साझाकरण के लिए खड़ा है।

इस विशेष मामले में इसे देखने का सबसे अच्छा तरीका स्थानीयहोस्ट का उपयोग करना है, अन्यथा यह काम नहीं करेगा यदि आप इसे अपने ब्राउज़र में खोलते हैं।

CSS clipping example

अंतिम परिणाम अविश्वसनीय दिखता है - और एक वेब पेज के लिए काफी रुचि जोड़ता है

प्रयोग करते समय, कृपया ध्यान रखें कि सभी ब्राउज़रों द्वारा सभी उल्लिखित सुविधाओं का समर्थन नहीं किया जाता है, इसलिए यह उन्हें जांचने के लायक है यहां । नवीनतम उदाहरण फ़ायरफ़ॉक्स, ओपेरा और आईई में काम नहीं करता है लेकिन उम्मीद है कि यह सभी ब्राउज़रों के लिए जल्द ही उपलब्ध होगा। और यदि आपके पास अपनी परियोजना के लिए स्टोर करने के लिए बहुत सारे दस्तावेज हैं, तो उन्हें सुरक्षित में सुरक्षित रखें [2 9] घन संग्रहण

।

[2 9] अधिक पढ़ें:

    [4 9] सीएसएस में परिवर्तनीय फोंट के साथ शुरू करें
[4 9] सीएसएस ग्रिड का उपयोग करने के लिए एक व्यापक गाइड [4 9] नया सीएसएस अब कोशिश करने के लिए नियम

कैसे करना है - सर्वाधिक लोकप्रिय लेख

Mixed-media art tutorial: How to watercolour over digital artwork

कैसे करना है Feb 6, 2026

(छवि क्रेडिट: नाओमी वेंडरन) [1 9] एक स्वतंत्र कल..

जैकिल के साथ एक ब्लॉग कैसे बनाएं

कैसे करना है Feb 6, 2026

(छवि क्रेडिट: नेट) [1 9] यह ट्यूटोरियल उन लोगों �..

How to mount your artwork

कैसे करना है Feb 6, 2026

एक अच्छी तरह से निष्पादित माउंट सिर्फ एक से अधिक �..

How to create glowing colours with oil paints

कैसे करना है Feb 6, 2026

मेरे वर्णन के लिए कहा जा रहा है पेंटिंग तकनीक ..

How to create a Pan's Labyrinth-style monster

कैसे करना है Feb 6, 2026

2 का पृष्ठ 1: पृष्ठ 1 [2 9] पृष्ठ 1 ..

How to paint delightful miniatures

कैसे करना है Feb 6, 2026

लघु चित्रकला की उत्पत्ति मध्ययुगीन युग में बहुत �..

पौराणिक प्राणियों को कैसे विकसित करें

कैसे करना है Feb 6, 2026

जो सॉफ्टवेयर के मिश्रण का उपयोग करके यथार्थवादी �..

The incredible power of flexbox

कैसे करना है Feb 6, 2026

फ्लेक्सबॉक्स, या लचीला बॉक्स लेआउट, एक शक्तिशाली ..

श्रेणियाँ