Transitions & Tooltips in CSS in hindi
I am working as freelancer. I am a experienced full stack web developer. My lovely stack is MERN but I am open for new tech. I love to work with teammates for achieve goals. I love researches to find specific new things.
web development में कैरियर बनाने वाले सभी लोग अंग्रेजी अच्छे से शुरू में ही नहीं सीख लेते, तो उनके समझने के लिए हिन्दी कंटेंट भी होने चाहिए।
What is Transitions in CSS?
Css में style देते समय कई बातों को अच्छे से ध्यान रखा जाता है, तभी एक अच्छा presentation तैयार होता है। किसी content को एक आकार या एक रंग से दूसरे आकार या रंग में बदलना ही transition होता है। इसे animation effect में सबसे ज्यादा अच्छी तरह से समझा जा सकता है।
Speed curve of Transition
Transition की property apply करने के लिए elment की शुरुआती position और बदलने के बाद की position का होना आवश्यक है, अन्यथा transition styel effect का कोई मतलब नहीं होगा।
कितनी देर बाद element पहली पोजीशन से बदलकर अपनी आखिरी पोजीशन में पहुंचेगा यही निर्धारण करता है transition जैसे- किसी div को यह property दी गयी है कि hover करने पर उसकी size बढ़ जाएगी, तो उसके बढ़ने में लगा समय 3s transition सेट करेगा। और वह धीरे-धीरे बढ़ेगा 3 सेकण्ड में।
div{
height:300px;
`width: 300px;`
`background-color:blue;`
`transition: 3s;`
}
`div:hover{`
`width:400px;`
`height: 400px;`
`}`
transition timing function()
Transition होते समय किस speed में होगा, धीरे-या तेज, इसे सेट करने के लिए कुछ property value हैं-
ease
यह default होता है। यह slow-fast-slow होता है।
linear
इसमें same speed रहती है।
ease-in
इसका slow start रहता है।
ease-out
इसका slow end होता है।
ease-in-out
यह slow start-slow end होता है।
cubic-bezier(n,n,n,n)
इसे अपने हिसाब से सेट किया जा सकता है।
transition-delay property
Browser पर फाइल open होने के कितनी देर बाद transition शुरु होगा। यह Property यही तय करती है।
transition-dealy:3s;
What is Tooltip in CSS?
किसी element के ऊपर cursor ले जाने पर कभी-कभी कुछ उसके बारे में लिखकर आ जाता है, वही tooltip होता है।
Use of tooltip:
Tooltip का प्रयोग content के बारे में extra information user को देने के लिए होता है। यह element के किसी भी भाग पर कर्सर ले जाने पर दिखता है-left,right,top,bottom सभी जगह।
