CSS से लिस्ट के बुलेट कलर्स बदलने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    body{       font-family: 'Segoe UI', Ta

CSS से वर्टिकल लाइन बनाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    .vLine {       border-left: 6px solid rgb(128, 0, 128);

CSS से विभिन्न डिवाइडर्स बनाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1" /> <head> <style>    body {       font-family: "Segoe UI",

CSS और JavaScript से कमिंग सून पेज बनाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <style>    body {       height: 100vh;       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       margin

CSS से चैट संदेश बनाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    body {       margin: 0 auto;       max-widt

CSS और JavaScript से पॉपअप चैट विंडो बनाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Sego

CSS से स्प्लिट स्क्रीन बनाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    body {       font-family: Arial;      

CSS से रिस्पॉन्सिव टेस्टिमोनियल्स बनाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe U

opacity प्रॉपर्टी अंतिम और आधुनिक समाधान है और Firefox 0.9+, Safari 2, Opera 9+, IE 9+ और Google Chrome के हर संस्करण के लिए काम करती है। -moz-opacity प्रॉपर्टी 0.9 से पुराने Firefox संस्करणों के लिए opacity प्रॉपर्टी है जबकि -khtml-opacity प्रॉपर्टी Safari 1 से शुरू होने वाले संस्करणों के लिए है। f

CSS में एडवांस्ड सिलेक्टर्स में एडजेसेंट सिबलिंग सिलेक्टर, एट्रिब्यूट सिलेक्टर, डायरेक्ट चाइल्ड सिलेक्टर, nth-of-type सिलेक्टर आदि शामिल हैं। इसमें जनरल सिबलिंग सिलेक्टर भी शामिल है, एक उदाहरण नीचे दिखाया गया है:h1 ~ h3डायरेक्ट चाइल्ड सिलेक्टर का उदाहरण -div > spanCSS में एडवांस्ड सिलेक्टर्स दिखा

CSS3 में वर्ड ब्रेकिंग नियम निर्दिष्ट करने के लिए, word-break प्रॉपर्टी का उपयोग करें। यह प्रॉपर्टी लाइन ब्रेक करने के लिए उपयोग की जाती है। संभावित मानों में normal, break-all, keep-all, break-word, आदि शामिल हैं।CSS3 का उपयोग करके वर्ड ब्रेकिंग नियम निर्दिष्ट करने का कोड निम्न है -उदाहरण<!DOCTY

प्सूडो-क्लास कीवर्ड्स का उपयोग उस सिलेक्टर की विशेष स्थिति निर्दिष्ट करने के लिए किया जाता है जिसमें यह जोड़ा जाता है। इससे हमें अधिक नियंत्रण मिलता है और अब हम किसी सिलेक्टर को तब टार्गेट कर सकते हैं जब वह किसी विशिष्ट स्थिति में हो जैसे: hover, checked, visited आदि।CSS में प्सूडो क्लासेज़ को दर्शा

opacity प्रॉपर्टी आधुनिक समाधान है और Firefox 0.9+, Safari 2, Opera 9+, IE 9+ और क्रोम के हर संस्करण के लिए काम करती है। -moz-opacity प्रॉपर्टी 0.9 से पुराने Firefox संस्करणों के लिए opacity प्रॉपर्टी है जबकि -khtml-opacity प्रॉपर्टी Safari 1 से शुरू होने वाले संस्करणों के लिए है। filter प्रॉपर्टी I

कलर स्टॉप्स पर लोकेशन को प्रतिशत या निरपेक्ष लंबाई के रूप में सेट किया जा सकता है। उदाहरण के लिए, लीनियर ग्रेडिएंट के लिएbackground-image: linear-gradient(    rgb(61, 255, 2) 40%,    rgb(0, 174, 255) 80%,    rgb(255, 29, 29) 20% );CSS का उपयोग करके लीनियर ग्रेडिएंट में

2D ट्रांसफॉर्म्स का उपयोग एलिमेंट स्ट्रक्चर को ट्रांसलेट, रोटेट, स्केल, और स्क्यू के रूप में पुनः बदलने के लिए किया जाता है।निम्न कुछ 2D ट्रांसफॉर्म फंक्शन्स हैं -क्र.सं.मान और विवरण1matrix(n,n,n,n,n,n)छह मानों के साथ मैट्रिक्स ट्रांसफॉर्म्स परिभाषित करता है2translate(x,y)x-axis और y-axis के साथ एलि

2D ट्रांसफॉर्म फंक्शन्स का उपयोग 2D ट्रांसफॉर्मेशन लागू करने के लिए किया जाता है जो किसी एलिमेंट पर रोटेट, मूव, स्केल और स्क्यू हो सकते हैं।Translate − एलिमेंट को x और y axis के साथ मूव करने के लिए।Scale − x y दिशा में एलिमेंट को रिसाइज़ करने के लिए।Rotate − एलिमेंट को कुछ डिग्री घ

फ्लेक्सबॉक्स से हॉरिजॉन्टल और वर्टिकल सेंटर अलाइनमेंट के लिए, CSS3 में align-items प्रॉपर्टी का उपयोग करें। align-items प्रॉपर्टी को center पर सेट करें।फ्लेक्सबॉक्स से हॉरिजॉन्टल और वर्टिकल सेंटर अलाइनमेंट का कोड निम्न है -उदाहरण<!DOCTYPE html> <html> <head> <style> body { &n

स्क्रीन साइज़ के आधार पर कॉलम चौड़ाई बदलने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample {    width: 50%;    background-color: l

मल्टीपल ट्रांज़िशन्स के लिए, CSS3 transition प्रॉपर्टी का उपयोग करें, जो एक शॉर्टहैंड प्रॉपर्टी है। यह एक ही लाइन में ट्रांज़िशन की प्रॉपर्टी, ड्यूरेशन, टाइमिंग और डिले सेट करता है।CSS3 का उपयोग करके मल्टीपल ट्रांज़िशन्स परफॉर्म करने का कोड निम्न है -उदाहरण<!DOCTYPE html> <html> <head

ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी हमें transition-property, transition-duration, transition-timing function और transition-delay को एक लाइन में transition प्रॉपर्टी के मान के रूप में निर्दिष्ट करने की अनुमति देती है।CSS में ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी का कोड निम्न है -उदाहरण<!DOCTYPE html> <