CSS counter-increment प्रॉपर्टी का उपयोग करके CSS काउंटर के मान को बढ़ाया (increment) जाता है। यह आमतौर पर ::before या ::after स्यूडो-एलिमेंट के साथ counter-reset प्रॉपर्टी के संयोजन में उपयोग किया जाता है। उदाहरण नीचे दिए गए उदाहरण में, प्रत्येक <h2> तत्व के लिए काउंटर बढ़ाया जाता है और उसके

CSS में opacity और transition प्रॉपर्टीज का उपयोग करके टूलटिप पर फेड-इन (धीरे-धीरे प्रकट होना) एनिमेशन प्रभाव जोड़ा जा सकता है। यह टूलटिप को अचानक प्रकट होने के बजाय सहजता से दिखाता है। उदाहरण नीचे दिए गए उदाहरण में, टूलटिप पर opacity: 0 से opacity: 1 तक का ट्रांजिशन लागू किया गया है। <!DOCTYPE

CSS border-radius: 50% का उपयोग करके किसी भी वर्गाकार इमेज को पूरी तरह गोलाकार (सर्कुलर) बनाया जा सकता है। यह प्रोफाइल पिक्चर्स, अवतार, लोगो आदि के लिए आमतौर पर उपयोग किया जाता है। उदाहरण नीचे दिए गए उदाहरण में, इमेज पर border-radius: 50% लागू करके गोलाकार इमेज बनाई गई है। <!DOCTYPE html> &l

CSS border प्रॉपर्टी (साथ में border-radius और padding) का उपयोग करके थंबनेल स्टाइल की इमेज बनाई जा सकती है। थंबनेल में आमतौर पर एक बॉर्डर, थोड़ा पैडिंग, और गोल कोने होते हैं। उदाहरण नीचे दिए गए उदाहरण में, इमेज पर नारंगी बॉर्डर, गोल कोने, और पैडिंग लागू करके थंबनेल प्रभाव बनाया गया है। <!DOCTY

CSS counter-reset प्रॉपर्टी का उपयोग करके CSS काउंटर बनाया या रीसेट किया जाता है। यह प्रॉपर्टी आमतौर पर पैरेंट एलिमेंट पर लागू की जाती है, और counter-increment के साथ मिलकर स्वचालित नंबरिंग के लिए उपयोग की जाती है। उदाहरण नीचे दिए गए उदाहरण में, <h2> तत्वों के सामने स्वचालित रूप से Fruit 1 -

