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

لننشئ تأثير النص المتدرج المتحركة هذا مع خصائص مخصصة محددة ومقطع الخلفية.

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.

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

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

ابقَ رائعًا! ` ᴥ•`

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