CSS में टूलटिप को सही ढंग से पोजीशन करने के लिए top, right, bottom, और left प्रॉपर्टीज का उपयोग किया जाता है। टूलटिप कंटेनर पर position: relative और टूलटिप टेक्स्ट पर position: absolute होना आवश्यक है। उदाहरण: राइट पोजीशन टूलटिप नीचे दिए गए उदाहरण में टूलटिप को ट्रिगर एलिमेंट के दाईं ओर पोजीशन किया

CSS में राइट टूलटिप (दाईं ओर दिखने वाला टूलटिप) बनाने के लिए left प्रॉपर्टी का उपयोग करके टूलटिप को ट्रिगर एलिमेंट के दाईं ओर स्थित किया जाता है। उदाहरण नीचे दिए गए उदाहरण में, माउस होवर करने पर टेक्स्ट के दाईं ओर टूलटिप दिखाई देता है। <!DOCTYPE html> <html> <style> .mytooltip

CSS में एलिमेंट सेलेक्टर (टाइप सेलेक्टर) का उपयोग करके किसी विशेष HTML टैग के सभी तत्वों को चुना जा सकता है। यह सेलेक्टर टैग नाम का उपयोग करता है। उदाहरण नीचे दिए गए उदाहरण में, p सेलेक्टर सभी <p> तत्वों पर स्टाइल लागू करता है। <!DOCTYPE html> <html> <head> <style>

CSS transition-timing-function प्रॉपर्टी ट्रांजिशन प्रभाव की गति वक्र को निर्दिष्ट करती है। यह निर्धारित करती है कि ट्रांजिशन कैसे प्रगति करेगा - धीमी शुरुआत, धीमा अंत, या एक समान गति। उदाहरण नीचे दिए गए उदाहरण में, दो <div> तत्वों पर अलग-अलग टाइमिंग फंक्शन (linear और ease-in) लागू किए गए हैं

CSS में transition-timing-function प्रॉपर्टी ट्रांजिशन प्रभाव की गति वक्र (speed curve) को परिभाषित करती है। मुख्य मान हैं: linear, ease, ease-in, ease-out, ease-in-out, और cubic-bezier()। उदाहरण नीचे दिए गए उदाहरण में, तीन अलग-अलग <div> तत्वों पर अलग-अलग टाइमिंग फंक्शन लागू किए गए हैं ताकि उ

CSS में transition-delay प्रॉपर्टी का उपयोग करके ट्रांजिशन प्रभाव को निर्दिष्ट समय तक विलंबित किया जा सकता है। यह प्रॉपर्टी सेकंड (s) या मिलीसेकंड (ms) में मान स्वीकार करती है। उदाहरण नीचे दिए गए उदाहरण में, <div> पर होवर करने पर चौड़ाई बदलने का ट्रांजिशन 1 सेकंड की देरी से शुरू होता है। <

CSS में animation-timing-function प्रॉपर्टी का linear मान एनिमेशन को शुरुआत से अंत तक एक समान गति (constant speed) से चलाता है। इसमें कोई त्वरण या मंदी नहीं होती। उदाहरण नीचे दिए गए उदाहरण में, एक <div> तत्व पर एनिमेशन लागू किया गया है जो linear टाइमिंग फंक्शन का उपयोग करता है। <!DOCTYPE

CSS में animation-timing-function प्रॉपर्टी का ease-in मान एनिमेशन को धीमी गति से शुरू करता है। एनिमेशन धीरे-धीरे शुरू होता है और फिर तेज हो जाता है। उदाहरण नीचे दिए गए उदाहरण में, एक <div> तत्व पर एनिमेशन लागू किया गया है जो ease-in टाइमिंग फंक्शन का उपयोग करता है। <!DOCTYPE html> <

