5 शांत CSS3 के प्रभाव आप अधिक देख रहे होंगे

विज्ञापन

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

पहला - सीएसएस क्या है?

यदि आप इस लेख को पढ़ रहे हैं, क्योंकि आप अंतर्ग्रही हैं, लेकिन सीएसएस का क्या अर्थ है, इसके बारे में कोई जानकारी नहीं है, तो मुझे जल्दी बताएं। CSS वेबपेजों को सजाने के लिए इस्तेमाल की जाने वाली कोडिंग भाषा है। इसका अर्थ है सीascading एसtyle एसहीट, और मूल रूप से बस शैली और स्वभाव को एक साइट में जोड़ता है। वेबसाइटें उनके सीएसएस के बिना निश्चित रूप से पठनीय हैं, लेकिन वे उसी तरह छिपी हैं जैसे 1995 में सभी वेबसाइटें वापस आ गईं थीं। जबकि HTML फ़ाइलें किसी पृष्ठ की संरचना और पाठ सामग्री का वर्णन करती हैं, CSS उन्हें डिज़ाइनर के तरीके से प्रदर्शित करता है पेज लेआउट, टेक्स्ट साइज और कलर्स और अब परिचय के साथ कई फैंसी प्रभाव से सब कुछ करना और निर्धारित करना CSS3 के।

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

कोने पर गोलाकार आकृति

गोल कोनों के लिए कोड वास्तव में आसान है:

.box_round {-मोज़-बॉर्डर-रेडियस: 20 पीएक्स; / * FF1 + * / -webkit-border-radius: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / बॉर्डर-त्रिज्या: 20px; / * ओपेरा 10.5, IE9, Saf5, Chrome, FF4 * /}

पाठ की छाया

यहाँ कुछ पाठ छाया के लिए कोड है:

.box_textshadow {पाठ-छाया: 1px 1px 3px # 888; / * FF3.5 +, ओपेरा 9+, Saf1 +, क्रोम * / }

ढ़ाल

यहाँ सीएसएस ग्रेडिएंट के लिए कोड है:

.box_gradient {पृष्ठभूमि-रंग: # 3f9fe3; पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, # 3f9fe3, # व्हाइट); / * FF3.6 * / पृष्ठभूमि: -Moz- रैखिक-ढाल (शीर्ष, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * फ़ायरफ़ॉक्स * / पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (शीर्ष, # 3f9fe3, # सफेद); / * IE10 * / पृष्ठभूमि-छवि: -o-linear-gradient (शीर्ष, # 3f9fe3, #white); / * ओपेरा 11.10+ * / पृष्ठभूमि-छवि: -webkit- ग्रेडिएंट (रैखिक, बाएं ऊपर, बाएं नीचे, (# 3f9fe3) से, (#white)); / * Saf4 +, क्रोम * / पृष्ठभूमि-छवि: -webkit-linear-gradient (शीर्ष, # 3f9fe3, #white); / * क्रोम 10+, Saf5.1 + * / पृष्ठभूमि-छवि: रैखिक-ढाल (शीर्ष, # 3f9fe3, # सफेद); फ़िल्टर: प्रोगिड: DXImageTransform। Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# सफेद'); / * IE6 – IE9 * / }

रोटेशन

यहाँ कोड कुछ घुमाने के लिए:

.box_rotate {-मोज़-ट्रांसफ़ॉर्म: रोटेट (7.5deg); / * FF3.5 + * / -o-transform: रोटेट (7.5deg); / * ओपेरा 10.5 * / -webkit- परिवर्तन: घुमाएँ (7.5 डिग्री); / * Saf3.1 +, क्रोम * / -ms-transform: रोटेट (7.5deg); / * IE9 * / परिवर्तन: घुमाएँ (7.5deg); फ़िल्टर: प्रोगिड: DXImageTransform। माइक्रोसॉफ्ट। मैट्रिक्स (/ * IE6 – IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0.9914448613738104, sizingMethod = 'ऑटो विस्तार'); ज़ूम: 1; }

एनीमेशन

जिस भी तत्व को आप बदलना चाहते हैं, उसके लिए आपको संक्रमण कोड की आवश्यकता होगी। आपको कुछ छद्म सीएसएस वर्गों का उपयोग करने की भी आवश्यकता होगी (जैसे: किसी भी गुण को बदलने के लिए जिसे आप एनिमेशन करना चाहते हैं, जैसे कि रंग, आकार या घुमाव)

.box_transition {-Moz- संक्रमण: सभी 0.5 s आसानी से बाहर; / * एफएफ 4 + * / -ओ-संक्रमण: सभी 0.5s आसानी से बाहर; / * ओपेरा 10.5+ * / -वेबकैट-संक्रमण: सभी 0.5s आसानी से बाहर; / * Saf3.2 +, क्रोम * / -ms- संक्रमण: सभी 0.5s आसानी से बाहर; / * IE10 * / संक्रमण: सभी 0.5 s आसानी से बाहर; } 

क्रॉस ब्राउज़र असंगतताएँ

हालांकि अधिकांश आधुनिक ब्राउज़र सभी तरह से CSS3 का समर्थन करते हैं, फिर भी कुछ को मानक के अपने विशेष कार्यान्वयन के साथ काम करने के लिए कुछ अलग कोड या हैक की आवश्यकता होती है। उदाहरण के लिए ऊपर दिए गए कोड में, आप -moz- या -webkit- के कुछ उदाहरण देखते हैं, जो सीएसएस गुणों में से कुछ से आगे निकलते हैं, जो या तो मोज़िला आधारित या वेबकिट आधारित ब्राउज़र से संबंधित हैं। इन अतिरिक्त लाइनों को लिखना हालांकि एक दर्द हो सकता है, इसलिए बाहर की जाँच करें css3 जनरेटर आप के लिए उन्हें लिखने के लिए।

निष्कर्ष

नए CSS3 और HTML5 एक्सटेंशन के साथ वेब पूरी तरह से अधिक रोमांचक होने जा रहा है। दी, हम एक और चमकता पाठ और व्हिज़-बैंग के उच्च अनुपात को वास्तविक सामग्री में देखने जा रहे हैं (बस जब हम चाहते हैं तो एनिमेटेड GIF को पहले "खोजा गया था") लेकिन लंबे समय में हम सीखेंगे कि अधिक दिलचस्प वेब बनाने के लिए CSS3 के टूल का उपयोग कैसे करें इंटरफेस। और हे, तुम हमेशा इसे बंद कर सकते हैं!

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