How to create glitch text and image effects in CSS

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

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

। और अपनी साइट को सही के साथ आसानी से चलते रहें [1 1] वेब होस्टिंग सर्विस।

ट्यूटोरियल में उपयोग की जाने वाली जावास्क्रिप्ट की एक छोटी सी मात्रा होगी - छवियों को पृष्ठ पर लोड करने के बाद लोडिंग स्क्रीन को हटाने के लिए - लेकिन यहां मुख्य फोकस चालू है [1 9] सीएसएस एनीमेशन

। हम भी इसका उपयोग करेंगे [1 9] सीएसएस ग्रिड स्क्रीन पर तत्वों की स्थिति के लिए।

• ट्यूटोरियल फ़ाइलें डाउनलोड करें [2 9] फाइल्सिलो से (मुफ्त, लॉगिन आवश्यक)

01. सेट अप करें

शुरू करने के लिए, खोलें [1 1] शुरू

से फ़ोल्डर [3 9] प्रोजेक्ट फाइलें [2 9] अपने कोड संपादक के अंदर। खोलें [1 1] index.html पेज, जिसमें केवल एक नंगे रक्त कंकाल एचटीएमएल पेज शामिल है। हेड सेक्शन में, फ़ॉन्ट्स को लिंक करने की आवश्यकता होती है ताकि डिज़ाइन सही तरीके से प्रदर्शित हो। फोंट के लिए शैली लिंक जोड़ें।

<link href="https://fonts.googleapis.com/css?family=IM+Fell+English|Playfair+Display:900"rel="stylesheet">

02. CSS को लिंक करें

सीएसएस में मूल लेआउट में शुरू किया गया है [1 1] site.css

फ़ाइल, लेकिन ग्लिच इफेक्ट से संबंधित सभी महत्वपूर्ण हिस्सों को बाद में जोड़ा जा रहा है। दस्तावेज़ के हेड सेक्शन में सीएसएस को लिंक करें ताकि पृष्ठ का मूल डिज़ाइन मौजूद हो।

 & lt; लिंक REL = "STYLESHEET" प्रकार = "टेक्स्ट / CSS"
href = "css / site.css" / & gt; 

03. लोडिंग स्क्रीन सेट अप करें

[6 9] पृष्ठ लोड होने पर यह स्क्रीन प्रदर्शित होगी

अब पृष्ठ के शरीर खंड में जाएं। इसमें पृष्ठ के सभी दृश्य तत्व हैं जो ब्राउज़र में दिखाई देते हैं। यहां एक div में जोड़ें जो पृष्ठ पर सब कुछ लोड होने तक 'प्रीलोडर स्क्रीन' रखेगा। यह पृष्ठ के केंद्र में एक लोगो प्रदर्शित करेगा।

 & lt; div id = "लोडर" वर्ग = "लोडिंग" & gt;
       & lt; div class = "लोडिंग-लोगो" & gt; & lt; img src = "img / logo.svg" वर्ग = "लोगो" & gt; & lt; / div & gt;
   & lt; / div & gt; 

04. हेडर बार जोड़ें

[6 9] ग्लिच टेक्स्ट प्रभाव को जोड़ने से पहले, डिजाइन के मूल तत्व

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

 & lt; div class = "contentfixed" & gt;
       & lt; हेडर क्लास = "हेडर" और जीटी;
           & lt; h1 वर्ग = "हेडर्टिटल" & ​​gt; & lt; img
src = "img / logo.svg" वर्ग = "लोगो" & gt; हैकरकोन & lt; / h1 & gt;
       & lt; / हेडर और जीटी;
       & lt; NAV Class = "MENU" ID = "SITENAV" & gt;
           & lt; उल & gt;
               & lit; li & gt; & lt; a href = "index.html" & gt; होम & lt; / a & gt; & lt; / li & gt;
               & lt; li & gt; & lt; a href = "news.html" & gt; समाचार & lt; / a & gt; & lt; / li & gt;
               & lit; li & gt; & lt; a href = "contact.html" & gt; संपर्क & lt; / a & gt; & lt; / li & gt;
               & lt; li & gt; & lt; a href = "about.html" & gt; के बारे में & lt; / a & gt; & lt; / li & gt;
           & lt; / उल & gt;
       & lt; / nav & gt;
   & lt; / div & gt; 

