👏 🐾 ➕ CSS3 के साथ एक क्रिसमस कार्ड बनाएं 📲 🧓 👩🏿‍✈️

लंबे समय से प्रतीक्षित नए साल और क्रिसमस की छुट्टियां करीब आ रही हैं और उपहार और बधाई तैयार करने का समय आ गया है। और जैसा कि आप जानते हैं, सबसे अच्छा उपहार एक DIY उपहार है। :) इसलिए, आज हम CSS3 का उपयोग करके एक एनिमेटेड क्रिसमस कार्ड बनाएंगे। इस तरह के पोस्टकार्ड बनाने में आपको केवल कुछ मिनट लगेंगे, क्योंकि इसके लिए हम केवल कुछ पृष्ठभूमि चित्रों और CSS3 एनीमेशन का उपयोग करेंगे।

तो चलिए शुरू करते हैं।

HTML बेहद सरल होगी:

<!DOCTYPE html> <html> <head> <link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <link rel="stylesheet" media="screen" href="style.css"> </head> <body> <div id="wrapper"> <div id="container"> <h2>    !</h2> </div> </div> </body> </html>

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

 body { background-image: url('christmas.jpg'); background-repeat: no-repeat; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; background-size: cover; }

यहां हमने पृष्ठभूमि के आकार का उपयोग किया: कवर करें ताकि अनुपात बनाए रखते हुए हमारी पृष्ठभूमि पैमाने पर हो जाए।

गिरती हुई बर्फ के प्रभाव को बनाने के लिए, हम निम्नलिखित विचार का उपयोग करते हैं, इसके लिए हम बर्फ के टुकड़े, विभिन्न आकारों और एक पारदर्शी पृष्ठभूमि के साथ तीन चित्र लेते हैं। यदि आप इसे पसंद करते हैं, तो आप अधिक जोड़ सकते हैं, लेकिन हम यहां "बर्फ़ीला तूफ़ान" नहीं बनाते हैं और खुद को तीन तक सीमित करते हैं। हिमपात के साथ चित्र 500, 400 और 300 पिक्सेल के आकार के साथ वर्ग PNG- चित्र हैं, और, जैसा कि मैंने कहा, एक पारदर्शी पृष्ठभूमि के साथ। स्नोफ्लेक को उपयुक्त ब्रश का उपयोग करके फ़ोटोशॉप या जिम्प में खींचा जा सकता है। मैंने ~ प्रोजेक्ट-जिम्पबीसी द्वारा जिम्प जीआईएमपी स्नोफ्लेक ब्रश के लिए ब्रश का उपयोग किया। आप उन्हें अधिक प्राकृतिक दिखने के लिए विभिन्न आकारों में बर्फ के टुकड़े और धुंधली डिग्री भी सेट कर सकते हैं।

अब हम इन छवियों को अपने रैपर ब्लॉक (div # आवरण) पर लागू करते हैं। हम इसे 100% ऊंचाई पर सेट करेंगे ताकि यह विंडो के पूरे क्षेत्र पर कब्जा कर ले, और HTML और बॉडी टैग के लिए समान ऊंचाई निर्दिष्ट करना भी याद रखें।

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

 html, body { height: 100% } div#wrapper { background-image: url('snowflake1.png'), url('snowflake3.png'), url('snowflake2.png'); height:100%; }

एनीमेशन निर्माण

हम एनीमेशन बनाने के लिए @keyframes का उपयोग करेंगे। एनीमेशन के लिए नाम सेट करें, उदाहरण के लिए, बर्फ। आगे हम दो फ्रेम बनाएंगे। पहला यह है कि हमारा पेज एनीमेशन की शुरुआत में कैसा दिखेगा, दूसरा यह है कि यह अंत में कैसा दिखेगा। शुरुआत में, हमने पृष्ठ के ऊपरी बाएँ कोने में अपनी सभी पृष्ठभूमि छवियां रखीं, जिनकी पृष्ठभूमि-स्थिति "0px 0px" पर सेट है। फिर हम प्रत्येक छवि को पृष्ठ पर विभिन्न स्थानों पर ले जाते हैं।

 @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} }

कृपया ध्यान दें कि प्रत्येक ब्राउज़र के लिए, आपको यहां उपयुक्त उपसर्ग निर्दिष्ट करना होगा। परिणामस्वरूप, कोड इस तरह दिखेगा:

 @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-webkit-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-ms-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} }

अगले चरण में, हम एनीमेशन दिखाने के लिए नियम निर्धारित करेंगे। सबसे पहले, हम उस एनीमेशन का नाम इंगित करते हैं जिसका हम उपयोग करना चाहते हैं, इस मामले में "बर्फ", फिर एनीमेशन की अवधि (20 सेकंड), फिर हम एनीमेशन के प्रकार (रैखिक) का चयन करते हैं और, आखिरकार, एनीमेशन चक्र अंतहीन है।

 div#wrapper { background-image: url('snowflake.png'), url('snowflake3.png'), url('snowflake2.png'); height:100%; -webkit-animation: snow 20s linear infinite; -moz-animation: snow 20s linear infinite; -ms-animation: snow 20s linear infinite; animation: snow 20s linear infinite; }

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

 <link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

और यहाँ हमें परिणाम के रूप में मिला है:

प्रदर्शन

निष्कर्ष

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

नया साल मुबारक हो!

CSS3 के साथ एक क्रिसमस कार्ड बनाएं

More articles: