CSS3 के साथ RSS फ़ीड लोगो कैसे बनाएँ

यह लेख हमारा हिस्सा है "HTML5 / CSS3 ट्यूटोरियल सीरीज़" - आपको एक बेहतर डिजाइनर और / या डेवलपर बनाने में मदद करने के लिए समर्पित है. यहां क्लिक करे एक ही श्रृंखला से अधिक लेख देखने के लिए.

RSS फ़ीड लोगो वेब डिज़ाइन में सबसे अधिक उपयोग किए जाने वाले लोगो में से एक है, इसे संदर्भित फ़ंक्शन के कारण। आपने फ़ोटोशॉप जैसे ग्राफिक सॉफ़्टवेयर का उपयोग करके आरएसएस फ़ीड लोगो को चित्रित करने पर कई ट्यूटोरियल देखे, लेकिन कैसे CSS3 का उपयोग करके इसे पूरी तरह से चित्रित करना? हाँ, तुमने मुझे सुना :-)

इस अवसर में मैं आपको सिर्फ CSS3 के साथ एक मानक RSS फ़ीड लोगो बनाने का आसान तरीका दिखाना चाहता हूं, इसलिए अपने पहले CSS3 फ़ीड लोगो को प्राप्त करने के लिए व्यापक चरणों और ग्राफिक्स वाले ट्यूटोरियल का पालन करें।!

एक मिनट में आप क्या बना रहे हैं, इसका पूर्वावलोकन यहां दिया गया है। आप ट्यूटोरियल के अंत में स्रोत फ़ाइलों को भी डाउनलोड कर सकते हैं.

चरण 1

एक HTML फ़ाइल बनाएँ, अगर यह पूरी तरह से खाली है तो फ़ाइल में निम्न कोड डालें.

       - यहां अपना HTML डालें -   

चरण 2

फ़ीड बॉक्स बनाने के लिए HTML फ़ाइल में नीचे कोड डालें.

फ़ीड बॉक्स के लिए HTML

फ़ीड बॉक्स के लिए सीएसएस

 स्पैन.फीड-बॉक्स डिस्प्ले: ब्लॉक; चौड़ाई: 200px; ऊँचाई: 200px; मार्जिन: 0 ऑटो; पृष्ठभूमि: # F9A004; box-shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px # # C27C03, 6px 6px 0 # C27C03; -मोज़-बॉक्स-छाया: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # C27C03; -webkit-box-shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # C27C03; -मोज़-बॉर्डर-त्रिज्या: 20 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 20 पीएक्स; सीमा-त्रिज्या: 20 पीएक्स;  स्पैन.फीड-बॉक्स * फ्लोट: राइट; प्रदर्शन क्षेत्र; 

यह वह परिणाम है जो आप प्राप्त करेंगे:

चरण 3

हम एक और बॉक्स तैयार करेंगे जो पहले फीड बॉक्स के अंदर स्थित है, इसलिए नीचे दिए गए HTML कोड को पहले फीड बॉक्स के HTML कोड में डालें। हम यहां बाधा के रूप में सीमा को भी जोड़ेंगे.

छोटे फीड बॉक्स के लिए HTML

छोटे फीड बॉक्स के लिए सीएसएस

 स्पैन.फीड-बॉक्स-फीड-बॉक्स-इन बॉर्डर: 4 पीएक्स सॉलिड # FFC563; चौड़ाई: 184px; ऊंचाई: 184px; मार्जिन: 4 पीएक्स 4 पीएक्स 0 0; -मोज़-बॉर्डर-त्रिज्या: 20 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 20 पीएक्स; सीमा-त्रिज्या: 20 पीएक्स; /* छिपा हुआ सैलाब; * *

यह वह परिणाम है जो आप प्राप्त करेंगे:

चरण 4

इस चरण में हम 1/4 बड़ा वृत्त बना रहे हैं। 1/4 बड़े सर्कल के HTML कोड को छोटे फीड बॉक्स के HTML कोड में डालें, और नीचे इसका कोड है:

1/4 बिग सर्कल के लिए HTML

1/4 बिग सर्कल के लिए सीएसएस

 स्पैन.फीड-बॉक्स -फीड-बॉक्स-इन-फिल्ड .फीड-क्वार्टर-सर्कल-बड़ा मार्जिन: 16 पीएक्स 16 पीएक्स 0 0; चौड़ाई: 260 पीएक्स; ऊंचाई: 260 पीएक्स; बॉर्डर: 30px ठोस # FFDEA5; -मोज़-बॉर्डर-रेडियस: 260 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 260px; सीमा-त्रिज्या: 260 पीएक्स; 

यह वह परिणाम है जो आप प्राप्त करेंगे:

चरण 5

अब हम 1/4 छोटे सर्कल बना रहे हैं, नीचे दिए गए HTML कोड को बड़े सर्कल के HTML कोड में डाल दें.

1/4 स्मॉल सर्कल के लिए HTML

1/4 छोटे सर्कल के लिए सीएसएस

 स्पैन.फीड-बॉक्स -फीड-बॉक्स-इन-फिल्ड .फीड-क्वार्टर-सर्कल-बिग -फीड-क्वार्टर-सर्कल-छोटा मार्जिन: 16 पीएक्स 16 पीएक्स 0 0; चौड़ाई: 176px; ऊंचाई: 176 पीएक्स; बॉर्डर: 26px ठोस # FFDEA5; -मोज़-बॉर्डर-रेडियस: 176px; -वेबकिट-बॉर्डर-त्रिज्या: 176px; सीमा-त्रिज्या: 176px

यह वह परिणाम है जो आप प्राप्त करेंगे:

चरण 6

चरण 6 में सबसे छोटा सर्कल छोटे सर्कल के अंदर बनाया जाएगा, इसलिए इसके HTML कोड को छोटे सर्कल के HTML कोड में डालें.

सबसे छोटे सर्कल के लिए HTML

सबसे छोटे सर्कल के लिए सीएसएस

 स्पैन.फ़ीड-बॉक्स-फ़्लाइट-बॉक्स-इन-.फ़ीड-क्वार्टर-सर्कल-बड़ा-.फ़ीड-क्वार्टर-सर्कल-छोटा। फीगर-सर्कल मार्जिन: जीपीएक्सएक्सएक्सएक्सएक्स 0 0; पृष्ठभूमि: # FFDEA5; चौड़ाई: 70 पीएक्स; ऊंचाई: 70 पीएक्स; -मोज़-बॉर्डर-त्रिज्या: 70 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 70 पीएक्स; सीमा-त्रिज्या: 70px

यह वह परिणाम है जो आप प्राप्त करेंगे:

अंतिम रूप देना

कोड खोजें, /* छिपा हुआ सैलाब; * / फिर इस कोड के साथ बदलें, छिपा हुआ सैलाब;, तो ठीक! आपने बस एक CSS3 RSS फ़ीड लोगो प्राप्त किया!

बोनस: होवर इफेक्ट जोड़ें

आप जादुई होवर प्रभाव के बिना अपने आरएसएस फ़ीड लोगो नहीं चाहेंगे, क्या आप? बस इसे प्राप्त करने के लिए नीचे सीएसएस शैली जोड़ें!

Hover प्रभाव के लिए सीएसएस

 स्पैन.फीड-बॉक्स: होवर पृष्ठभूमि: # 07C103; box-shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px # # 058E02, 6px 6px 0 # 058E02; -मोज़-बॉक्स-छाया: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; -webkit-box-shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02;  span.feed-box: hover .feed-box-in बॉर्डर-कलर: # 58FC55;  span.feed-box: hover .feed-box-in -feed-क्वार्टर-सर्कल-बड़ा, स्पैन.फुट-बॉक्स: hover .feed-box-in -feed-क्वार्टर-सर्कल-बड़ा-feed-क्वार्टर-सर्कल। -स्मॉल बॉर्डर-कलर: # B9FFB7;  span.feed-box: hover .feed-box-in -feed-क्वार्टर-सर्कल-सर्कल-बिग -फीड-सर्कल-सर्कल-सर्कल-छोटा .feed-सर्कल बैकग्राउंड: # B9FFB7; 

पूर्वावलोकन और डाउनलोड

यहाँ CSS3 फ़ीड लोगो के आकार और भिन्न शैली में पूर्वावलोकन हैं। यदि आप कुछ कदम हासिल नहीं कर सकते, तो आप स्रोत फ़ाइलों को भी डाउनलोड कर सकते हैं.

• CSS3 RSS लोगो का पूर्वावलोकन करें (विशाल)
• CSS3 RSS लोगो का पूर्वावलोकन करें (मध्यम)
• CSS3 RSS लोगो का पूर्वावलोकन करें (छोटे)
• CSS3 RSS लोगो का पूर्वावलोकन करें (मध्यम, उल्टा)
• CSS3 RSS लोगो स्रोत फ़ाइलें डाउनलोड करें (.Zip)

संपादक की टिप्पणी: इस पोस्ट के द्वारा लिखा गया है इरहम केंडनी Hongkiat.com के लिए। इरम, जिसे इंदम के रूप में भी जाना जाता है, इंडोनेशिया से एक वेब डिजाइनर और डेवलपर है। वह सीएसएस और वर्डप्रेस थीम के विकास से भी प्यार करता है.