-
CSS3 का उपयोग करके अतिप्रवाह पाठ को तोड़ना
ओवरफ्लो टेक्स्ट को तोड़ने के लिए, वर्ड-रैप प्रॉपर्टी का उपयोग करें और इसे ब्रेक-वर्ड मान पर सेट करें। CSS3 का उपयोग करके अतिप्रवाह पाठ को तोड़ने का तरीका प्रदर्शित करने वाला कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style> div { font-family: "
-
CSS3 का उपयोग करके बॉक्स-साइज़िंग के साथ लेआउट बनाना
CSS3 का उपयोग करके बॉक्स-साइज़िंग लेआउट बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <style> body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .container{ width: 500px; border:8px soli
-
CSS के साथ कैलेंडर कैसे बनाएं?
CSS के साथ कैलेंडर बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: b
-
फ्लेक्सबॉक्स के साथ एडवांस सीएसएस लेआउट
CSS3 एक लेआउट मोड फ्लेक्सिबल बॉक्स प्रदान करता है, जिसे आमतौर पर फ्लेक्सबॉक्स कहा जाता है। फ्लेक्सबॉक्स (लचीला बॉक्स) CSS3 का एक लेआउट मोड है। इस मोड का उपयोग करके, आप जटिल एप्लिकेशन और वेब पेजों के लिए आसानी से लेआउट बना सकते हैं। इसमें कंटेनर, फ्लेक्स आइटम आदि शामिल हैं। कंटेनर में निम्नलिखित गुण
-
CSS के साथ रिस्पॉन्सिव टाइमलाइन कैसे बनाएं?
सीएसएस के साथ एक रिस्पॉन्सिव टाइमलाइन बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" event="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; &nb
-
CSS का उपयोग करके टूलटिप बनाना
अतिरिक्त जानकारी सेट करने के लिए टूलटिप का उपयोग किया जाता है। यह वेब पेज पर तब दिखाई देता है जब विज़िटर माउस पॉइंटर को किसी तत्व पर ले जाता है। CSS का उपयोग करके टूलटिप बनाने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <style> body { font-family: "S
-
CSS के साथ स्किल बार कैसे बनाएं?
CSS के साथ स्किल बार बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * { box-sizing: border-box; } &nb
-
CSS3 का उपयोग करके पारदर्शी बॉक्स में टेक्स्ट
CSS3 के साथ पारदर्शी बॉक्स में टेक्स्ट सेट करने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .transparentBox { background: url("https://i
-
CSS3 कीफ़्रेम एनिमेशन कैसे बनाएं?
CSS3 में कीफ़्रेम एनिमेशन बनाने के लिए, अलग-अलग कीफ़्रेम को परिभाषित करें। कीफ़्रेम CSS3 में मध्यवर्ती एनिमेशन चरणों को नियंत्रित करेंगे। CSS3 का उपयोग करके कीफ़्रेम एनिमेशन बनाना निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style> div { width: 100px; &
-
सीएसएस अस्पष्टता / पारदर्शिता
CSS Opacity/Transparency के लिए, Opacity संपत्ति का उपयोग किया जाता है। उदाहरण के लिए, अस्पष्टता:0.3; सीएसएस का उपयोग करते हुए अस्पष्टता/पारदर्शिता दिखाने वाला कोड निम्नलिखित है - उदाहरण body { font-family:Segoe UI, Tahoma, Geneva, Verdana, sans-serif;}div {चौड़ाई:200px; ऊंचाई:200px; पृष्ठभूमि-रंग:
-
CSS सूचक-घटनाएँ संपत्ति
पॉइंटर-इवेंट प्रॉपर्टी निर्दिष्ट करती है कि क्या तत्व को कुछ कार्रवाई करनी चाहिए या नहीं जब उस पर पॉइंटर इवेंट ट्रिगर होता है। पॉइंटर ईवेंट को माउस क्लिक, टच, स्टाइलस, आदि द्वारा ट्रिगर किया जा सकता है। CSS में पॉइंटर-इवेंट प्रॉपर्टी दिखाने वाला कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <
-
सीएसएस पोजिशनिंग तत्व
पोजीशन प्रॉपर्टी का इस्तेमाल किसी एलीमेंट को पोजिशन करने के लिए किया जाता है। यानी निम्नलिखित पोजिशनिंग एलिमेंट हैं - स्थिर - एलिमेंट बॉक्स को सामान्य दस्तावेज़ प्रवाह के एक भाग के रूप में, पूर्ववर्ती तत्व और पूर्ववर्ती निम्नलिखित तत्वों का अनुसरण करते हुए रखा गया है। रिश्तेदार - एलिमेंट बॉक्स
-
सीएसएस छाया प्रभाव
क्रमशः टेक्स्ट-शैडो और बॉक्स-शैडो प्रॉपर्टी का उपयोग करके टेक्स्ट और एलिमेंट में शैडो जोड़ें। CSS में शैडो इफेक्ट के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-seri
-
कैसे सीएसएस के साथ एक उत्तरदायी तालिका बनाने के लिए?
CSS के साथ एक रिस्पॉन्सिव टेबल बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{ font-family: 'Segoe UI',
-
सीएसएस के साथ तुलना तालिका कैसे बनाएं?
CSS के साथ एक रिस्पॉन्सिव टेबल बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> table { border-collapse: collapse; &nb
-
एक फॉर्म में इनपुट तत्व के अंदर आइकन डालने के लिए सीएसएस
यह दिखाने के लिए कि CSS का उपयोग करके किसी इनपुट तत्व के अंदर एक आइकन कैसे रखा जाए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome. min.css" />
-
CSS के साथ फुल स्क्रीन वीडियो बैकग्राउंड कैसे बनाएं?
CSS के साथ एक पूर्ण स्क्रीन वीडियो पृष्ठभूमि बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * { box-sizing: border
-
CSS का उपयोग करके Cross Browser Opacity सेट करना
संपत्ति अस्पष्टता आधुनिक समाधान है और फ़ायरफ़ॉक्स 0.9+, सफारी 2, ओपेरा 9+, आईई 9+ और क्रोम के हर संस्करण के लिए काम करती है। -मोज़-अपारदर्शिता गुण 0.9 से अधिक पुराने फ़ायरफ़ॉक्स संस्करणों के लिए अस्पष्टता गुण है, जबकि -khtml-अस्पष्टता गुण 1 से शुरू होने वाले सफारी संस्करणों के लिए है। फ़िल्टर गुण IE
-
सीएसएस के साथ टॉगल स्विच (चालू/बंद बटन) कैसे बनाएं?
CSS के साथ टॉगल स्विच बनाने के लिए, कोड इस प्रकार है - उदाहरण .switch { पोजीशन:रिलेटिव; प्रदर्शन:इनलाइन-ब्लॉक; चौड़ाई:60 पीएक्स; ऊंचाई:34 पीएक्स; } .स्विच इनपुट { अस्पष्टता:0; चौड़ाई:0; ऊंचाई:0; } अवधि { स्थिति:निरपेक्ष; कर्सर:सूचक; शीर्ष:0; बाएं:0; दाएं:0; नीचे:0; पृष्ठभूमि-रंग:#ccc; -वेबकिट-संक्र
-
सीएसएस के साथ ज़ेबरा धारीदार तालिका कैसे बनाएं?
CSS के साथ ज़ेबरा स्ट्रिप्ड टेबल बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> table { border-collapse: collapse; &
