আসুন স্কোপড কাস্টম বৈশিষ্ট্য এবং ব্যাকগ্রাউন্ড-ক্লিপ সহ সেই অ্যানিমেটেড গ্রেডিয়েন্ট টেক্সট ইফেক্ট তৈরি করি
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 ব্যবহার করে CSS সহ কিছু অ্যানিমেটেড গ্রেডিয়েন্ট টেক্সট তৈরি করেছেন।
এখানে তার দ্রুত ভিডিও আকারে এই টিপ! ⚡️
টুইট আকারে এই পছন্দ? 🐦
চমৎকার থাক! ʕ •ᴥ•ʔ
আনস্প্ল্যাশে ভ্লাদিস্লাভ ক্ল্যাপিনের হিরো ছবি