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

आइए, स्कोप वाली कस्टम प्रॉपर्टी और background-clip का इस्तेमाल करके, ऐनिमेशन वाला ग्रेडिएंट टेक्स्ट इफ़ेक्ट बनाएं

Jhey Tompkins

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

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

<h1 class="boujee-text">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 का इस्तेमाल करके, सीएसएस के साथ ऐनिमेटेड ग्रेडिएंट टेक्स्ट बनाया है.

इस सलाह को वीडियो के तौर पर यहां देखें! ⚡️

क्या आपको यह ट्वीट के फ़ॉर्मैट में चाहिए? 🐦

हमारे साथ बने रहें!