CSS Cubic Bezier जनरेटर

इसिंग कर्व्ह तयार करण्यासाठी दोन हँडल्स ड्रॅग करा, स्थिर गतीच्या तुलनेत हालचाल पहा आणि cubic-bezier() मूल्य कॉपी करा.

प्रीसेट्स
नियंत्रण बिंदू (Control points)
पहिला नियंत्रण बिंदू
दुसरा नियंत्रण बिंदू
प्रिव्ह्यू
तुमचा कर्व्ह
linear
मूल्य
cubic-bezier(0.25, 0.1, 0.25, 1)
कर्व्ह तयार करण्यासाठी हँडल ड्रॅग करा किंवा प्रीसेट निवडा.

कर्व्ह थेट तुमच्या ब्राउझरमध्ये तयार केला जातो. तुम्ही येथे सेट केलेले काहीही BroBroGo वर अपलोड केले जात नाही.

नेहमी विचारले जाणारे प्रश्न

दोन हँडल्स आणि चार संख्यांचा अर्थ काय आहे?

कर्व्ह खाली-डावीकडून (सुरुवात) वर-उजवीकडे (शेवट) धावतो, ज्यामध्ये वेळ डावीकडून उजवीकडे जातो आणि प्रगती वर जाते. दोन हँडल्स हे नियंत्रण बिंदू (control points) आहेत जे त्याला वाकवतात — प्रत्येकाकडे X आणि Y असतो, त्यामुळे ते एकत्र cubic-bezier(x1, y1, x2, y2) बनतात. X हा 0 आणि 1 च्या दरम्यान राहतो, तर Y हालचाल ओव्हरशूट करण्यासाठी किंवा स्थिर होण्यापूर्वी मागे खेचण्यासाठी वरच्या बाजूला किंवा खालच्या बाजूला जाऊ शकतो.

मी माझ्या CSS मध्ये हे मूल्य कसे वापरू?

cubic-bezier() कॉपी करा आणि जिथे टाइमिंग फंक्शन वापरले जाते तिथे टाका — transition-timing-function, animation-timing-function, किंवा शॉर्टहँड, उदा. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). ease, ease-in, ease-out आणि ease-in-out हे कीवर्ड फक्त निश्चित cubic-bezier कर्व्ह्स आहेत, त्यामुळे त्यापैकी एक प्रीसेट निवडल्यास तुम्हाला त्या कीवर्डमागील अचूक मूल्य दिसते.

हे बाऊन्स किंवा इलास्टिक इफेक्ट तयार करू शकते का?

स्वतःहून नाही. एकच cubic-bezier आधीच अंदाज लावू शकतो आणि ओव्हरशूट करू शकतो — "back" प्रीसेट्स अगदी हेच करण्यासाठी एक हँडल बॉक्सच्या पलीकडे खेचतात — परंतु ते फक्त एका बाजूला जाऊ शकते आणि नंतर स्थिर होऊ शकते. बाऊन्स (Bounce) आणि इलास्टिक (elastic) अनेक वेळा दिशा बदलतात, जे एकच cubic-bezier दर्शवू शकत नाही; त्यासाठी CSS कीफ्रेम्स (keyframes) किंवा अनेक स्टॉप्ससह linear() फंक्शनची आवश्यकता असते.

BroBroGo संपादकीय टीमने लिहिले आणि तपासले आहे.शेवटचे अपडेट:

CSS मधील टाइमिंग फंक्शन्स आणि Cubic Bezier चे कार्य

CSS ट्रान्झिशन्स (transitions) आणि ॲनिमेशन्स (animations) मध्ये हालचालीचा वेग कसा बदलेल हे ठरवण्यासाठी टाइमिंग फंक्शन्सचा वापर केला जातो. जेव्हा आपण एखादी वस्तू एका ठिकाणाहून दुसऱ्या ठिकाणी हलवतो, तेव्हा ती संपूर्ण प्रवासात एकाच गतीने जात नाही. गतीमधील हा बदल नियंत्रित करण्यासाठी cubic-bezier(x1, y1, x2, y2) हे CSS फंक्शन वापरले जाते.

हा CSS Cubic Bezier जनरेटर तुम्हाला व्हिज्युअल पद्धतीने स्वतःचा इसिंग कर्व्ह (easing curve) तयार करण्याची सुविधा देतो. या प्रक्रियेत दोन नियंत्रण बिंदू (control points) वापरून कर्व्हचा आकार बदलला जातो. तुम्ही जसा कर्व्हचा आकार बदलता, तसा एक बिंदू त्या कर्व्हवर फिरताना दिसतो. त्याच्याच बाजूला दुसरा बिंदू एका स्थिर गतीने (steady pace) फिरत असतो, ज्यामुळे तुम्हाला तुमच्या कस्टम कर्व्हच्या गतीची तुलना रेषीय (linear) गतीसोबत थेट करता येते.