CSS में element > element सेलेक्टर (चाइल्ड सेलेक्टर) का उपयोग करके केवल उन तत्वों को चुना जा सकता है जो किसी निर्दिष्ट पैरेंट तत्व के **डायरेक्ट चाइल्ड** होते हैं। यह डिसेंडेंट सेलेक्टर (स्पेस) से अलग है जो सभी नेस्टेड तत्वों को चुनता है। उदाहरण नीचे दिए गए उदाहरण में, div > p केवल उन <p&g

CSS में element+element सेलेक्टर (एडजेसेंट सिबलिंग सेलेक्टर) का उपयोग करके उन तत्वों को चुना जा सकता है जो किसी निर्दिष्ट तत्व के तुरंत बाद आते हैं और उसी पैरेंट के बच्चे होते हैं। उदाहरण नीचे दिए गए उदाहरण में, div + p सेलेक्टर केवल उस <p> तत्व को चुनता है जो <div> के तुरंत बाद आता है।

CSS में animation-timing-function प्रॉपर्टी का ease-out मान एनिमेशन को धीमी गति से समाप्त करता है। एनिमेशन तेजी से शुरू होता है और अंत में धीमा हो जाता है। उदाहरण नीचे दिए गए उदाहरण में, एक <div> तत्व पर एनिमेशन लागू किया गया है जो ease-out टाइमिंग फंक्शन का उपयोग करता है। <!DOCTYPE html&

CSS में किसी विशिष्ट तत्व को उसके id एट्रिब्यूट के आधार पर चुनने के लिए #id सेलेक्टर का उपयोग किया जाता है। यह सेलेक्टर पेज पर केवल एक ही तत्व से मेल खाता है क्योंकि id अद्वितीय होना चाहिए। उदाहरण नीचे दिए गए उदाहरण में, हम id=tutorials वाले तत्व को चुनकर उस पर लाल बॉर्डर लागू कर रहे हैं। <!DOC

CSS में, जब आपको उन तत्वों को चुनना हो जिनका कोई एट्रिब्यूट मान किसी विशेष मान से शुरू होता है, तो आप [attribute^=value] सेलेक्टर का उपयोग कर सकते हैं। यह सेलेक्टर उन सभी तत्वों से मेल खाता है जिनके निर्दिष्ट एट्रिब्यूट का मान दिए गए मान से शुरू होता है। उदाहरण नीचे दिए गए उदाहरण में, हम उन सभी <

animation-duration प्रॉपर्टी animation-duration प्रॉपर्टी का उपयोग यह सेट करने के लिए किया जाता है कि एनिमेशन को एक चक्र पूरा करने में कितना समय लगेगा। उदाहरण <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 200px; positio

* (यूनिवर्सल) सिलेक्टर सभी एलिमेंट्स को सिलेक्ट करने के लिए CSS * सिलेक्टर का उपयोग करें। उदाहरण <!DOCTYPE html> <html> <head> <style> * { color: blue; background-color: orange; } </style> </head> <body> <h1&

animation-play-state प्रॉपर्टी animation-play-state प्रॉपर्टी का उपयोग यह सेट करने के लिए किया जाता है कि एनिमेशन चल रही है या पॉज्ड है। उदाहरण: एनिमेशन पॉज करें <!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 200px; posi

@keyframes एनिमेशन का नाम सेट करने के लिए animation-name प्रॉपर्टी का उपयोग करें। animation-name प्रॉपर्टी लागू करने के लिए निम्न कोड चलाकर देखें: उदाहरण <!DOCTYPE html> <html>    <head>       <style>          div {   &n

एनिमेशन चल रही है या रुकी हुई है, यह सेट करने के लिए animation-play-state प्रॉपर्टी का उपयोग करें। animation-play-state प्रॉपर्टी लागू करने के लिए निम्न कोड चलाकर देखें: उदाहरण <!DOCTYPE html> <html>    <head>       <style>        

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

animation-timing-function प्रॉपर्टी लागू करने के लिए निम्न कोड चलाकर देखें: उदाहरण <!DOCTYPE html> <html>    <head>       <style>          div {             width: 150px;       &nb