सीएसएस में बॉर्डर को ऐनिमेट करने के कई तरीके देखना
बॉर्डर सेट करना
किसी एलिमेंट पर बॉर्डर सेट करने के कुछ तरीके उपलब्ध हैं: border, outline, और box-shadow. जैसा कि स्टेफ़नी एकल्स की किताब The 3 CSS Methods for Add Element B लगती है में बताया गया है, हर तरीके के अपने फ़ायदे और नुकसान हैं. खास तौर पर, जब बात बॉर्डर के ऐनिमेशन की हो. सही सीएसएस border का इस्तेमाल न करने की मुख्य वजह, ऐनिमेशन बनाना है.
outline-offset का इस्तेमाल करके केविन जे॰ पॉवेलहाल ही में, एक लेख फ़ैंटास्टिक सीएसएस बॉर्डर ऐनिमेशन में शामिल है. इस लेख में कोको ने ज़्यादा विकल्पों के बारे में बताया है. ::before और ::after का इस्तेमाल करके, जनरेट किया गया कॉन्टेंट इंजेक्ट करने पर, एक नकली बॉर्डर बन जाता है. इसके बाद, ऐनिमेशन का इस्तेमाल किया जाता है.
मेरे लिए सबसे खास बात, लेख में इस्तेमाल किए गए ऐनिमेटेड विज़ुअलाइज़ेशन हैं. इनसे यह समझने में मदद मिलती है कि मनचाहा असर पाने के लिए, असल में क्या किया जा रहा है.
सफ़ेद लेयर और रंगीन लाइनें, दोनों का कॉन्टेंट जनरेट किया जाता है. सफ़ेद लेयर को अंदर और बाहर फीका करने से, यह साफ़ हो जाता है कि वे कैसे स्टैक करती हैं और ऐनिमेशन कैसे काम करता है.
बॉक्स के मॉडल को बनाए रखना
किसी बॉर्डर की नकल करने के लिए जनरेट की गई कॉन्टेंट का इस्तेमाल करने का एक नुकसान यह है कि आपकी साइट का बॉक्स मॉडल टूट जाता है. इसलिए, हो सकता है कि वह कॉन्टेंट, नकली बॉर्डर को धुंधला कर दे, क्योंकि उसके नीचे “बॉर्डर” लिखा होता है. इसे कम करने के लिए, आपको अपनी पसंद के border-width को padding के तौर पर लागू करना होगा.
सही बॉर्डर लगाने–और इस तरह बॉक्स मॉडल के काम को बनाए रखने के लिए–एक से ज़्यादा बैकग्राउंड का इस्तेमाल किया जा सकता है, जिसे फिर बॉर्डर क्षेत्र में फैलाया जा सकता है.
बुनियादी बातें
सबसे पहले, बिंदुओं वाला बॉर्डर बनाएं और कई बैकग्राउंड जोड़ें.
/* 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;
Animation
बॉर्डर के ऐनिमेशन को पहले जैसा करने के लिए, 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सेट के नीचे नहीं, लेकिन सबसे ऊपर से पेंट किया जाता है. अगर आपको बैकग्राउंड को आधा-पारदर्शी बनाना है, तो इससे आपको परेशानी हो सकती है.
बंद होने में
सीएसएस में बॉर्डर को ऐनिमेट करने के कई विकल्प हैं. इस्तेमाल के उदाहरण के हिसाब से, आपको दोनों विकल्पों में से किसी एक का इस्तेमाल करना चाहिए.