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

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

Bramus

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

किसी एलिमेंट पर बॉर्डर सेट करने के लिए, कुछ तरीके उपलब्ध हैं: 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 प्रॉपर्टी का इस्तेमाल करना सबसे सही तरीका है.

Browser Support

• 1
• 12
• 4
• 3

Source

ऐसा न करें

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

Browser Support

• 1
• 12
• 4
• 5

Source

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

Browser Support

• 85
• 85
• 128
• 16.4

Source

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

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

इन सभी को मिलाकर, कोड ऐसा दिखता है:

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

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

Browser Support

• 16
• 12
• 15
• 6

Source

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

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

आखिर में

सीएसएस में बॉर्डर को ऐनिमेट करने के कई तरीके हैं. इस्तेमाल के उदाहरण के आधार पर, आपको इनमें से किसी एक को चुनना पड़ सकता है.