চলুন স্কোপড কাস্টম প্রোপার্টি এবং ব্যাকগ্রাউন্ড-ক্লিপ ব্যবহার করে অ্যানিমেটেড গ্রেডিয়েন্ট টেক্সট ইফেক্টটি তৈরি করি।
CodePen- এ যান এবং একটি নতুন পেন তৈরি করুন।
আপনার টেক্সটের জন্য মার্কআপ তৈরি করুন। চলুন, 'Speedy' শব্দটি দিয়ে একটি হেডার ব্যবহার করি:
<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 প্রয়োগ করুন এবং এটিকে ৯০ ডিগ্রি ঘোরান:
.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;
}
}
}
হয়ে গেছে! 🎉 আপনি CSS ব্যবহার করে স্কোপড কাস্টম প্রোপার্টি এবং background-clip দিয়ে অ্যানিমেটেড গ্রেডিয়েন্ট টেক্সট তৈরি করেছেন।
এই টিপসটি একটি দ্রুত ভিডিও আকারে দেখে নিন! ⚡️
এটা টুইট আকারে দেখতে চান? 🐦
দারুণ থাকুন!