CSS3 के लिए शुरुआती गाइड
2005 की घोषणा के बाद से, कैस्केडिंग स्टाइल शीट के स्तर 3 के विकास या जिसे CSS3 के रूप में जाना जाता है, को कई डिजाइनरों और डेवलपर्स द्वारा बारीकी से देखा और मॉनिटर किया गया है। CSS3 की नई विशेषताओं पर हमारे हाथ पाने के लिए हम सभी उत्साहित हैं - पाठ छाया, चित्र, अस्पष्टता, एकाधिक पृष्ठभूमि, आदि के साथ सीमाएँ, बस कुछ ही नाम करने के लिए.
आज तक, CSS3 के सभी चयनकर्ता अभी तक पूरी तरह से समर्थित नहीं हैं। लेकिन इसका मतलब यह नहीं है कि हम नए CSS3 के सामान का कुछ मजेदार परीक्षण नहीं कर सकते हैं। यह पोस्ट उन सभी डिजाइनरों और डेवलपर्स को समर्पित है जो पहले से ही CSS 2.1 से परिचित हैं और CSS3.0 पर अपने हाथों को गंदा करना चाहते हैं.
यह उपयोगी CSS3 रीड, सैंपल कोड, टिप्स, ट्यूटोरियल, चीट-शीट और बहुत कुछ का संकलन है। अपनी परियोजनाओं में उनका उपयोग करने के लिए स्वतंत्र महसूस करें, बस सुनिश्चित करें कि यह असंगत ब्राउज़रों पर इनायत से गिरता है.
CSS3 के साथ शुरुआत करना
CSS3 का परिचय
CSS और CSS3 के लिए एक (रोडमैप) आधिकारिक परिचय। यह दस्तावेज़ आपको CSS3 के विकास पर एक समग्र विचार देता है.
CSS3: डिजाइन को अगले स्तर पर ले जाएं
CSS3 के लाभ, CSS3 के गुणों और चयनकर्ताओं के स्पष्टीकरण और उदाहरणों के साथ.
CSS3 के साथ कई चालें
Webmonkey आपको CSS3 में कई बुनियादी ट्रिक्स के माध्यम से लाता है, जिसमें गोल बॉर्डर, बॉर्डर, ड्रॉप शैडो, इमेज ट्रिक्स और बहुत कुछ शामिल हैं.
साक्षात्कार: CSS3 पर एरिक मेयर के साथ छह प्रश्न
सिक्स रिवीजन के फोल्क्स ने सीएसएस 3 पर मूल्यवान अंतर्दृष्टि और उत्तरों के साथ एरिक मेयर का साक्षात्कार लिया.
CSS3: प्रगतिशील वृद्धि
आप ब्राउज़रों में CSS3 सुविधाओं का उपयोग करने के लिए कैसे सुंदर (या, प्रगतिशील) संवर्द्धन तकनीकों का उपयोग कर सकते हैं, जबकि यह सुनिश्चित करते हुए कि आपका कोड अभी भी पुराने ब्राउज़रों में एक संतोषजनक उपयोगकर्ता अनुभव प्रदान करेगा जो अभी तक उन सुविधाओं का समर्थन नहीं करते हैं.
CSS3: पृष्ठभूमि और सीमाएँ
गोलाकार सीमाएँ (बॉर्डर-त्रिज्या)
CSS3 के साथ गोल बॉर्डर बनाने के लिए एक गाइड बॉर्डर-त्रिज्या संपत्ति.
छवि के साथ गोल सीमाएँ (सीमा-चित्र)
सीमाओं के साथ छवियों का उपयोग कैसे करें सीमा की छवि संपत्ति.
CSS3 की सीमाएं, पृष्ठभूमि और बक्से
नए CSS3 गुणों के उदाहरणों के साथ विस्तार से व्याख्या: पृष्ठभूमि क्लिप, पृष्ठभूमि मूल के, पृष्ठभूमि संलग्न, डब्बे की छाया, बॉक्स-सजावट-तोड़, बॉर्डर-त्रिज्या तथा सीमा की छवि.
CSS3: पाठ
पत्र प्रभाव
CSS3 के साथ सरल अक्षर प्रभाव बनाएं.
पाठ छाया का उपयोग करते हुए छह पाठ प्रभाव
पाठ प्रभाव में शामिल हैं: विंटेज / रेट्रो, नियॉन, इनसेट, एनाग्लिफ़िक, फायर और बोर्ड गेम.
सुंदर टाइपोग्राफी
मूल मार्कअप कैसे लें और इसे शुद्ध CSS3 के माध्यम से एक आकर्षक और सुंदर टाइपोग्राफिक डिजाइन में बदल दें.
पाठ रोटेशन
चीजों को सही स्थिति में लाने के लिए एक छवि स्प्राइट और CSS का एक छिड़काव का उपयोग करता है.
पाठ की रूपरेखा
CSS3 का उपयोग करके अपने पाठ में एक रूपरेखा, या स्ट्रोक कैसे जोड़ें पाठ-स्ट्रोक संपत्ति.
पाठ मास्किंग प्रभाव
इंटरएक्टिव पाठ मास्किंग प्रभाव का उपयोग कर पाठ की छाया सीएसएस संपत्ति.
लिंक nudging (एनीमेशन) CSS3 के साथ
जावास्क्रिप्ट को डिस्क्राइब करें और CSS3 के साथ पूरी तरह से कुहनी से हलका धक्का लगाएँ.
सीएसएस चयन स्टाइल
CSS3 के साथ पाठ चयन स्टाइल बदलें.
CSS3: मेनू
एकाधिक-स्तंभ सामग्री
प्रत्येक कॉलम के लिए अलग-अलग परतों और (या) पैराग्राफ को असाइन किए बिना अपनी वेबसाइट पर कॉलम का एक सेट बनाने के लिए CSS3 का उपयोग करना.
बस सीएसएस के साथ सेक्सी टूलटिप्स
कैसे विकसित सीएसएस मानक का उपयोग करने के लिए कुछ सुंदर पार ब्राउज़र टूलटिप्स बढ़ा सकते हैं.
अधिक टूलटिप्स:
- शुद्ध CSS3 टूलटिप
- CSS3 के साथ टूलटिप्स.
ड्रॉप डाउन मेनू
Apple.com एक जैसे मल्टी-लेवल ड्रॉपडाउन मेनू का उपयोग करके कैसे बनाएं बॉर्डर-त्रिज्या, डब्बे की छाया, तथा पाठ की छाया.
CSS3- केवल टैब्ड एरिया
टैब पर क्लिक करें, सभी पैनलों को छिपाएं, टैब पर क्लिक किए गए टैब के अनुरूप एक को दिखाएं - सभी सीएसएस के साथ.
CSS3 के साथ 3 डी रिबन
केवल CSS3 के साथ अच्छे दिखने वाले 3 डी रिबन बनाएं.
CSS3: छाया को छोड़ें
छवि में छाया छोड़ें
छवियों का उपयोग किए बिना छाया को छोड़ने के लिए कई तकनीकों और कुछ संभावित दिखावे का प्रदर्शन करें.
बॉक्स शैडो के साथ ग्लो टैब्स
CSS3 में सहज और सुंदर टैब कैसे बनाएं जिसमें कोई छवि नहीं है.
CSS3: बटन
ट्यूटोरियल: सुंदर बटन
सुंदर क्रॉस-ब्राउज़र अनुरूप सीएसएस 3 बटन कैसे बनाएं जो कि शान से नीचा दिखाते हैं.
स्पीच बबल्स
सीएसएस 2.1 के साथ बनाया और CSS3 के साथ बढ़ाया भाषण बुलबुला प्रभाव के विभिन्न रूपों.
Github एक जैसे बटन
बटन का संग्रह जो दिखाता है कि सीएसएस 3 का उपयोग करना संभव है, जबकि सबसे सरल संभव मार्कअप को बनाए रखना भी है.
CSS3 और MooTools के साथ कताई, लुप्त होती प्रतीक
Dymanic, घूर्णन तत्वों को बनाने के लिए CSS3 और MooTools का उपयोग कैसे करें.
छवि ओवरले
CSS3 की सीमा-छवि संपत्ति का व्यावहारिक अनुप्रयोग.
अधिक
- CSS3 + म्यूटूल। मूटूलों में प्रयोग का एक उदाहरण। यह मूल MooTools फ्रेम काम में CSS3 के गुणों को जोड़ता है.
- CSS3 और MooTools या jQuery के साथ लोगो विस्फोट। स्थिर छवि लें और इसे माउस पर एक एनिमेटेड, विस्फोट प्रभाव बनाएं.
- HTML 5 और CSS 3 की शक्ति। HTML 5 और CSS 3 जल्दी से लोकप्रियता प्राप्त कर रहे हैं, पेरिशबल प्रेस यहाँ बताया गया है कि कैसे और क्यों.
- CSS3 के एनिमेशन और जावास्क्रिप्ट उदाहरण के साथ स्पिनिंग किरणें। एक छवि के पीछे सरल और सूक्ष्म किरण कताई प्रभाव.
- CSS3 Polaroid फोटो गैलरी। शुद्ध CSS स्टाइल के साथ Polaroid तस्वीरों के एक शांत दिखने वाले स्टैक का निर्माण कैसे करें.
- एचटीएमएल 5 और सीएसएस 3: तकनीक आप जल्द ही प्रयोग करेंगे। HTML5 और CSS3 के साथ जमीन से एक ब्लॉग बनाने पर एक पूर्वाभ्यास.
धोखा देती है और संदर्भ
CSS3 धोखा शीट (पीडीएफ)
सभी संपत्तियों, चयनकर्ता प्रकारों की पूरी सूची के साथ प्रिंट करने योग्य चिपसेट और W3C से वर्तमान CSS3 विनिर्देश में मूल्यों की अनुमति देता है.
ओपेरा 9.5 में सीएसएस सपोर्ट
ओपेरा 0.5 में समर्थित सीएसएस चयनकर्ताओं की पूरी सूची.
@ फॉन्ट-फेस एंबेडिंग के लिए उपलब्ध फोंट
वर्तमान में फोंट की व्यापक सूची जिसके लिए लाइसेंस प्राप्त है @फॉन्ट फ़ेस embedding.
सीएसएस 3 चयनकर्ताओं - समझाया
एक गाइड और CSS3 चयनकर्ताओं और इसके पैटर्न का संदर्भ.
क्रॉस-ब्राउज़र CSS3 नियम जनरेटर
CSS3 के नियम आप अपनी खुद की स्टाइलशीट पर कॉपी और पेस्ट कर सकते हैं.
CSS3 चार्ट पर क्लिक करें
एक क्लिक के भीतर सीएसएस 3 स्टाइल प्राप्त करें जैसे बॉक्स साइजिंग, बॉर्डर रेडियस, टेक्स्ट शैडो, और बहुत कुछ.
सीएसएस सामग्री और ब्राउज़र संगतता
ब्राउज़र-संगतता जांच के लिए घोषणा के साथ सीएसएस और सीएसएस 3 दोनों के चयनकर्ता तालिकाओं की पूरी सूची.
