দ্রুত CSS সংক্রান্ত পরামর্শ! অ্যানিমেটেড গ্রেডিয়েন্ট টেক্সট

আসুন, স্কোপ করা কাস্টম প্রপার্টি এবং ব্যাকগ্রাউন্ড-ক্লিপ সহ সেই অ্যানিমেটেড গ্রেডিয়েন্ট টেক্সট এফেক্ট তৈরি করি

Jhey Tompkins

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-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 ব্যবহার করে CSS-এর সাহায্যে কিছু অ্যানিমেটেড গ্রেডিয়েন্ট টেক্সট তৈরি করেছেন।

এই পরামর্শটি দ্রুত ভিডিওর আকারে এখানে দেওয়া হল! ⚡️

এটি টুইট ফর্ম-এ দেখতে চান? 🐦

দারুণ থাকুন!