इमेज स्प्राइट एक ही इमेज फ़ाइल में कई इमेज को जोड़ता है। मुख्य लाभ: HTTP रिक्वेस्ट कम करना (लोड टाइम तेज़), इमेज स्विचिंग स्मूथ होना (होवर/एक्टिव स्टेट के लिए), और कैशिंग दक्षता। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva

रेडियल ग्रेडिएंट एक केंद्र बिंदु से बाहर की ओर रंग फैलाता है। डिफ़ॉल्ट आकार अंडाकार (ellipse) होता है, लेकिन circle भी सेट कर सकते हैं। कम से कम दो कलर स्टॉप आवश्यक हैं। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana

आधुनिक ब्राउज़र में opacity प्रॉपर्टी (0 से 1) काम करती है। यह पूरे तत्व (कंटेंट सहित) को पारदर्शी बनाती है। उदाहरण में दो समान इमेज हैं, दूसरी पर opacity: 0.3 लागू है। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana,

RGBA कलर फॉर्मेट में अल्फा चैनल (0 से 1) पारदर्शिता नियंत्रित करता है। rgba(0, 0, 255, 0.582) में 0.582 ओपेसिटी है। यह केवल बैकग्राउंड को पारदर्शी बनाता है, कंटेंट को नहीं। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verd

मार्जिन तत्व के चारों ओर बाहरी स्पेस बनाता है, जबकि पैडिंग तत्व के कंटेंट और बॉर्डर के बीच आंतरिक स्पेस बनाता है। दोनों लेआउट नियंत्रण के लिए आवश्यक हैं। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; }

इनलाइन फॉर्म में लेबल, इनपुट, और बटन एक पंक्ति में होते हैं। फ्लेक्सबॉक्स और मीडिया क्वेरी का उपयोग करके मोबाइल पर (<800px) ये वर्टिकल स्टैक हो जाते हैं। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1 /> <style>

इनलाइन JavaScript onfocus=this.value= का उपयोग करके फोकस पर इनपुट का मान क्लियर किया जा सकता है। यह प्लेसहोल्डर-जैसा व्यवहार देता है लेकिन वास्तविक मान के साथ। उदाहरण <!DOCTYPE html> <html> <head> <h1>Clearing an input field on focus example</h1> <input type=te

input[type=number] में ब्राउज़र डिफ़ॉल्ट रूप से स्पिन बटन (तीर) दिखाते हैं। इन्हें छुपाने के लिए WebKit के लिए ::-webkit-outer-spin-button और ::-webkit-inner-spin-button, और Firefox के लिए -moz-appearance: textfield का उपयोग करें। उदाहरण <!DOCTYPE html> <html> <head> <meta n

एनिमेटेड सर्च फॉर्म फोकस पर चौड़ाई बढ़ाता है। transition: width 0.4s ease-in-out का उपयोग करके स्मूथ एनिमेशन प्राप्त होता है। प्रारंभिक चौड़ाई 170px, फोकस पर 100%। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1> <

सर्च बटन में इनपुट फील्ड और सबमिट बटन साथ-साथ होते हैं। बटन में Font Awesome सर्च आइकन होता है। फ्लोट लेआउट से 80/20 चौड़ाई विभाजन, नीला बटन, होवर पर गहरा नीला। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1> <lin

नेविगेशन बार में दाईं ओर एक सर्च इनपुट फील्ड जोड़ा गया है। डार्क बैकग्राउंड, बैंगनी लिंक, और होवर पर ग्रे हाइलाइट के साथ यह एक क्लीन हेडर प्रदान करता है। उदाहरण <!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initi

रिस्पॉन्सिव नेविगेशन बार में लिंक और दाईं ओर एक लॉगिन फॉर्म होता है। मोबाइल पर (<977px) लिंक स्टैक हो जाते हैं और फॉर्म फुल-विड्थ हो जाता है जिसमें बॉटम बॉर्डर इनपुट होते हैं। उदाहरण <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport con

साइनअप फॉर्म में ईमेल, पासवर्ड, पासवर्ड दोहराएं, रिमेंबर मी चेकबॉक्स, शर्तें स्वीकृति, और कैंसल/साइनअप बटन शामिल हैं। गहरे हरे और लाल बटन स्पष्ट क्रिया अंतर प्रदान करते हैं। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Ver

रिस्पॉन्सिव चेकआउट फॉर्म बिलिंग एड्रेस और पेमेंट डिटेल्स को साइड-बाय-साइड दिखाता है (डेस्कटॉप पर) और मोबाइल पर स्टैक करता है। दाईं ओर ऑर्डर सारांश कार्ट आइटम और कुल दिखाता है। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=

कॉन्टैक्ट फॉर्म में नाम, ईमेल, और संदेश (टेक्स्टएरिया) फील्ड होते हैं। साफ लेआउट, पीला बैकग्राउंड, हरा सबमिट बटन, और होवर इफेक्ट के साथ यह उपयोगकर्ता-अनुकूल होता है। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1> &l

सोशल मीडिया लॉगिन फॉर्म में पारंपरिक ईमेल/पासवर्ड के साथ-साथ ट्विटर और फेसबुक बटन शामिल होते हैं। Font Awesome आइकन, ब्रांड रंग, और रिस्पॉन्सिव डिज़ाइन के साथ यह आधुनिक प्रमाणीकरण UI प्रदान करता है। उदाहरण <!DOCTYPE html> <html> <head> <title>Responsive login form with so

रजिस्ट्रेशन फॉर्म में ईमेल, पासवर्ड, पासवर्ड कन्फर्मेशन और शर्तें स्वीकृति शामिल होती हैं। स्टैक्ड लेआउट, फोकस स्टेट, और रिस्पॉन्सिव डिज़ाइन के साथ यह एक पूर्ण रजिस्ट्रेशन अनुभव प्रदान करता है। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-wid

फॉर्म इनपुट के अंदर आइकन रखने के लिए position: absolute और फ्लेक्सबॉक्स लेआउट का उपयोग किया जाता है। Font Awesome आइकन इनपुट फील्ड के बाईं ओर स्थित होते हैं, जिससे उपयोगकर्ता को फील्ड का उद्देश्य समझने में आसानी होती है। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewpo

ईमेल न्यूज़लेटर फॉर्म में नाम, ईमेल और चेकबॉक्स शामिल होते हैं। सेंटर-कंटेनर, बॉर्डर, और स्पष्ट कॉल-टू-एक्शन बटन के साथ यह रूपांतरण के लिए अनुकूलित होता है। उदाहरण <!DOCTYPE html> <html> <style> body { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bol

स्टैक्ड फॉर्म में सभी फील्ड्स वर्टिकली एक के नीचे एक व्यवस्थित होते हैं। यह मोबाइल-फर्स्ट डिज़ाइन के लिए आदर्श है और मीडिया क्वेरी के साथ बड़े स्क्रीन पर भी अच्छा दिखता है। उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1&g