05. छवियां जोड़ें

अब निम्न अनुभाग में एक ही छवि के कई संस्करण शामिल हैं [1 1] गिल्टीट

कक्षा। यह क्या करेगा कि इन छवियों के अलग-अलग हिस्सों में एक गड़बड़ प्रभाव देने के लिए अलग-अलग समय पर चालू और बंद हो गया है। इसके बाद वह पाठ है जो छवियों के शीर्ष पर बैठेगा।

& lt; div class = "सामग्री" & gt;
       & lt; div class = "glitch" & gt;
            & lt; div class = "glitchit" & gt; & lt; / div & gt;
            & lt; div class = "glitchit" & gt; & lt; / div & gt;
            & lt; div class = "glitchit" & gt; & lt; / div & gt;
            & lt; div class = "glitchit" & gt; & lt; / div & gt;
            & lt; div class = "glitchit" & gt; & lt; / div & gt;
       & lt; / div & gt;
       & lt; div class = "cententection" & gt;
       & lt; h2 वर्ग = "contittitle" & gt; हैकर & lt; span & gt; con & lt; / span & gt; & lt; / h2 & gt;
          & lt; p class = "contenttext" & gt; एक विवरण जोड़ें & lt; / p & gt;
           & lt; / div & gt;
       & lt; / div & gt; 

06. ग्लिच टेक्स्ट प्रभाव को ट्रिगर करें

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

 & lt; स्क्रिप्ट और जीटी;
       var लोडर = document.getElementByID ('लोडर');
       window.addeventlistener ("लोड",
समारोह (घटना) {
           LOADER.CLASSLIST।
निकालें ('लोडिंग');
           loader.classlist.add ('लोड') जोड़ें;
           document.body.classlist।
जोड़ें ('imgloaded');
       });
& lt; / स्क्रिप्ट & gt; 

07. सीएसएस चर सेट अप करें

अभी पृष्ठ को सहेजें और आगे बढ़ें [1 1] site.css

CSS फ़ोल्डर में फ़ाइल। यहां पहले से कोड है, लेकिन नीचे दिखाए गए चर में किसी भी अन्य कोड के ठीक ऊपर। ये सीएसएस चर रंग और आकार रखेंगे जिनका उपयोग बाद में डिजाइन में किया जाएगा।

 शरीर {
   - रंग-पाठ: #fff;
   - रंग-बीजी: # 000;
   - रंग-लिंक: # 555;
   - रंग-लिंक-होवर: # 98 एफएडीएफ;
   - रंग-जानकारी: # F7CFB9;
   --glitch-चौड़ाई: 100vw;
   --glitch- ऊंचाई: 100vh;
   --gap-क्षैतिज: 10px;
   - गोलाकार: 5 पीएक्स;
   - समय-गोद: 4 एस;
   - डेले-एनीम: 2 एस; 

08. परिवर्तनीय सेटिंग्स के साथ प्रयोग

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

 --Blend-MODE-1: कोई नहीं;
   --Blend-MODE-2: ओवरले;
   --Blend-MODE-3: कोई नहीं;
   --Blend-MODE-4: कोई नहीं;
   --Blend-MODE-5: ओवरले;
   - ब्लेंडर-रंग -1: पारदर्शी;
   --Blend-Color-2: # 7D948E;
   - ब्लेंडर-रंग -3: पारदर्शी;
   - ब्लेंड-कलर -4: पारदर्शी;
   --Blend-Color-5: # AF4949;
} 

09. छवियों के साथ स्क्रीन भरें

कोड को अच्छी तरह से एक साथ रखने के लिए, उस टिप्पणी पर स्क्रॉल करें जो सीएसएस फ़ाइल में चरण 9 से 13 को चिह्नित करें, इस कोड में जोड़ना। यहाँ गड़बड़ कोड स्थिति [1 1] डिव

