राउंडेड कॉर्नर्स बनाने के लिए, CSS3 में border-radius प्रॉपर्टी का उपयोग करें। राउंडेड कॉर्नर्स बनाने का कोड निम्न है -उदाहरण<!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {    

CSS में बॉर्डर इमेज बनाने के लिए, border-image प्रॉपर्टी का उपयोग करें। CSS में बॉर्डर इमेज बनाने का कोड निम्न है -उदाहरण<!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .border1 {    

मल्टीपल बैकग्राउंड्स जोड़ने के लिए, CSS में background-image प्रॉपर्टी का उपयोग करें। मल्टीपल बैकग्राउंड्स जोड़ने का कोड निम्न है -उदाहरण<!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { &

रेडियल ग्रेडिएंट का आकार सेट करने के लिए, radial-gradient() फंक्शन का उपयोग करें। यह फंक्शन रेडियल ग्रेडिएंट को बैकग्राउंड इमेज के रूप में सेट करता है। फंक्शन में पहला पैरामीटर उस आकार के रूप में सेट किया जाता है जैसा आप चाहते हैं जैसा नीचे दिखाया गया है -background-image: radial-gradient(ellipse,rg

3D ट्रांसफॉर्म्स के साथ, हम एलिमेंट को x-axis, y-axis और z-axis पर मूव कर सकते हैं। CSS3 3D ट्रांसफॉर्म के कुछ तरीके निम्न हैं -3D ट्रांसफॉर्म्स को कॉल करने के लिए नीचे दिए गए मेथड्स का उपयोग किया जाता है -क्र.सं.मान और विवरण1matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)मैट्रिक्स के 16 मानों का उपयोग कर

CSS3 ट्रांज़िशन इफेक्ट्स बनाने के लिए, transition प्रॉपर्टी का उपयोग करें। CSS3 का उपयोग करके ट्रांज़िशन इफेक्ट्स बनाने का कोड निम्न है -उदाहरण<!DOCTYPE html> <html> <head> <style> .container div {    width: 300px;    height: 100px;    background

रेडियल ग्रेडिएंट का आकार सेट करने के लिए, radial-gradient() फंक्शन का उपयोग करें। यह फंक्शन रेडियल ग्रेडिएंट को बैकग्राउंड इमेज के रूप में सेट करता है। फंक्शन में दूसरा पैरामीटर उस आकार के रूप में सेट किया जाता है जैसा आप चाहते हैं जैसा नीचे उदाहरण में दिखाया गया है -background-image: radial-gradien

CSS3 में text-overflow प्रॉपर्टी का उपयोग यह निर्धारित करने के लिए किया जाता है कि डिस्प्ले न होने वाला ओवरफ्लो कंटेंट उपयोगकर्ताओं को कैसे संकेत दिया जाता है।CSS3 में टेक्स्ट ओवरफ्लो हैंडल करने का कोड निम्न है -उदाहरण<!DOCTYPE html> <html> <head> <style> body {    

इमेज स्प्राइट का उपयोग करने का मुख्य लाभ HTTP रिक्वेस्ट की संख्या कम करना है जो हमारी साइट का लोड टाइम तेज़ बनाता है।CSS का उपयोग करके इमेज स्प्राइट से आइकन डिस्प्ले करने का कोड निम्न है -उदाहरण<!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe

इमेज स्प्राइट का उपयोग HTTP रिक्वेस्ट की संख्या कम करने के लिए किया जाता है जो हमारी साइट का लोड टाइम तेज़ बनाता है।CSS इमेज स्प्राइट का उपयोग करके नेविगेशन मेनू बनाने का कोड निम्न है -उदाहरण<!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI

फॉलबैक कलर का उपयोग उस स्थिति के लिए कलर निर्दिष्ट करने के लिए किया जाता है जब ब्राउज़र RGBA रंगों का समर्थन नहीं करता। कुछ ब्राउज़र जो फॉलबैक रंगों का समर्थन नहीं करते वे हैं ओपेरा 9 और नीचे, IE 8 और नीचे आदि। RGBA कलर से पहले एक सॉलिड कलर निर्दिष्ट करें ताकि यदि ब्राउज़र RGBA रंगों का समर्थन न करे

CSS में एट्रिब्यूट सिलेक्टर्स का उपयोग करके विशेष एट्रिब्यूट्स वाले HTML एलिमेंट्स पर स्टाइल्स लागू करें। एट्रिब्यूट सिलेक्टर पर निम्न नियम लागू होते हैं।p[lang] − lang एट्रिब्यूट वाले सभी पैराग्राफ एलिमेंट्स सिलेक्ट करता है।p[lang="fr"] − उन सभी पैराग्राफ एलिमेंट्स को सिलेक्ट

ग्रेडिएंट्स दो या अधिक रंगों का संयोजन प्रदर्शित करते हैं। लीनियर ग्रेडिएंट्स का उपयोग दो या अधिक रंगों को लीनियर फॉर्मेट में व्यवस्थित करने के लिए किया जाता है जैसे टॉप टू बॉटम। रेडियल ग्रेडिएंट्स केंद्र पर दिखाई देते हैं।CSS3 में लीनियर और रेडियल ग्रेडिएंट्स के उपयोग को दिखाने वाला कोड निम्न है -उ

ग्रेडिएंट की दिशा पर अधिक नियंत्रण के लिए, नीचे दिए गए सिंटैक्स में एंगल परिभाषित करें -background-image: linear-gradient(angle, color-stop1, color-stop2);CSS में एंगल्स का उपयोग करके लीनियर ग्रेडिएंट्स की दिशा सेट करने का कोड निम्न है -उदाहरण<!DOCTYPE html> <html> <head> <style

मल्टीपल कलर स्टॉप्स का उपयोग करके लीनियर ग्रेडिएंट बनाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {    height: 200px;    width:

लीनियर ग्रेडिएंट्स का उपयोग दो या अधिक रंगों को लीनियर फॉर्मेट में व्यवस्थित करने के लिए किया जाता है जैसे टॉप टू बॉटम। ट्रांसपेरेंसी जोड़ने के लिए, RGBA() फंक्शन का उपयोग करें और कलर स्टॉप्स परिभाषित करें।CSS3 का उपयोग करके ट्रांसपेरेंट लीनियर ग्रेडिएंट सेट करने का कोड निम्न है -उदाहरण<!DOCTYPE

CSS3 बॉक्स और टेक्स्ट शैडो इफेक्ट्स बनाने के लिए, क्रमशः box-shadow और text-shadow प्रॉपर्टी का उपयोग करें।CSS3 बॉक्स और टेक्स्ट शैडो इफेक्ट्स बनाने का कोड निम्न है -उदाहरण<!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Gen

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

CSS से डिफ़ॉल्ट टेक्स्ट सिलेक्शन कलर ओवरराइड करने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <style>    ::-moz-selection {       color: rgb(255, 255, 255);       background: rgb(118, 69, 231);    }  

CSS3 एक लेआउट मोड फ्लेक्सिबल बॉक्स प्रदान करता है, जिसे आमतौर पर फ्लेक्सबॉक्स कहा जाता है। फ्लेक्सबॉक्स (फ्लेक्सिबल बॉक्स) CSS3 का एक लेआउट मोड है। इस मोड का उपयोग करके, आप जटिल एप्लिकेशन्स और वेब पेजेज़ के लिए आसानी से लेआउट बना सकते हैं। इसमें कंटेनर, फ्लेक्स आइटम्स आदि शामिल हैं। कंटेनर में निम्न