नियंत्रण बिंदू आणि इनपुट मूल्ये

या जनरेटरमध्ये इसिंग कर्व्ह नियंत्रित करण्यासाठी खालील इनपुटचा वापर केला जातो:

  • दोन हँडल्स ड्रॅग करणे: हे हँडल्स थेट ड्रॅग करून तुम्ही इसिंग कर्व्हचा आकार बदलू शकता.
  • पहिला नियंत्रण बिंदू X (First control point X): याचे संख्यात्मक मूल्य 0 आणि 1 च्या दरम्यान असणे आवश्यक आहे.
  • पहिला नियंत्रण बिंदू Y (First control point Y): याचे संख्यात्मक मूल्य -0.70 आणि 1.70 च्या दरम्यान असू शकते.
  • दुसरा नियंत्रण बिंदू X (Second control point X): याचे संख्यात्मक मूल्य 0 आणि 1 च्या दरम्यान असणे आवश्यक आहे.
  • दुसरा नियंत्रण बिंदू Y (Second control point Y): याचे संख्यात्मक मूल्य -0.70 आणि 1.70 च्या दरम्यान असू शकते.
  • प्रीसेट निवड (Preset selection): तुम्ही थेट "ease", "ease-in", "ease-out", "ease-in-out", "बॅक इन", "बॅक आउट", किंवा "बॅक इन-आउट" यांसारखे पर्याय निवडू शकता.

जनरेटरचे आउटपुट

तुम्ही कर्व्ह सेट केल्यानंतर हे टूल खालील आउटपुट दाखवते:

  • तुमचा कर्व्ह (your curve): तुम्ही तयार केलेल्या इसिंग कर्व्हचे थेट व्हिज्युअल सादरीकरण.
  • cubic-bezier(x1, y1, x2, y2): तुम्ही तयार केलेल्या कर्व्हचे अचूक CSS मूल्य, जे तुम्ही कॉपी करून थेट कोडमध्ये वापरू शकता.
  • Copied: मूल्य यशस्वीरित्या कॉपी झाल्यावर हा स्टेटस स्क्रीनवर दिसतो.

नियम आणि मर्यादा (Rules and Edge Cases)

Cubic Bezier कर्व्ह तयार करताना आणि मूल्ये इनपुट करताना काही विशिष्ट नियमांचे पालन करावे लागते:

  • हा कर्व्ह नेहमी खाली-डावीकडून (सुरुवात) वर-उजवीकडे (शेवट) या दिशेने धावतो.
  • या आलेखावर वेळ (Time) डावीकडून उजवीकडे पुढे सरकतो, तर प्रगती (Progress) खालून वरच्या दिशेने जाते.
  • X नियंत्रण बिंदूंची मूल्ये नेहमी 0 ते 1 च्या मर्यादेतच असावी लागतात. जर तुम्ही "पहिला नियंत्रण बिंदू X" च्या रकान्यात 9 सारखे मूल्य टाकले आणि तिथून फोकस हटवला (lose focus), तर ते मूल्य आपोआप 1 होते.
  • Y नियंत्रण बिंदूंची मूल्ये -0.70 ते 1.70 च्या मर्यादेत बदलू शकतात. Y मूल्ये 0 च्या खाली किंवा 1 च्या वर नेऊन तुम्ही ओव्हरशूट (overshoot) किंवा पुल-बॅक (pull-back) इफेक्ट्स तयार करू शकता.
  • जर तुम्ही एखादा रकाना रिकामा केला आणि फोकस हटवला, तर तिथे आधीचे वैध मूल्य पुन्हा पुनर्संचयित (restore) केले जाते.
  • जेव्हा एखादे नियंत्रण बिंदू हँडल्स फोकसमध्ये असते, तेव्हा कीबोर्डवरील डावी बाण की (Left arrow key) दाबल्यास त्याचे मूल्य बदलते, उदाहरणार्थ ते 0.99 होते.
  • रिकामे किंवा गैर-संख्यात्मक इनपुट असल्यास टूल पूर्ण आणि वैध मूल्य मिळेपर्यंत थांबते.
  • "बॅक आउट" हा प्रीसेट निवडल्यास cubic-bezier(0.34, 1.56, 0.64, 1) हे मूल्य सेट होते.
  • मूल्य कॉपी करताना केवळ यशस्वी झाल्याचा संदेश दिसतो, अपयशाचा कोणताही संदेश दाखवला जात नाही.
  • एकच cubic-bezier कर्व्ह केवळ एकाच दिशेने जाऊन स्थिर होऊ शकतो. तो बाऊन्स (bounce) किंवा इलास्टिक (elastic) सारखे अनेक वेळा दिशा बदलणारे इफेक्ट्स दर्शवू शकत नाही.