पूर्ण स्क्रीन भरने और स्क्रीन के ऊपरी बाईं ओर स्थित सभी छवियों को शामिल करना। ध्यान दें कि यह सीएसएस चर से इसकी चौड़ाई और ऊंचाई प्राप्त करता है।

 .glitch
{
   स्थिति: पूर्ण;
   शीर्ष: 0;
   बाएं: 0;
   चौड़ाई: var (- गड़बड़-चौड़ाई);
   ऊंचाई: var (- गड़बड़-ऊंचाई);
   बहुत ज्यादा गोपनीय;
} 

10. छवि स्थिति समायोजित करें

[6 9] ग्लिच इफेक्ट एक ही छवि की रिपोजिटेड प्रतियों का उपयोग करता है

चूंकि ग्लिच प्रभाव एक ही छवि की प्रतियों से बना है, यह कोड प्रत्येक स्थिति [1 1] डिव

पृष्ठ में और यह स्क्रीन से थोड़ा बड़ा बनाता है। यह इसे ऊपर की ओर रखता है और इसे बड़ा होने के लिए खाते में छोड़ देता है, और छवि को छवि भरने के लिए पृष्ठभूमि में रखा जाता है।

 .glitchit {
   स्थिति: पूर्ण;
   शीर्ष: कैल्क (-1 * var (- अंतराल-लंबवत));
   बाएं: कैल्क (-1 * var (- अंतराल-क्षैतिज));
   चौड़ाई: कैल्क (100% + var (- गैप-क्षैतिज) *
2);
   ऊंचाई: कैल्क (100% + var (- अंतराल लंबवत) *
2);
   पृष्ठभूमि: यूआरएल (../ img / main.jpg) नो-रिपीट
50% 0;
   पृष्ठभूमि-रंग: वार (- मिश्रण-रंग -1);
   पृष्ठभूमि आकार: कवर;
   ट्रांसफॉर्म: अनुवाद 3 डी (0, 0, 0);
   पृष्ठभूमि-मिश्रण-मोड: var (- मिश्रण-
मोड -1);
} 

11. छवियों का चयन करें

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

 .glitchit: nth- बच्चे (n + 2) {
   अस्पष्टता: 0;
}
.IMGLOLDED .GLICHIT: NTH-THILD (N + 2) {
   एनीमेशन-अवधि: var (- टाइम-एनीम);
   एनीमेशन-देरी: var (- देरी-एनीम);
   एनीमेशन-समय-समारोह: रैखिक;
   एनीमेशन-पुनरावृत्ति-गणना: अनंत;
} 

12. छवियों को दो और तीन समायोजित करें

दूसरी और तीसरी छवि इस कोड में एनिमेट करने के लिए सेट की गई है। उन्हें संबंधित मिश्रण और रंग मोड दिए जाते हैं ताकि वे अलग-अलग दिख सकें। यहां सबसे बड़ा अंतर यह है कि उन्हें मिश्रण करने के लिए अलग-अलग कीफ्रेम एनिमेशन दिए गए हैं।

 प्रभाव।
.IMGLOLDED .GLICHIT: NTH-THILD (2) {
   पृष्ठभूमि-रंग: वार (- मिश्रण-रंग -2);
   पृष्ठभूमि-मिश्रण-मोड: var (- मिश्रण-
मोड -2);
   एनीमेशन-नाम: गड़बड़ -1;
}
.IMGLOADED .GLICHIT: NTH-THILD (3) {
   पृष्ठभूमि-रंग: var (- मिश्रण-रंग -3);
   पृष्ठभूमि-मिश्रण-मोड: var (- मिश्रण-
मोड -3);
   एनीमेशन-नाम: गड़बड़ -2;
} 

13. छवियों को चार और पाँच समायोजित करें

इस बार अगली दो छवियां दूसरों के करीब हैं, लेकिन फिर इस बार इन छवियों के लिए अलग-अलग मिश्रण मोड और एनिमेशन दिखाने के लिए हैं। इनमें से कुछ एनिमेशन के लिए कीफ्रेम अभी तक नहीं बनाए गए हैं और यह अगले आएगा।

