लंबे अविराम टेक्स्ट (बिना स्पेस के URL, लंबे शब्द) को कंटेनर में फिट करने के लिए word-wrap: break-word (अब overflow-wrap: anywhere) उपयोग करें। डिफ़ॉल्ट normal ओवरफ्लो होने देता है। उदाहरण <!DOCTYPE html> <html> <head> <style> div { font-family: Segoe UI, Tahoma, Gene

box-sizing प्रॉपर्टी तय करती है कि width/height में पैडिंग/बॉर्डर शामिल हैं या नहीं। border-box (पैडिंग/बॉर्डर शामिल), content-box (डिफ़ॉल्ट, केवल कंटेंट)। border-box लेआउट आसान बनाता है। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahom

CSS कैलेंडर में महीना हेडर, दिन नाम पंक्ति, और तारीख ग्रिड होता है। ग्रिड display: inline-block और width: 13.6% (100%/7) से 7 कॉलम बनाता है। आज की तारीख हाइलाइटेड होती है। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verda

CSS3 फ्लेक्सबॉक्स (Flexible Box) जटिल लेआउट के लिए शक्तिशाली मोड है। कंटेनर प्रॉपर्टी: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content। आइटम प्रॉपर्टी: flex-grow, flex-shrink, flex-basis, align-self, order। उदाहरण div { background-color: #f1f1f1; margin: 10

रिस्पॉन्सिव टाइमलाइन में केंद्रीय रेखा और बारी-बाएं-दाएं इवेंट कार्ड होते हैं। मोबाइल पर (<600px) रेखा बाएं खिसक जाती है और सभी कार्ड दाएं आ जाते हैं। ::before/::after से तीर और डॉट बनते हैं। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width

टूलटिप होवर पर अतिरिक्त जानकारी दिखाता है। position: relative पैरेंट, position: absolute टूलटिप टेक्स्ट, visibility: hidden डिफ़ॉल्ट, :hover पर visible। त्रिकोण के लिए ::after प्सूडो-एलिमेंट। उदाहरण <!DOCTYPE html> <html> <style> body { font-family: Segoe UI, Tahoma, Geneva, Ve

स्किल बार कंटेनर और भरे हुए भाग से बनते हैं। कंटेनर ग्रे बैकग्राउंड, गोल कोने; भरा भाग रंगीन, चौड़ाई प्रतिशत दर्शाती है। लेबल और प्रतिशत टेक्स्ट शामिल। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1 /> <style>

पारदर्शी बॉक्स में टेक्स्ट रखने के लिए पैरेंट पर बैकग्राउंड इमेज, चाइल्ड पर सेमी-ट्रांसपेरेंट बैकग्राउंड (opacity: 0.6) उपयोग करें। टेक्स्ट पठनीय रहता है क्योंकि केवल बैकग्राउंड पारदर्शी है। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Ta

CSS3 कीफ्रेम एनिमेशन @keyframes नियम से परिभाषित होते हैं। from/to या प्रतिशत (0%, 50%, 100%) से मध्यवर्ती चरण नियंत्रित करें। animation शॉर्टहैंड से अवधि, पुनरावृत्ति, टाइमिंग फंक्शन सेट करें। उदाहरण <!DOCTYPE html> <html> <head> <style> div { width: 100px; hei

CSS में पारदर्शिता के दो तरीके: opacity प्रॉपर्टी (पूरा तत्व) और rgba() कलर (केवल बैकग्राउंड)। उदाहरण में दोनों दिखाए गए हैं - डिव पर rgba, इमेज पर opacity। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;

pointer-events प्रॉपर्टी तय करती है कि तत्व पॉइंटर इवेंट (क्लिक, होवर, टच) पर प्रतिक्रिया देगा या नहीं। none से तत्व क्लिक-थ्रू हो जाता है, auto डिफ़ॉल्ट व्यवहार है। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sa

CSS position प्रॉपर्टी चार मान लेती है: static (डिफ़ॉल्ट, नॉर्मल फ्लो), relative (नॉर्मल फ्लो + ऑफसेट), absolute (पैरेंट के सापेक्ष, फ्लो से बाहर), fixed (व्यूपोर्ट के सापेक्ष, स्क्रॉल पर स्थिर)। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe U

CSS में दो प्रकार की छाया: text-shadow टेक्स्ट के लिए, box-shadow बॉक्स/तत्व के लिए। दोनों में ऑफसेट (x, y), ब्लर रेडियस, और रंग निर्दिष्ट होते हैं। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; } h

रिस्पॉन्सिव टेबल के लिए टेबल को overflow-x: auto वाले डिव में लपेटें। छोटे स्क्रीन पर क्षैतिज स्क्रॉलबार दिखाई देगा, टेबल संरचना बनी रहती है। ज़ेबरा स्ट्रिपिंग शामिल है। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1>

कॉम्पेरिजन टेबल में फीचर कॉलम बाएं, प्लान कॉलम दाएं होते हैं। nth-child(even) से वैकल्पिक पंक्ति रंग, पहले कॉलम लेफ्ट-अलाइन, बाकी सेंटर। रिस्पॉन्सिव नहीं है लेकिन साफ डिज़ाइन। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=

इनपुट के अंदर आइकन दिखाने के लिए पैरेंट पर position: relative और आइकन पर position: absolute उपयोग करें। फ्लेक्सबॉक्स वैकल्पिक है; यहां आइकन निरपेक्ष स्थित है और इनपुट में बाएं पैडिंग है। उदाहरण <!DOCTYPE html> <html> <head> <link rel=stylesheet href=https://cdnjs.cloudflare.

फुल-स्क्रीन वीडियो बैकग्राउंड के लिए position: fixed, min-width: 100%, min-height: 100% उपयोग करें। कंटेंट ओवरले के लिए rgba पारदर्शिता, और प्ले/पॉज़ बटन जावास्क्रिप्ट से नियंत्रित होता है। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width,

पुराने ब्राउज़र सपोर्ट के लिए कई ओपेसिटी प्रॉपर्टी एक साथ उपयोग करें: opacity (आधुनिक), filter: alpha(opacity=30) (IE 5-9), -moz-opacity (पुराना फायरफॉक्स), -khtml-opacity (पुराना सफारी)। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahom

टॉगल स्विच एक चेकबॉक्स को छुपाकर (opacity: 0) और लेबल (span) को स्टाइल करके बनाया जाता है। :checked प्सूडो-क्लास और transform: translateX() से स्लाइडिंग एनिमेशन प्राप्त होता है। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scal

ज़ेबरा स्ट्रिपिंग में वैकल्पिक पंक्तियों का रंग अलग होता है। tr:nth-child(even) सिलेक्टर का उपयोग करके सम पंक्तियों को स्टाइल किया जाता है। इससे बड़ी टेबल पढ़ना आसान हो जाता है। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scal