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

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

Bramus

बॉर्डर सेट करना

किसी एलिमेंट पर बॉर्डर सेट करने के कुछ तरीके उपलब्ध हैं: 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 के नीचे नहीं, बल्कि ऊपर पेंट किया जाता है. अगर आपको बैकग्राउंड का रंग आधा-पारदर्शी करना है, तो आपको काफ़ी परेशानी हो सकती है.

आखिर में

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