CSS text-shadow प्रॉपर्टी का उपयोग करके टेक्स्ट पर छाया प्रभाव जोड़ा जा सकता है। सफेद टेक्स्ट पर काली छाया बनाने के लिए छाया का रंग काला (#000000) और ऑफसेट मान सेट किए जाते हैं। उदाहरण नीचे दिए गए उदाहरण में, <h1> तत्व पर सफेद टेक्स्ट के साथ काली छाया लागू की गई है। <!DOCTYPE html> <

CSS में टॉप टूलटिप (ऊपर दिखने वाला टूलटिप) बनाने के लिए bottom प्रॉपर्टी का उपयोग करके टूलटिप को ट्रिगर एलिमेंट के ऊपर स्थित किया जाता है। left: 50% और margin-left से इसे हॉरिजॉन्टली सेंटर किया जाता है। उदाहरण नीचे दिए गए उदाहरण में, माउस होवर करने पर टेक्स्ट के ऊपर टूलटिप दिखाई देता है। <!DOCT

CSS animation-iteration-count प्रॉपर्टी निर्दिष्ट करती है कि एनिमेशन कितनी बार चलना चाहिए। यह एक संख्या या infinite (अनंत) मान स्वीकार करती है। उदाहरण नीचे दिए गए उदाहरण में, animation-iteration-count: 3 का उपयोग करके एनिमेशन को 3 बार चलाया गया है। <!DOCTYPE html> <html> <head>

CSS animation-direction प्रॉपर्टी निर्दिष्ट करती है कि एनिमेशन आगे (forwards), पीछे (backwards), या वैकल्पिक चक्रों (alternate cycles) में चलना चाहिए। उदाहरण नीचे दिए गए उदाहरण में, animation-direction: reverse का उपयोग करके एनिमेशन को उल्टी दिशा में चलाया गया है। <!DOCTYPE html> <html>

CSS animation-name प्रॉपर्टी @keyframes एनिमेशन का नाम निर्दिष्ट करती है जिसे तत्व पर लागू किया जाना है। यह नाम @keyframes नियम में परिभाषित नाम से मेल खाना चाहिए। उदाहरण नीचे दिए गए उदाहरण में, animation-name: myanim का उपयोग करके @keyframes myanim एनिमेशन को <div> पर लागू किया गया है। <

CSS [attribute~=value] सेलेक्टर उन तत्वों को चुनता है जिनके एट्रिब्यूट मान में निर्दिष्ट **पूरा शब्द** (स्पेस से अलग) मौजूद होता है। यह [attribute*=value] (सबस्ट्रिंग) से अलग है जो आंशिक मेल भी ढूंढता है। उदाहरण नीचे दिए गए उदाहरण में, [alt~=Tutorials] सेलेक्टर उन इमेज को चुनता है जिनके alt एट्रिब्

CSS border-radius प्रॉपर्टी का उपयोग करके इमेज के कोनों को गोल (rounded) बनाया जा सकता है। मान जितना बड़ा होगा, कोने उतने ही अधिक गोल होंगे। उदाहरण नीचे दिए गए उदाहरण में, इमेज पर border-radius: 20px लागू करके कोनों को गोल किया गया है। <!DOCTYPE html> <html> <head> <style>

CSS [attribute] सेलेक्टर (एट्रिब्यूट प्रेजेंस सेलेक्टर) का उपयोग करके उन सभी तत्वों को चुना जा सकता है जिनमें निर्दिष्ट एट्रिब्यूट मौजूद होता है, चाहे उसका मान कुछ भी हो। उदाहरण नीचे दिए गए उदाहरण में, img[alt] सेलेक्टर केवल उन <img> तत्वों को चुनता है जिनमें alt एट्रिब्यूट मौजूद है। <!DO

CSS में टूलटिप के बाईं ओर एरो (तीर) जोड़ने के लिए ::after स्यूडो-एलिमेंट और CSS बॉर्डर ट्रिक का उपयोग किया जाता है। right प्रॉपर्टी से एरो को टूलटिप के दाईं ओर (यानी टूलटिप के बाईं ओर) पोजीशन किया जाता है। उदाहरण नीचे दिए गए उदाहरण में, टूलटिप के बाईं ओर एक नीला तीर बनाया गया है। <!DOCTYPE html

CSS में ग्रुपिंग सेलेक्टर का उपयोग करके एक ही स्टाइल को कई अलग-अलग तत्वों पर लागू किया जा सकता है। सेलेक्टर्स को कॉमा (,) से अलग किया जाता है। यह कोड डुप्लिकेशन को कम करता है और रखरखाव आसान बनाता है। उदाहरण नीचे दिए गए उदाहरण में, div, p सेलेक्टर दोनों <div> और <p> तत्वों पर एक ही स्टाइ

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

CSS animation-fill-mode प्रॉपर्टी निर्दिष्ट करती है कि एनिमेशन शुरू होने से पहले और समाप्त होने के बाद तत्व पर कौन सी स्टाइल लागू होनी चाहिए। उदाहरण नीचे दिए गए उदाहरण में, animation-fill-mode: backwards का उपयोग करके एनिमेशन शुरू होने से पहले (देरी के दौरान) from कीफ्रेम की स्टाइल लागू की जाती है।

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

टूलटिप एक छोटा पॉपअप बॉक्स होता है जो उपयोगकर्ता द्वारा किसी तत्व पर माउस कर्सर ले जाने पर दिखाई देता है। यह अतिरिक्त जानकारी प्रदान करने के लिए उपयोगी होता है। CSS में visibility, position, और :hover का उपयोग करके टूलटिप बनाया जा सकता है। उदाहरण नीचे दिए गए उदाहरण में एक बेसिक टूलटिप बनाया गया है

CSS में visibility प्रॉपर्टी और :hover स्यूडो-क्लास का उपयोग करके माउस होवर पर दिखने वाला टूलटिप बनाया जा सकता है। टूलटिप डिफ़ॉल्ट रूप से छिपा रहता है और होवर करने पर दृश्यमान हो जाता है। उदाहरण नीचे दिए गए उदाहरण में, माउस को टेक्स्ट पर होवर करने पर टूलटिप दिखाई देता है। <!DOCTYPE html> <