सीएसएस में बॉर्डर को ऐनिमेट करने के कई तरीकों के बारे में जानकारी
बॉर्डर सेट करना
किसी एलिमेंट पर बॉर्डर सेट करने के लिए, ये तरीके इस्तेमाल किए जा सकते हैं: border
, outline
, और box-shadow
. जैसा कि स्टेफ़नी एकल्स ने एलिमेंट बॉर्डर जोड़ने के लिए सीएसएस के तीन तरीके में बताया है, हर तरीके के अपने फ़ायदे और नुकसान हैं. खास तौर पर, बॉर्डर को ऐनिमेट करने के मामले में. ऐनिमेशन के मकसद से, सही सीएसएस border
का इस्तेमाल न करना.
हाल ही में मेरी नज़र शानदार सीएसएस बॉर्डर ऐनिमेशन वाले लेख पर पड़ी. इसमें लेखक कोको ने ज़्यादा विकल्पों के बारे में बताया है. ::before
और ::after
का इस्तेमाल करके जनरेट किया गया कॉन्टेंट इंजेक्ट करके, वे एक फ़ॉस बॉर्डर बनाते हैं. इसके बाद, उसमें ऐनिमेशन जोड़ते हैं.
मुझे लेख में इस्तेमाल किए गए ऐनिमेशन वाले विज़ुअलाइज़ेशन सबसे ज़्यादा पसंद आए. इनसे यह समझने में मदद मिलती है कि मनमुताबिक नतीजा पाने के लिए क्या किया जा रहा है.
सफ़ेद लेयर और रंगीन लाइनें, दोनों जनरेट किया गया कॉन्टेंट हैं. सफ़ेद लेयर को अंदर और बाहर फ़ेड करके, यह साफ़ तौर पर पता चलता है कि वे कैसे स्टैक होती हैं और ऐनिमेशन कैसे काम करता है.
बॉक्स मॉडल को बनाए रखना
बॉर्डर की नकल करने के लिए जनरेटेड कॉन्टेंट का इस्तेमाल करने का एक नुकसान यह है कि आपको खराब बॉक्स मॉडल मिलता है: अब कॉन्टेंट, नकली बॉर्डर को छिपा सकता है, क्योंकि वह “बॉर्डर” नीचे पेंट किया गया है. इसे कम करने के लिए, आपको padding
के तौर पर अपनी पसंद का border-width
लागू करना होगा.
बॉक्स मॉडल के काम करने के तरीके को बनाए रखने के लिए, एक से ज़्यादा बैकग्राउंड का इस्तेमाल किया जा सकता है. इसके बाद, उन्हें बॉर्डर वाले हिस्से में स्ट्रेच किया जा सकता है.
बुनियादी बातें
चलिए, बिंदुओं वाला बॉर्डर बनाकर और कई बैकग्राउंड जोड़कर शुरू करते हैं.
/* Size of the border */
--border-size: 0.5rem;
/* Create a dotted border */
border: var(--border-size) dotted lime;
/* Create two background layers:
1. A white semi-transparent
2. A layer with the colored boxes
*/
background-image:
linear-gradient(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),
conic-gradient(
from 45deg,
#d53e33 0deg 90deg,
#fbb300 90deg 180deg,
#377af5 180deg 270deg,
#399953 270deg 360deg
)
;
background-origin
की मदद से बैकग्राउंड का साइज़ तय करना
जैसा कि आप देख सकते हैं, यहां बैकग्राउंड में कुछ अजीब हो रहा है: उन्हें बॉर्डर में पेंट किया गया है, लेकिन conic-gradient
पूरी तरह से गलत है. यह असल में सही है: बैकग्राउंड इमेज डिफ़ॉल्ट रूप से बॉर्डर में नहीं दिखतीं, क्योंकि उनका ऑरिजिन एलिमेंट का padding-box
होता है. आखिरकार, बॉर्डर बनाने के लिए, सेट की गई बैकग्राउंड इमेज को बॉर्डर में दोहराया जाता है. इससे विज़ुअल इफ़ेक्ट अजीब दिखता है.
इस समस्या को हल करने के लिए, आपको बैकग्राउंड को स्ट्रेच करना होगा, ताकि वह बॉर्डर के साइज़ को भी कवर कर सके. बैकग्राउंड को स्ट्रेच करके और उसकी जगह बदलकर, मैन्युअल तरीके से ऐसा किया जा सकता है. हालांकि, border-box
के हिसाब से बैकग्राउंड का साइज़ तय करने के लिए, background-origin
प्रॉपर्टी का इस्तेमाल करना सबसे अच्छा है.
/* Manually add or offset the size of the border where needed */
background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);
background-origin: border-box;
इस एक बदलाव से, सब कुछ बेहतर दिखता है:
background-clip
का इस्तेमाल करके, सफ़ेद बैकग्राउंड लेयर को छोटा करना
बैकग्राउंड अब पूरा स्पेस ले रहे हैं. इसलिए, सेमी-ट्रांसफ़ैरेंट लेयर को फिर से छोटा करना होगा. background-size
को फिर से इस्तेमाल करने के बजाय, इसे आसानी से सेट किया जा सकता है: background-clip
का इस्तेमाल करके, इसे padding-box
पर सेट करें. ऐसा करने पर, बैकग्राउंड बॉर्डर के नीचे नहीं दिखता.
background-clip:
padding-box, /* Clip white semi-transparent to the padding-box */
border-box /* Clip colored boxes to the border-box (default) */
;
आखिर में, पूरा इफ़ेक्ट पाने के लिए बॉर्डर transparent
बनाएं.
border: 0.3rem dotted transparent;
ऐनिमेशन
बॉर्डर का ऐनिमेशन वापस लाने के लिए, conic-gradient
के शुरू होने के कोण में बदलाव किया जा सकता है.
--angle: 0deg;
conic-gradient(
from var(--angle),
#d53e33 0deg 90deg,
#fbb300 90deg 180deg,
#377af5 180deg 270deg,
#399953 270deg 360deg
);
@property की मदद से, इस काम को उन ब्राउज़र में आसानी से किया जा सकता है जिनमें यह सुविधा काम करती है:
@property --angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes rotate {
to {
--angle: 360deg;
}
}
सभी कोड को मिलाकर, यह कोड बनता है:
बोनस कॉन्टेंट: border-image
ग्रेडिएंट बॉर्डर बनाने के लिए, सीएसएस border-image
का इस्तेमाल किया जा सकता है. इस बारे में पहले बताया जा चुका है.
इससे कोड को आसानी से लिखा जा सकता है, क्योंकि आपको ओवरलैप होने वाले बैकग्राउंड से निपटने की ज़रूरत नहीं होती. ऐनिमेशन को पहले की तरह ही लागू किया जा सकता है.
/* Create a border */
border: 0.5rem solid transparent;
/* Paint an image in the border */
border-image:
conic-gradient(
from var(--angle),
#d53e33 0deg 90deg,
#fbb300 90deg 180deg,
#377af5 180deg 270deg,
#399953 270deg 360deg
) 1
;
हालांकि, आपको पता चलेगा कि इस तरीके से कुछ चीज़ें अब काम नहीं करतीं:
border-image
,border-radius
के हिसाब से नहीं बदलता; यह हमेशा रेक्टैंगल के तौर पर ही दिखेगा.border-image-slice
को 'भरें' पर सेट करने पर,border-image
को सेट किए गएbackground
के नीचे नहीं, बल्कि ऊपर पेंट किया जाता है. अगर आपको बैकग्राउंड को सेमी-ट्रांसफ़रेंट रखना है, तो यह समस्या हो सकती है.
आखिर में
सीएसएस में बॉर्डर को ऐनिमेट करने के कई तरीके हैं. इस्तेमाल के उदाहरण के हिसाब से, इनमें से किसी एक का इस्तेमाल किया जा सकता है.