गोपनीयता आणि डेटा प्रक्रिया

हा कर्व्ह थेट तुमच्या ब्राउझरमध्ये तयार केला जातो. तुम्ही येथे सेट केलेले काहीही BroBroGo वर अपलोड केले जात नाही. त्यामुळे तुमचा डेटा पूर्णपणे तुमच्या स्थानिक डिव्हाइसवरच प्रक्रिया केला जातो.

वारंवार विचारले जाणारे प्रश्न (FAQ)

दोन हँडल्स आणि चार संख्यांचा अर्थ काय आहे?

कर्व्ह खाली-डावीकडून (सुरुवात) वर-उजवीकडे (शेवट) धावतो, ज्यामध्ये वेळ डावीकडून उजवीकडे जातो आणि प्रगती वर जाते. दोन हँडल्स हे नियंत्रण बिंदू (control points) आहेत जे त्याला वाकवतात — प्रत्येकाकडे X आणि Y असतो, त्यामुळे ते एकत्र cubic-bezier(x1, y1, x2, y2) बनतात. X हा 0 आणि 1 च्या दरम्यान राहतो, तर Y हालचाल ओव्हरशूट करण्यासाठी किंवा स्थिर होण्यापूर्वी मागे खेचण्यासाठी वरच्या बाजूला किंवा खालच्या बाजूला जाऊ शकतो.

मी माझ्या CSS मध्ये हे मूल्य कसे वापरू?

cubic-bezier() कॉपी करा आणि जिथे टाइमिंग फंक्शन वापरले जाते तिथे टाका — transition-timing-function, animation-timing-function, किंवा शॉर्टहँड, उदा. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). ease, ease-in, ease-out आणि ease-in-out हे कीवर्ड फक्त निश्चित cubic-bezier कर्व्ह्स आहेत, त्यामुळे त्यापैकी एक प्रीसेट निवडल्यास तुम्हाला त्या कीवर्डमागील अचूक मूल्य दिसते.

हे बाऊन्स किंवा इलास्टिक इफेक्ट तयार करू शकते का?

स्वतःहून नाही. एकच cubic-bezier आधीच अंदाज लावू शकतो आणि ओव्हरशूट करू शकतो — "back" प्रीसेट्स अगदी हेच करण्यासाठी एक हँडल बॉक्सच्या पलीकडे खेचतात — परंतु ते फक्त एका बाजूला जाऊ शकते आणि नंतर स्थिर होऊ शकते. बाऊन्स (Bounce) आणि इलास्टिक (elastic) अनेक वेळा दिशा बदलतात, जे एकच cubic-bezier दर्शवू शकत नाही; त्यासाठी CSS कीफ्रेम्स (keyframes) किंवा अनेक स्टॉप्ससह linear() फंक्शनची आवश्यकता असते.

Gradient जनरेटरलिनियर, रेडियल किंवा कोनिक ग्रेडियंट तयार करा, कलर स्टॉप्स जोडा आणि दिशा सेट करा, नंतर एका क्लिकमध्ये CSS कॉपी करा.Border Radius जनरेटरस्लाइडर्ससह प्रत्येक कोपरा गोल करा, लंबगोलाकार मोडसह सेंद्रिय ब्लॉब आकार द्या आणि CSS झटपट कॉपी करा.Flexbox जनरेटरव्हिज्युअल कंट्रोल्ससह फ्लेक्स कंटेनर आणि त्याचे आयटम्स सेट करा, लेआउट थेट बदलताना पहा आणि एका क्लिकमध्ये CSS कॉपी करा.CSS Grid जनरेटरतुमचे कॉलम्स आणि रोझ सेट करा, आयटम ठेवण्यासाठी सेल्सवर ड्रॅग करा आणि एका क्लिकमध्ये जुळणाऱ्या HTML सह ग्रिड CSS कॉपी करा.Box Shadow जनरेटरबॉक्स-शॅडो तयार करण्यासाठी स्लाइडर्स ड्रॅग करा, खोलीसाठी लेयर्स जोडा आणि तयार CSS झटपट कॉपी करा.CSS clamp() कॅल्क्युलेटरलहान आणि मोठ्या स्क्रीनसाठी आकार प्रविष्ट करा आणि एक लवचिक clamp() मूल्य मिळवा जे दरम्यानच्या भागात सुरळीतपणे स्केल होते — फॉन्ट आकार, पॅडिंग, मार्जिन किंवा गॅपसाठी.