ऑनलाइन संसाधन लगभग अनंत हैं, लेकिन उन्हें गुणवत्ता का पता लगाना वास्तव में मुश्किल काम हैहालांकि थोड़ी खोज करने और डिजाइन के लिए समर्पित वेबसाइटों की एक अच्छी सूची होने से चीजें आसान हो जाती हैं। ऐसे समय में जब एचटीएमएल और सीएसएस जैसी भाषाएं एक महान समय में हैं, मुफ्त के करीब हो रही हैं, उच्च-गुणवत्ता वाले संसाधन लगभग कुछ ही क्लिक दूर हैं।
हम की एक श्रृंखला सूचीबद्ध करने जा रहे हैं HTML और CSS में मुफ्त कार्ड यह पूरी तरह से सभी प्रकार के ब्लॉग, व्यवसाय, ई-कॉमर्स और बहुत कुछ के लिए उपयुक्त हैं। एक लंबी दूरी का संग्रह ताकि यह आपके द्वारा किए जा रहे कुछ कार्यों में शामिल हो सके जो सभी प्रकार के ग्राहकों के लिए हो। आइए इसे इस सूची के साथ करते हैं जो codepen.io का उपयोग करता है ताकि आप HTML और CSS दोनों में कोड प्राप्त कर सकें।
ब्लॉग कार्ड मज़ा # 1
एक महान डिजाइन कार्ड कहते हैं कि लगभग हर छवि जो इसका प्रतिनिधित्व करती है, आप इसी कोड को प्राप्त करने और इसे अपनी वेबसाइट पर स्थापित करने के लिए codepen.io के माध्यम से जा सकते हैं।
सीएसएस समाचार कार्ड केवल सीएसएस
यह कार्ड, के साथ पृष्ठभूमि के रूप में अजीब चीजें, इसके चिकने एनीमेशन के लिए बाहर खड़ा है जो सामग्री का खुलासा करता है। यह शुद्ध सीएसएस है।
ब्लॉग पोस्ट आइटम
इस पर माउस पॉइंटर लाकर वेब का पूर्वावलोकन। इसमें CSS और HTML है आसान समावेश के लिए।
ब्लॉग कार्ड
एक न्यूनतम उत्तरदायी ब्लॉग कार्ड डिज़ाइन। तेज और चिकनी एनिमेशन उच्च गुणवत्ता जो किसी को उदासीन नहीं छोड़ती है।
उत्तरदायी व्यवसाय कार्ड
के लिए खड़ा है थोड़ा एनीमेशन कार्ड की छवि पर माउस पॉइंटर को मँडरा कर।
एक और ब्लॉग कार्ड
प्रकट होता है होवर करते समय कार्ड टेक्स्ट उसी में।
बिजनेस कार्ड
एक सरल लेकिन वर्तमान कार्ड HTML और CSS में डेमो और कोड के साथ जाएँ।
3 डी बिजनेस कार्ड
इस कार्ड की कीमत है HTML और CSS के साथ एक 3D एनीमेशन। ऐलेना नाज़रोवा द्वारा निर्मित, यह एक रंग-व्यापार व्यवसाय कार्ड के लिए एकदम सही है।
सीएसएस व्यवसाय कार्ड
सीएसएस में एक बहुत ही आकर्षक व्यवसाय कार्ड 3 डी में घूमता है URL पतों की एक श्रृंखला के लिए रास्ता बनाने के लिए जो माउस पॉइंटर का जवाब देते हैं जिस समय हम इसे डालते हैं।
कार्ड ग्रिड
के साथ अच्छी तरह से रखा कार्ड की एक श्रृंखला एक आंख को पकड़ने डिजाइन। यह अपने सरलीकृत सौंदर्यशास्त्र के लिए आश्चर्यजनक है, लेकिन HTML, CSS और SCSS कोड में एक अच्छी हिट के साथ।
3 डी कार्ड का खुलासा किया जा रहा है
कार्ड ग्रिड की यह श्रृंखला इस समय अधिक जानकारी प्रकट करें कि हमने माउस को हरे रंग में आइकन पर छोड़ दिया है। उसी समय जब हम पॉइंटर छोड़ते हैं, तो बाकी ग्रिड उसी के अनुसार चलते हैं।
उत्तरदायी सामग्री डिजाइन कार्ड
साथ गूगल डिजाइन भाषा, कार्डों की यह श्रृंखला दिखाई देती है जो मेनू आइकन के लिए बाहर खड़े होते हैं जो उदाहरण के मामले में अभिनेताओं की सभी जानकारी खोलता है। शानदार दृश्य उपस्थिति के साथ सुंदर और सहज ज्ञान युक्त एनिमेशन।
फ्लेक्सबॉक्स कार्ड ग्रिड
कार्ड प्रोटोटाइप ग्रिड फ्लेक्सबॉक्स प्रारूप का उपयोग करने के लिए वे जिस ऊंचाई पर खड़े होते हैं। इसके अन्य मूल्यों में सीएसएस पहलू अनुपात और सीएसएस फिल्टर का उपयोग है।
गुटों के संघर्ष का कार्ड
El लोकप्रिय मोबाइल गेम आंद्रे मदारंग द्वारा निर्मित HTML और CSS में उनके कार्ड हैं। हम एक सटीक और अत्यधिक दृश्य एनीमेशन के साथ उनके बीच से गुजर सकते हैं।
ईकामर्स के लिए स्लाइड कार्ड
एक साथ फुर्तीला एनीमेशन, ये कार्ड आपको उनके तत्वों के बारे में जानने के लिए प्रोत्साहित करते हैं कि वे किस बारे में हैं। उमर Dsoky से महान डिजाइन के साथ।
इंटरफ़ेस डिज़ाइन - उत्पाद कार्ड
उन लोगों को डिजाइन करने के लिए एक आदर्श कार्ड हमारे ईकामर्स का उत्पाद। HTML और CSS में बना है।
उत्पाद कार्ड
उसी कार्ड से हम कर सकते हैं कई छवियों के माध्यम से जाओ बेहतर उत्पाद देखने के लिए। इसमें Add to cart बटन शामिल है और इसमें HTML, CSS और JavaScript कोड शामिल हैं।
फ्लेक्सी उत्पाद कार्ड
जैसा कि इसके नाम से संकेत मिलता है, फ्लेक्सबॉक्स का उपयोग करता है एक दिलचस्प एनीमेशन बनाने के लिए जब हम ऐड टू कार्ट बटन पर क्लिक करते हैं।
फ्लिप कार्ड
एक चिकनी और के साथ कुछ कार्ड के लिए थोड़ा कोड सही एनीमेशन। कुछ ही मिनटों में आप उन्हें शामिल कर सकते हैं। हाल ही में कोडपेन में जोड़ा गया।
3 डी उत्पाद कार्ड के रूप में कार्ड
यह ध्यान दिया जाना चाहिए कि ये कार्ड हैं जैसे कि हमारे पास एक मेज पर कार्डों की एक श्रृंखला थी। पॉइंटर को छोड़ दिया गया है और वे ज़ूम इन करते हैं, हर एक पर क्लिक करते हैं और उत्पाद की जानकारी दिखाने के लिए कार्ड के पीछे दिखाते हैं। हम फिर से क्लिक करते हैं और इसे छोड़ देते हैं क्योंकि यह सामने था। 3D सीएसएस गुण सीखने के लिए बिल्कुल सही।
लंबन कार्ड
एक के साथ एक बहुत ही दृश्य प्रयोग आंख को पकड़ने फ्लिप प्रभाव। बेहतर है कि आप इसे यह जानने के लिए देखें कि यह किस बारे में बात कर रहा है।
कार्ड के लिए हॉवर प्रभाव
एक साधारण प्रभाव लेकिन बनावटी होवर कार्ड के बारे में।
सरल हॉवर प्रभाव
सरल प्रभाव के बजाय हड़ताली, लेकिन उस क्षण में इसका बड़ा प्रभाव पड़ता है, जिसकी हम कल्पना करते हैं।
लंबन गहराई कार्ड
ये कार्ड सहन करते हैं शीर्ष पर लंबन अवधारणा डिजाइन द्वारा कुछ बहुत हड़ताली कार्ड बनाने के लिए। आपको बस यह देखना होगा कि हमारे ब्लॉग की कुछ श्रेणियों का चयन करते समय उपयोगकर्ता पर इसका क्या प्रभाव पड़ता है।
फिल्मों के लिए यूआई कार्ड
का एक कार्ड HTML के साथ शानदार लेआउट और सीएसएस।
प्रोफाइल कार्ड
बहुत अच्छा एनिमेशन एक संपर्क कार्ड के लिए जिसमें हम सोशल मीडिया प्रोफाइल तक पहुंच को लागू कर सकते हैं। HTML और CSS।
पोलरॉइड बंडल कार्ड
गुणों के साथ, फ़िल्टर और सीएसएस कस्टम संक्रमण Polaroid समूहीकृत कार्ड की यह श्रृंखला बनाई गई है; इन एसवीजी छवियों वेब को याद मत करो.
वर्डप्रेस वाले पेज पर इनमें से कोई भी कार्ड डालना संभव होगा
मैं उन्हें प्यार करता हूं