।
   पृष्ठभूमि-रंग: वार (- मिश्रण-रंग -4);
   पृष्ठभूमि-मिश्रण-मोड: var (- मिश्रण-
मोड -4);
   एनिमेशन-नाम: गड़बड़ -3;
}
.IMGLOLDED .GLICHIT: NTH-THILD (5) {
   पृष्ठभूमि-रंग: वार (- मिश्रण-रंग -5);
   पृष्ठभूमि-मिश्रण-मोड: var (- मिश्रण-
मोड -5);
   एनीमेशन-नाम: गड़बड़-फ्लैश;
} 

14. कीफ्रेम का पहला सेट जोड़ें

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

 @keyframes glitch-1 {
   0% {
       अस्पष्टता: 1;
       ट्रांसफॉर्म: अनुवाद 3 डी (var (- अंतर)
क्षैतिज), 0, 0);
       क्लिप-पथ: बहुभुज (0 2%, 100% 2%,
100% 5%, 0 5%);
   } 2% {
       क्लिप-पथ: बहुभुज (0 15%, 100% 15%,
100% 15%, 0 15%);
   } 

15. क्लिप-पथ का उपयोग करें

क्लिप पथ एक आयताकार ले रहा है ताकि पहले दो संख्याएं शीर्ष बाएं हों, फिर शीर्ष दाएं। इसके बाद नीचे दाएं और नीचे बाईं ओर है। इन नंबरों को ले जाकर छवि के विभिन्न हिस्सों अलग-अलग बिंदुओं पर दिखाई दे।

 4% {
       क्लिप-पथ: बहुभुज (0 10%, 100% 10%,
100% 20%, 0 20%);
   } 6% {
       क्लिप-पथ: बहुभुज (0 1%, 100% 1%,
100% 2%, 0 2%);
   } 8% {
       क्लिप-पथ: बहुभुज (0 33%, 100% 33%, 1
00% 33%, 0 33%);
   } 10% {
       क्लिप-पथ: बहुभुज (0 44%, 100% 44%,
100% 44%, 0 44%);
   } 

16. आंदोलन की गति

क्लिप पथ को इतनी जल्दी से कई कीफ्रेम पर ले जाकर, प्रभाव बनाता है और छवि के विभिन्न हिस्सों को एक अनियमित फैशन में चारों ओर फ़्लैश दिखाई देता है। जोड़ें कि छवियों की अधिक परतें भी ऐसा कर रही हैं और प्रभाव यह बहुत अच्छी तरह से काम करता है कि यह क्या करता है।

 12% {
       क्लिप-पथ: बहुभुज (0 50%, 100% 50%,
100% 20%, 0 20%);
   } 14% {
       क्लिप-पथ: बहुभुज (0 70%, 100% 70%,
100% 70%, 0 70%);
   } 16% {
       क्लिप-पथ: बहुभुज (0 80%, 100% 80%,
100% 80%, 0 80%);
   } 18% {
       क्लिप-पथ: बहुभुज (0 50%, 100% 50%,
100% 55%, 0 55%);
   } 20% {
       क्लिप-पथ: बहुभुज (0 70%, 100% 70%,
100% 80%, 0 80%);
   } 

17. छवि ग्लिच को समाप्त करें

22% के बाद छवि तब तक बंद हो जाती है जब तक कि एनीमेशन फिर से वापस न चलाता है। यह पूरा करता है [1 1] ग्लिच -1

के साथ प्रभाव [1 1] गिलिच -2 तथा [1 1] ग्लिच -3 पहले से ही कोड में आपूर्ति की जा रही है। अगला खंड उस पाठ को गड़बड़ करेगा जो छवि के शीर्ष पर भी है।

 21.9% {
       अस्पष्टता: 1;
       ट्रांसफॉर्म: अनुवाद 3 डी (var (- अंतर)
क्षैतिज), 0, 0);
   } 22%, 100% {
       अस्पष्टता: 0;
       ट्रांसफॉर्म: अनुवाद 3 डी (0, 0, 0);
       क्लिप-पथ: बहुभुज (0 0, 0 0, 0 0, 0
0);
   }
} 

18. ग्लिच टेक्स्ट कैसे बनाएं

[21 9]

[6 9] यह सुनिश्चित करने के लिए कि यह अभी भी पठनीय सुनिश्चित करने के लिए केवल संक्षेप में फिसल गया है

यह कोड पिछले कोड के समान ही काम करता है सिवाय इसके कि यह पाठ को उल्टा कर देता है और फिर इसे क्लिप करता है, एक कूदने वाला प्रभाव देने के लिए जो नाटकीय रूप से स्थानांतरित होता है। इसके बाद क्लिप पथ केवल कुंजीफ्रेम के माध्यम से तेजी से आंदोलन के साथ केवल छोटे वर्गों को प्रकट कर रहा है।

 @keyframes गड़बड़-पाठ {
   0% {
       ट्रांसफॉर्म: अनुवाद 3 डी (कैल्क (-1 *)
var (- गैप-क्षैतिज)), 0, 0) स्केल 3 डी (-1, -1,
1);
       क्लिप-पथ: बहुभुज (0 20%, 100% 20%,
100% 21%, 0 21%);
   } 2% {
       क्लिप-पथ: बहुभुज (0 33%, 100% 33%,
100% 33%, 0 33%);
   } 4% {
       क्लिप-पथ: बहुभुज (0 44%, 100% 44%,
100% 44%, 0 44%);
   } 

19. अधिक क्लिपिंग

प्रभाव क्लिपिंग पथ के आकार को तेजी से बदलकर कोड के इस खंड में जारी है। [1 1] क्लिप-पथ

इसके साथ आता है [1 1] -Webkit- उपसर्ग लेकिन संक्षिप्तता के लिए यह किसी भी कोड में यहां नहीं दिखाया गया है। लेखन के समय, क्लिप पथ वर्तमान में आईई, एज या ओपेरा मिनी में समर्थित नहीं है, लेकिन अन्य सभी ब्राउज़रों में है।

 5% {
       क्लिप-पथ: बहुभुज (0 50%, 100% 50%,
100% 20%, 0 20%);
   } 6% {
       क्लिप-पथ: बहुभुज (0 70%, 100% 70%,
100% 70%, 0 70%);
   } 7% {
       क्लिप-पथ: बहुभुज (0 80%, 100% 80%,
100% 80%, 0 80%);
   } 8% {
       क्लिप-पथ: बहुभुज (0 50%, 100% 50%,
100% 55%, 0 55%);
   } 

20. पाठ को वापस फ्लिप करें

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

 9% {
       क्लिप-पथ: बहुभुज (0 70%, 100% 70%,
100% 80%, 0 80%);
   } 9.9% {
       ट्रांसफॉर्म: अनुवाद 3 डी (कैल्क (-1 *)
var (- गैप-क्षैतिज)), 0, 0) स्केल 3 डी (-1, -1,
1);
   } 10%, 100% {
       ट्रांसफॉर्म: अनुवाद 3 डी (0, 0, 0)
स्केल 3 डी (1, 1, 1);
       क्लिप-पथ: बहुभुज (0 0, 100% 0, 100%
100%, 0% 100%);
   }
} 

21. एक त्वरित फ्लैश बनाएँ

[25 9]

[6 9] गड़बड़ प्रभाव एक व्यथित रूप देने के लिए हर कुछ सेकंड चलाता है

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

 @keyframes गड़बड़-फ्लैश {
   0%, 5% {
       अस्पष्टता: 0.2;
       ट्रांसफॉर्म: अनुवाद 3 डी (var (- अंतर)
क्षैतिज), var (- अंतराल-लंबवत), 0);
   } 5.5%, 100% {
       अस्पष्टता: 0;
       ट्रांसफॉर्म: अनुवाद 3 डी (0, 0, 0);
}} 

अपनी डिजाइन फ़ाइलों को सहेजने के लिए कहीं सुरक्षित हो गया? यदि नहीं तो आपको हमारी मार्गदर्शिका की आवश्यकता होगी [1 1] घन संग्रहण

विकल्प।

यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका वेब डिज़ाइनर में प्रकाशित किया गया था। मुद्दा 281 खरीदें [2 9] या सदस्यता लेने के [2 9] ।

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

• [1 9] अपनी वेबसाइट पर एक ग्लिच प्रभाव जोड़ें

[1 9] 10 अद्भुत नई सीएसएस तकनीकें

[1 9] CSS के साथ ब्राउज़र में कोलाज प्रभाव बनाएं