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

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

Jhey Tompkins

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

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

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

इस सलाह को शॉर्ट वीडियो में देखें! ⚡️

क्या आपको इसे ट्वीट फ़ॉर्मैट में देखना है? 🐦

हमेशा बेहतर बने रहें! ʕ •ᴥ•ʔ

Unsplash पर व्लादिस्लाव क्लैपिन की हीरो इमेज