चलिए, स्कोप वाली कस्टम प्रॉपर्टी और बैकग्राउंड-क्लिप की मदद से, ऐनिमेशन वाले उस ग्रेडिएंट टेक्स्ट इफ़ेक्ट को बनाते हैं
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-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 पर व्लादिस्लाव क्लैपिन की हीरो इमेज