तेज़ सीएसएस सलाह! ऐनिमेटेड ग्रेडिएंट टेक्स्ट

स्कोप वाली कस्टम प्रॉपर्टी और बैकग्राउंड-क्लिप की मदद से, ऐनिमेटेड ग्रेडिएंट टेक्स्ट इफ़ेक्ट बनाना

Jhey Tompkins

CodePen पर जाएं और नया पेन बनाएं.

अपने टेक्स्ट के लिए मार्कअप बनाएं. आइए, "स्पीड" शब्द वाले हेडर का इस्तेमाल करें:

<h1 class="boujee->text&q<uot>;Hello!/h1

इसके बाद, आइए अपने body को ज़्यादा गहरा background-color दें:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: hsl(0 0% 20%);
}

अपने टेक्स्ट का font-size बढ़ाएं. इसे रिस्पॉन्सिव बनाने के लिए, clamp का इस्तेमाल करें:

.boujee-text {
  font-size: clamp(3rem, 25vmin, 8rem);
}

उन रंगों के लिए दो कस्टम प्रॉपर्टी बनाएं जिनका हम इस्तेमाल करने वाले हैं. उन रंगों का इस्तेमाल करके, background पर linear-gradient लागू करें और उसे 90 डिग्री घुमाएं:

.boujee-text {
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / 100% 100%;
}

एक कस्टम प्रॉपर्टी बनाएं, जिसका इस्तेमाल हॉरिज़ॉन्टल बैकग्राउंड साइज़ के लिए किया जा सकता है. background-size-x के लिए इसका इस्तेमाल करें:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
}

बैकग्राउंड को टेक्स्ट पर क्लिप करने के लिए, color को transparent पर सेट करें. साथ ही, background-clip: text को सेट करें:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

ध्यान दें: कुछ ब्राउज़र में, background-clip प्रॉपर्टी के लिए -webkit-background-clip के तौर पर प्रीफ़िक्स की ज़रूरत होती है.

इस समय, आपके पास इसे ऐसे ही छोड़ने और background-position के साथ-साथ background-image में इस्तेमाल किए गए ग्रेडिएंट के साथ प्रयोग करने का विकल्प होता है. इसके अलावा, आपके पास अपने टेक्स्ट पर उस ग्रेडिएंट को ऐनिमेट करने का विकल्प भी होता है. सबसे पहले, ऐनिमेशन के लिए कीफ़्रेम तय करें. इससे, पहले से तय की गई --bg-size कस्टम प्रॉपर्टी का इस्तेमाल किया जाएगा. स्कोप वाली कस्टम प्रॉपर्टी का एक अच्छा उदाहरण, जिससे आपके लिए रखरखाव आसान हो जाता है.

@keyframes move-bg {
  to {
    background-position: var(--bg-size) 0;
  }
}

इसके बाद, animation का इस्तेमाल करके ऐनिमेशन लागू करें:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg 8s infinite linear;
}

इसे और बेहतर बनाने के लिए, अपने ऐनिमेशन कोड को मीडिया क्वेरी में रैप किया जा सकता है, ताकि मोशन के लिए उपयोगकर्ता की प्राथमिकताओं का पालन किया जा सके:

@media (prefers-reduced-motion: no-preference) {
  .boujee-text {
    animation: move-bg 8s linear infinite;
  }
  @keyframes move-bg {
    to {
      background-position: var(--bg-size) 0;
    }
  }
}

हो गया! 🎉 आपने स्कोप वाली कस्टम प्रॉपर्टी और background-clip का इस्तेमाल करके, सीएसएस की मदद से ऐनिमेटेड ग्रेडिएंट टेक्स्ट बनाया है.

यहां इस सलाह का वीडियो दिया गया है! ⚡️

क्या आपको यह सलाह ट्वीट के तौर पर चाहिए? 🐦

बेहतर की उम्मीद रखें!