कोडिंग कुंग-फू 35 ग्राफिक्स ने विशुद्ध रूप से CSS3 के साथ निर्माण किया

नीचे ग्राफिक्स देखें, कमाल का फ़ोटोशॉप सही काम करता है? नहीं, वे CSS3 द्वारा बनाए गए हैं। हां वे हैं पूरी तरह “तैयार” CSS3 द्वारा! जब हमने पर्याप्त CSS3 एनिमेशन देखे हैं तो हमने सोचा कि वे सभी CSS3 एक संभावित फ़्लैश किलर के रूप में कर सकते हैं, लेकिन हम गलत हैं। डेवलपर्स शायद एनीमेशन के मज़े से संतुष्ट नहीं हैं, इसलिए फिर से, वे ग्राफिक संपादक के दायरे को चुनौती देने के लिए CSS3 की सीमाओं को धक्का देते हैं.

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

Google क्रोम के सफारी या डेवलपर संस्करण के नवीनतम संस्करण का उपयोग करके इन डेमो को देखने के लिए आपको दृढ़ता से अनुशंसा की जाती है। हालांकि अधिकांश डेमो फ़ायरफ़ॉक्स और Google क्रोम के नवीनतम संस्करण का समर्थन करते हैं.

आरएसएस फ़ीड आइकन

RSS Feed Icon CSS3 के साथ बनाया गया है, विशेष रूप से हांगकीट से! लिंक के साथ एक ट्यूटोरियल आता है जिसे आप वास्तव में सीख सकते हैं “खींचना” एक भी छवि का उपयोग किए बिना आरएसएस फ़ीड आइकन। अपने हाथों से CSS3 का चमत्कार बनाएं!

Apple iMac

हाँ, मेरी आँखें भी इस बात पर विश्वास नहीं कर सकतीं, लेकिन यह आईमैक है “इकट्ठे” पूरी तरह से CSS3 के साथ.

Apple कीबोर्ड

यह Apple कीबोर्ड CSS3 के साथ बनाया गया है! बिल्ली, कीबोर्ड बटन भी दबाया जा सकता है.

एप्पल आईफोन

ओह, एक और बात: iPhoneCSS3.

चेरी ब्लॉसम

CSS3 की वास्तविक अजीबता यह है कि इसका उपयोग पौधों और जानवरों सहित कुछ भी बनाने के लिए किया जा सकता है!

कफ़ि की प्याली

एक थका देने वाला दिन? चलो एक CSS3 कॉफी है, सफारी / Google क्रोम के साथ सबसे अच्छी सेवा की जाती है.

डोरेमोन

यह डोरेमॉन CSS3 संगतता परीक्षण के लिए प्रसिद्ध है। इंटरनेट एक्सप्लोरर 8 या उससे नीचे की कोशिश करें और आपका दिन अच्छा रहे.

Meowww!

अब आप एक बिल्ली को देख रहे हैं जो पूरी तरह से कोड के साथ निर्मित है! CSS3 के खराब होने से ध्वनि प्रभाव उत्पन्न नहीं हो सकता है, कम से कम अभी के लिए.

मशरूम, ट्राइफर्स, पोके बॉल, किर्बी

“एक बेवकूफ होने के नाते, मैंने कुछ नीर्ड क्रिएशन बनाए हैं - एक मारियो मशरूम, ट्राइफ़ोर्स, एक पॉकेबॉल और किर्बी। जो लोग डायनासोर ब्राउज़र का उपयोग करते हैं, उनके लिए यह देखने का एक स्क्रीनशॉट है कि यह कैसा दिखता है.”

नियॉन बिल्ली

“इसमें 81 DOM एलिमेंट्स, प्योर CSS की 688 लाइन और लूपिंग ऑडियो के लिए एक जावास्क्रिप्ट फंक्शन है। मेरा सीएसएस CSSLint परीक्षण में विफल रहता है और मुझे इस पर गर्व है.”

पैटर्न्स

CSS3 इतना शानदार है कि इसका इस्तेमाल इन डिज़ाइनों जैसे वेब डिज़ाइन के लिए मौलिक संपत्ति बनाने के लिए भी किया जा सकता है.

BonBon

बोनबॉन मीठे CSS3 बटन हैं जो एक लक्ष्य को ध्यान में रखते हुए बनाए गए हैं: सेक्सी दिखने वाला, वास्तव में लचीले बटन जो कि संभव के रूप में सबसे न्यूनतर मार्कअप हैं।.

आईओएस प्रतीक

गजब का? हाँ। इन आइकॉन द्वारा बनाया गया है कोने पर गोलाकार आकृति, छैया छैया, ढ़ाल, RGBA, छद्म तत्वों, तथा रूपांतरण, जैसे वेस्टसीव के टूल्स और बॉर्डर रेडियस जैसे कुछ टूल्स की मदद से.

सोशल मीडिया आइकॉन

वेब डेवलपर के लिए सोशल मीडिया आइकन नहीं बनाना असंभव है अगर वे CSS3 के साथ iPhone और Doraemon का निर्माण कर सकते हैं। और उन्होंने इन आइकनों का वास्तव में अच्छा निर्माण किया.

सोशल मीडिया आइकॉन

सोशल मीडिया आइकन का एक और सेट जो प्रयोग करने योग्य आइकन बनाने में CSS3 की संभावनाओं को दर्शाता है.

अजीब

