सीएसएस बॉर्डर ऐनिमेशन

सीएसएस में बॉर्डर को ऐनिमेट करने के कई तरीकों के बारे में जानकारी

किसी एलिमेंट पर बॉर्डर सेट करने के लिए, ये तरीके इस्तेमाल किए जा सकते हैं: border, outline, और box-shadow. जैसा कि स्टेफ़नी एकल्स ने एलिमेंट बॉर्डर जोड़ने के लिए सीएसएस के तीन तरीके में बताया है, हर तरीके के अपने फ़ायदे और नुकसान हैं. खास तौर पर, बॉर्डर को ऐनिमेट करने के मामले में. ऐनिमेशन के मकसद से, सही सीएसएस border का इस्तेमाल न करना.

outline-offset का इस्तेमाल करके, केविन जे. के बनाए गए बॉर्डर ऐनिमेशन Powell

हाल ही में मेरी नज़र शानदार सीएसएस बॉर्डर ऐनिमेशन वाले लेख पर पड़ी. इसमें लेखक कोको ने ज़्यादा विकल्पों के बारे में बताया है. ::before और ::after का इस्तेमाल करके जनरेट किया गया कॉन्टेंट इंजेक्ट करके, वे एक फ़ॉस बॉर्डर बनाते हैं. इसके बाद, उसमें ऐनिमेशन जोड़ते हैं.

मुझे लेख में इस्तेमाल किए गए ऐनिमेशन वाले विज़ुअलाइज़ेशन सबसे ज़्यादा पसंद आए. इनसे यह समझने में मदद मिलती है कि मनमुताबिक नतीजा पाने के लिए क्या किया जा रहा है.

Coco की मदद से जनरेट किए गए कॉन्टेंट का इस्तेमाल करके, बॉर्डर ऐनिमेशन बनाना

सफ़ेद लेयर और रंगीन लाइनें, दोनों जनरेट किया गया कॉन्टेंट हैं. सफ़ेद लेयर को अंदर और बाहर फ़ेड करके, यह साफ़ तौर पर पता चलता है कि वे कैसे स्टैक होती हैं और ऐनिमेशन कैसे काम करता है.

बॉक्स मॉडल को बनाए रखना

बॉर्डर की नकल करने के लिए जनरेटेड कॉन्टेंट का इस्तेमाल करने का एक नुकसान यह है कि आपको खराब बॉक्स मॉडल मिलता है: अब कॉन्टेंट, नकली बॉर्डर को छिपा सकता है, क्योंकि वह “बॉर्डर” नीचे पेंट किया गया है. इसे कम करने के लिए, आपको 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 प्रॉपर्टी का इस्तेमाल करना सबसे अच्छा है.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 3.

सोर्स

यह न करें
/* 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 पर सेट करें. ऐसा करने पर, बैकग्राउंड बॉर्डर के नीचे नहीं दिखता.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

सोर्स

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 की मदद से, इस काम को उन ब्राउज़र में आसानी से किया जा सकता है जिनमें यह सुविधा काम करती है:

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 85.
  • किनारा: 85.
  • Firefox: 128.
  • Safari: 16.4.

सोर्स

@property --angle {
 
syntax: "<angle>";
 
initial-value: 0deg;
 
inherits: false;
}

@keyframes rotate {
  to
{
   
--angle: 360deg;
 
}
}

सभी कोड को मिलाकर, यह कोड बनता है:

बोनस कॉन्टेंट: border-image

ग्रेडिएंट बॉर्डर बनाने के लिए, सीएसएस border-image का इस्तेमाल किया जा सकता है. इस बारे में पहले बताया जा चुका है.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 16.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 6.

सोर्स

इससे कोड को आसानी से लिखा जा सकता है, क्योंकि आपको ओवरलैप होने वाले बैकग्राउंड से निपटने की ज़रूरत नहीं होती. ऐनिमेशन को पहले की तरह ही लागू किया जा सकता है.

/* 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 के नीचे नहीं, बल्कि ऊपर पेंट किया जाता है. अगर आपको बैकग्राउंड को सेमी-ट्रांसफ़रेंट रखना है, तो यह समस्या हो सकती है.

आखिर में

सीएसएस में बॉर्डर को ऐनिमेट करने के कई तरीके हैं. इस्तेमाल के उदाहरण के हिसाब से, इनमें से किसी एक का इस्तेमाल किया जा सकता है.