نصيحة سريعة بشأن خدمة مقارنة الأسعار (CSS) نص متدرج متحرك

لننشئ تأثير النص المتدرّج المتحرّك باستخدام السمات المخصّصة على مستوى النطاق وbackground-clip.

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);
}

أنشئ سمتَين مخصّصتَين للألوان التي سنستخدمها. طبِّق linear-gradient على background باستخدام هذه الألوان ودورِّه بزاوية 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;
    }
  }
}

تم! 🎉 لقد أنشأت بعض النصوص المتدرجة المتحركة باستخدام CSS باستخدام السمات المخصّصة على مستوى النطاق وbackground-clip.

إليك هذه النصيحة في فيديو سريع. ⚡️

هل تفضّل استخدام نموذج تغريدة؟ 🐦

مع أطيب التحيّات، ʕ •ᴥ•ʔ

الصورة الرئيسية مقدمة من فلاديسلاف كلابين على Unsplash