scaleX(x) मेथड का उपयोग x-axis का उपयोग करके एलिमेंट को स्केल ट्रांसफॉर्म करने के लिए किया जाता है। आइए सिंटैक्स देखें: scaleX(x) यहां, x प्रत्येक बिंदु के abscissa पर लागू होने वाले स्केलिंग फैक्टर को दर्शाने वाली एक संख्या है। आइए एक उदाहरण देखें: div {    width: 60px;    heig

scaleZ(z) मेथड का उपयोग z-axis का उपयोग करके एलिमेंट को स्केल ट्रांसफॉर्म करने के लिए किया जाता है। आइए सिंटैक्स देखें: scaleZ(z) यहां, z प्रत्येक बिंदु के z-coordinate पर लागू होने वाले स्केलिंग फैक्टर को दर्शाने वाली एक संख्या है। आइए एक उदाहरण देखें: div {    width: 60px;    

border-image-width प्रॉपर्टी का उपयोग बॉर्डर इमेज की चौड़ाई सेट करने के लिए किया जाता है। border-image-width प्रॉपर्टी को लागू करने के लिए निम्नलिखित कोड आज़माएं: उदाहरण <html>    <head>       <style>          #borderimg1 {  

CSS3 रिसाइज़ प्रॉपर्टी के तीन सामान्य मान नीचे दिखाए गए हैं: horizontal (क्षैतिज) vertical (लंबवत) both (दोनों) उदाहरण CSS3 यूजर इंटरफेस में रिसाइज़ प्रॉपर्टी में both मान का उपयोग: <html>    <head>       <style>          div { &

आउटलाइन का अर्थ है बॉर्डर के बाहर एलिमेंट के चारों ओर एक लाइन खींचना। उदाहरण CSS3 outline-offset प्रॉपर्टी को लागू करने के लिए निम्नलिखित कोड आज़माएं: <html>    <head>       <style>          div {          

आइए CSS2 साइज़िंग प्रॉपर्टी और CSS3 box-sizing प्रॉपर्टी के बीच का अंतर समझते हैं। CSS2 साइज़िंग प्रॉपर्टी <html>    <head>       <style>          .div1 {             width: 200px;      

Box-sizing प्रॉपर्टी का उपयोग एलिमेंट की ऊंचाई और चौड़ाई बदलने के लिए किया जाता है। CSS2 से, बॉक्स प्रॉपर्टी नीचे दिखाए अनुसार काम करती है: width + padding + border = एलिमेंट के बॉक्स की वास्तविक दृश्य/रेंडर्ड चौड़ाई height + padding + border = एलिमेंट के बॉक्स की वास्तविक दृश्य/रेंडर्ड ऊंचाई उदाहर

मीडिया क्वेरीज़ मोबाइल, डेस्कटॉप आदि जैसे विभिन्न आकार के डिवाइस के लिए अलग-अलग स्टाइल नियमों के लिए होती हैं। CSS3 के साथ मीडिया क्वेरीज़ लागू करने के लिए निम्नलिखित कोड आज़माएं: उदाहरण <html> <head> <style> body { background-color: lightpink; } @media screen and (max-width: 42

रिस्पॉन्सिव वेब डिज़ाइन विभिन्न डिवाइस जैसे डेस्कटॉप, मोबाइल और टैबलेट पर न्यूनतम रिसाइज़िंग के साथ इष्टतम अनुभव, आसान पढ़ने और आसान नेविगेशन प्रदान करता है। आइए देखें कि रिस्पॉन्सिव वेब डिज़ाइन क्या है:

अलग-अलग CSS स्टाइल नियमों के लिए मीडिया क्वेरीज़ सेट करने के लिए, आप निम्नलिखित कोड आज़मा सकते हैं: उदाहरण <html>    <head>       <style>          body {             background-color: lightpink;  

CSS3 ने फॉन्ट कॉम्बिनेशन तकनीक अपनाई है। इसमें, यदि ब्राउज़र पहला फॉन्ट सपोर्ट नहीं करता तो यह अगले फॉन्ट को आज़माता है। आइए Sans-Serif फॉन्ट्स का एक उदाहरण देखें:

CSS में चौड़ाई, मार्जिन, पैडिंग, फॉन्ट-साइज़, बॉर्डर-चौड़ाई आदि के लिए कई यूनिट्स हैं। लंबाई को संख्यात्मक मान के बाद लंबाई यूनिट्स जैसे px, dp, em आदि का उपयोग करके दर्शाया जाता है। यह संख्यात्मक मान और लंबाई यूनिट्स के बीच सफेद स्थान की अनुमति नहीं देता है। लंबाई यूनिट्स निम्नानुसार विभाजित हैं:

रिलेटिव यूनिट्स में, लंबाई का मान फिक्स होता है और यह एलिमेंट का सटीक आकार दिखाता है। आइए यूनिट्स देखते हैं: यूनिट्स संक्षिप्त नाम प्रतिशत % Em Em Ex Ex रूट em Rem व्यूपोर्ट चौड़ाई Vw व्यूपोर्ट ऊंचाई Vh व्यूपोर्ट न्यूनतम Vm कैरेक्टर Ch ग्रिड Gd

स्विंग एनिमेशन इफेक्ट किसी एलिमेंट को निलंबित या एक अक्ष पर आगे-पीछे या अगल-बगल घुमाता है। उदाहरण <html>    <head>       <style>          .animated {             background-image: url(/css/images/logo.

सेलेक्टर में टेक्स्ट के पहले अक्षर पर स्पेशल स्टाइल जोड़ने के लिए इस एलिमेंट का उपयोग करें। निम्नलिखित उदाहरण दर्शाता है कि डॉक्यूमेंट में एलिमेंट्स के पहले अक्षर पर स्पेशल इफेक्ट देने के लिए :first-letter एलिमेंट का उपयोग कैसे करें। उदाहरण <html>    <head>      

CSS के साथ टाडा एनिमेशन इफेक्ट बनाने के लिए, आप निम्नलिखित कोड आज़मा सकते हैं: उदाहरण <html>    <head>       <style>          .animated {             background-image: url(/css/images/logo.png);  

CSS border-image प्रॉपर्टी का उपयोग कुछ एलिमेंट्स में इमेज बॉर्डर जोड़ने के लिए किया जाता है। border-image प्रॉपर्टी को लागू करने के लिए निम्नलिखित कोड आज़माएं: उदाहरण <html>    <head>       <style>          #borderimg1 {   &n

CSS border-image प्रॉपर्टी का उपयोग कुछ एलिमेंट्स में इमेज बॉर्डर जोड़ने के लिए किया जाता है। इमेज को एलिमेंट्स के लिए बॉर्डर के रूप में सेट करने के लिए निम्नलिखित कोड आज़माएं: उदाहरण <html>    <head>       <style>          #border

CSS में इमेज पाथ सेट करने के लिए border-image-source प्रॉपर्टी का उपयोग किया जाता है। इमेज पाथ सेट करने के लिए निम्नलिखित कोड आज़माएं: उदाहरण <html> <head> <style> #borderimg1 { border: 15px solid transparent; padding: 15px; border-image-source: url(https://tutorialspoint.com/cs

CSS के साथ बॉर्डर इमेज को स्लाइस करने के लिए border-image-slice प्रॉपर्टी का उपयोग किया जाता है। border-image-slice प्रॉपर्टी को लागू करने के लिए निम्नलिखित कोड आज़माएं: उदाहरण <html>    <head>       <style>          #borderimg1 {