CSS background-origin प्रॉपर्टी का उपयोग करके padding-box वैल्यू सेट करें। padding-box वैल्यू के साथ, बैकग्राउंड इमेज पैडिंग एज के ऊपरी बाएं कोने से शुरू होती है। padding-box वैल्यू लागू करने के लिए निम्न कोड चलाकर देखें: उदाहरण <!DOCTYPE html> <html>    <head>   &n

एनिमेशन को रिवर्स दिशा में चलाने के लिए animation-direction प्रॉपर्टी का उपयोग करें। इस प्रॉपर्टी को reverse एनिमेशन वैल्यू के साथ उपयोग किया जाता है। उदाहरण <!DOCTYPE html> <html>    <head>       <style>          div {  

एलिमेंट्स पर होवर करते समय ओवरफ्लो कंटेंट दिखाने के लिए, आप निम्न कोड चलाकर देख सकते हैं: उदाहरण <!DOCTYPE html> <html>    <head>       <style>          div.demo {             white-space: nowrap

रेडियल ग्रेडिएंट के साथ अलग-अलग स्पेस वाले कलर स्टॉप बनाने के लिए निम्न कोड चलाकर देखें: उदाहरण <!DOCTYPE html> <html>    <head>       <style>          #demo {             height: 200px;   &

एनिमेशन को अल्टरनेट दिशा में चलाने के लिए animation-direction प्रॉपर्टी का उपयोग करें। इस प्रॉपर्टी को alternate एनिमेशन वैल्यू के साथ उपयोग किया जाता है। उदाहरण <!DOCTYPE html> <html>    <head>       <style>          div { &

एलिमेंट्स को पहले कीफ्रेम द्वारा सेट स्टाइल वैल्यूज़ रिटेन कराने के लिए, animation-fill-mode प्रॉपर्टी का उपयोग backwards वैल्यू के साथ करें। उदाहरण <!DOCTYPE html> <html>    <head>       <style>          div {    

निर्दिष्ट एट्रिब्यूट और मान वाले एलिमेंट्स चुनने के लिए [attribute = "value"] सिलेक्टर का उपयोग करें। CSS [attribute="value"] सिलेक्टर को लागू करने के लिए निम्न कोड चलाकर देखें। यहां हमने एट्रिब्यूट rel माना है: उदाहरण <!DOCTYPE html> <html>    <head>

फॉर्म के टेक्स्ट फील्ड के अंदर स्पेस जोड़ने के लिए CSS padding प्रॉपर्टी का उपयोग करें। इसे प्राप्त करने के लिए निम्न कोड चलाकर देखें: उदाहरण <!DOCTYPE html> <html>    <head>       <style>          input[type = text] {  

फॉर्म के इनपुट फील्ड को स्टाइल करने के लिए, आप निम्न कोड चलाकर देख सकते हैं। <input> को स्टाइल करें: उदाहरण <!DOCTYPE html> <html>    <head>       <style>          input {             width

फॉर्म इनपुट्स पर बॉर्डर सेट करने के लिए CSS border प्रॉपर्टी का उपयोग करें। बॉर्डर जोड़ने के लिए निम्न कोड चलाकर देखें: उदाहरण <!DOCTYPE html> <html>    <head>       <style>          input[type = text] {      

<select> में ऑप्शन्स को स्टाइल करने के लिए, आप निम्न कोड चलाकर देख सकते हैं: उदाहरण <!DOCTYPE html> <html>    <head>       <style>          select {             width: 100%;     &

फॉर्म इनपुट में बैकग्राउंड कलर जोड़ने के लिए background-color प्रॉपर्टी का उपयोग करें। फॉर्म पर बैकग्राउंड कलर प्रॉपर्टी लागू करने के लिए निम्न कोड चलाकर देखें: उदाहरण <!DOCTYPE html> <html>    <head>       <style>          i

इनपुट टाइप बटन सबमिट बटन या रीसेट बटन हो सकता है। CSS से हम वेब पेज पर किसी भी बटन को स्टाइल कर सकते हैं। इनपुट टाइप बटन को स्टाइल करने के लिए निम्न कोड चलाकर देखें: उदाहरण <!DOCTYPE html> <html>    <head>       <style>         &n

लीनियर ग्रेडिएंट पर एंगल जोड़ने के लिए linear-gradient() का उपयोग करें। आप 0, 90, और -90 डिग्री एंगल सेट करने के लिए निम्न कोड चलाकर देख सकते हैं: उदाहरण <!DOCTYPE html> <html>    <head>       <style>          #demo1 {  

लीनियर ग्रेडिएंट में मल्टीपल कलर स्टॉप के लिए, आप निम्न कोड चलाकर देख सकते हैं: उदाहरण <!DOCTYPE html> <html>    <head>       <style>          #demo {             height: 100px;     &nb

नेविगेशन बार को टॉप पर सेट करने के लिए, position: fixed प्रॉपर्टी का उपयोग top प्रॉपर्टी के साथ करें। टॉप पर रहने वाले मेनू को लागू करने के लिए निम्न कोड चलाकर देखें: उदाहरण <!DOCTYPE html> <html>    <head>       <style>         &

नेविगेशन बार को बॉटम पर सेट करने के लिए, position: fixed प्रॉपर्टी का उपयोग bottom प्रॉपर्टी के साथ करें। बॉटम पर रहने वाले मेनू को लागू करने के लिए निम्न कोड चलाकर देखें: उदाहरण <!DOCTYPE html> <html>    <head>       <style>       &nb

CSS से, आप :after स्यूडो-एलिमेंट का उपयोग करके टूलटिप में एक छोटा ऐरो जोड़ सकते हैं। इसके साथ content प्रॉपर्टी का भी उपयोग करें। टूलटिप में ऐरो जोड़ने के लिए निम्न कोड चलाकर देखें: उदाहरण <!DOCTYPE html> <html>    <style>       .mytooltip .mytext {  

CSS से रिस्पॉन्सिव इमेज गैलरी बनाने के लिए, आप निम्न कोड चलाकर देख सकते हैं: उदाहरण <!DOCTYPE html> <html>    <head>       <style>          div.myGallery {             border: 2px solid orange; &

जब इमेजेज के संग्रह को एक ही इमेज में रखा जाता है, तो इसे इमेज स्प्राइट कहते हैं। यह सर्वर रिक्वेस्ट कम करने और इमेजेज को तुरंत लोड करने के लिए किया जाता है। मान लीजिए आपको अपने वेब पेज पर 4 इमेजेज उपयोग करनी हैं। उस स्थिति में, सभी इमेजेज को एक ही इमेज में जोड़ें और अपलोड करें। इससे आप सर्वर रिक्व