“अजीबोगरीब एक निशुल्क आइकन पैकेज है जो केवल सीएसएस में बनाया गया है। यह उन साइटों और वेब अनुप्रयोगों के लिए बनाया गया था जो कम से कम HTTP अनुरोधों पर निर्भर करते हैं या उन्हें किसी भी छवि का उपयोग करने की आवश्यकता नहीं होती है.”

जीयूआई प्रतीक

सिर्फ सीएसएस और अर्थ HTML का उपयोग कर 84 सरल जीयूआई आइकन। यह अभी भी माना जाता है “गैर-उत्पादन तैयार है” आइकन, लेकिन वे बहुत आशाजनक दिखते हैं.

स्टीव जॉब्स

स्टीव जॉब्स न केवल डिजिटल युग के आइकन हैं, बल्कि वे नेता भी हैं जो HTML5 को बहुत बढ़ावा देते हैं.

ट्विटर फेल व्हेल

इंटरनेट एक्सप्लोरर 8 या नीचे को छोड़कर, ट्विटर फेल व्हेल आपको आश्चर्यचकित करने में विफल नहीं होगी.

umbrUI

CSS3 के साथ उपयोगकर्ता इंटरफ़ेस तत्व संभव हो गए हैं, और यह वास्तव में चिकना दिखता है!

एडोब फोटोशॉप लोगो

फ़ोटोशॉप का उपयोग किए बिना फ़ोटोशॉप के लिए एक श्रद्धांजलि.

Android लोगो

एंड्रॉइड काफी सरल आकृतियों से बना है, लेकिन यह CSS3 के लाभ की व्याख्या करता है: आप साधारण सामान बना सकते हैं और इसे किसी भी तरह से संशोधित कर सकते हैं, जिसे आप केवल कोड का उपयोग करके चाहते हैं, लेकिन फ़ोटोशॉप नहीं.

Apple लोगो

रेट्रो Apple लोगो ने CSS3 का उपयोग करते हुए प्रस्तुत किया, फिर भी यह समय जितना भयानक था उतना ही भयानक था.

अटारी लोगो

सालों पहले, जिन्होंने सोचा होगा कि अटारी लोगो को CSS3 का उपयोग करके फिर से बनाया जाएगा.

बीपी लोगो

CSS3 के साथ सरल लोगो को आसानी से बनाया जा सकता है। यहाँ दिखाए गए इन लोगो में से कुछ के साथ सबसे अच्छी बात यह है कि आपको आज़माने के लिए कोड प्रदान किए गए हैं!

ड्रिबल लोगो

प्रसिद्ध उपयोगकर्ता-संचालित शोकेस साइट ड्रिबल का लोगो CSS3 का उपयोग करके प्रदर्शित किया गया.

Magento लोगो

Magento के लोगो को आकर्षित करना बहुत मुश्किल नहीं है, लेकिन परिणाम पेशेवर दिखता है.

मैकडॉनल्ड लोगो

मैं lovin 'CSS3 हूँ!

ट्विटर बर्ड

सही अनुपात, निर्माता को हैट टिप.

विंडोज लोगो

विंडोज लोगो! वास्तव में भयानक लग रहा है, और इसे बनाना आसान है!

इंटरनेट एक्सप्लोरर लोगो

सचमुच महान रचना! यह इंटरनेट एक्सप्लोरर 8 या उससे नीचे के प्रमुख ब्राउज़रों में काम करता है.

Google Chrome लोगो

मुझे यकीन नहीं है कि आप Google Chrome के नए लोगो से प्यार करते हैं या नहीं, लेकिन यह CSS3 Google Chrome लोगो बहुत अच्छा लग रहा है!

ओपेरा लोगो

अब आपके लिए एक अभ्यास: इस CSS3 के टुकड़े और वास्तविक सौदे के बीच क्या अंतर हैं?

HTML5 लोगो

HTML5 CSS3 के बिना चमक नहीं सकता!

वोक्सवैगन लोगो

रंग योजना को छोड़कर, यह CSS3 क्लोन मूल के समान दिखता है.

प्रतिबिंब

शुद्ध CSS3 से बने लोगो और ग्राफिक्स की तेजी के साथ, वास्तविक दुनिया के उत्पादन वातावरण में CSS3 द्वारा उत्पादित ग्राफिक्स की उपयोगिता के बारे में चर्चा करने वाले चर्चाएं आती हैं.

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

तुम क्या सोचते हो? क्या आप अपनी साइट में CSS3 के साथ बने ग्राफिक का उपयोग करेंगे? क्या आपके पास इसकी वर्तमान कमियों का कोई समाधान है? हमें अपने विचार बताएं, और यदि आप अभी CSS3 ग्राफिक को बेक करते हैं तो हमारे साथ साझा करें!

अधिक

CSS3 के साथ वास्तव में कुछ करने की इच्छा? आप सही जगह पर आए है! नीचे सीएसएस 3 में महारत हासिल करने के लिए आपकी सड़क पर आपकी सहायता के लिए गाइड और ट्यूटोरियल लिखे गए हैं.

• CSS3: एक ब्रेडक्रम्ब नेविगेशन मेनू बनाएँ
• CSS3: एक आरएसएस फ़ीड लोगो बनाएँ
• CSS3: एक खोज बॉक्स बनाएँ
• CSS3: शुरुआती गाइड
• CSS3 / HTML5: वेब पेज बनाएँ
• CSS3 / HTML5: एक AJAX आधारित संपर्क फ़ॉर्म बनाएँ