نکته سریع CSS! متن گرادیان متحرک

بیایید آن افکت متن شیب متحرک را با ویژگی های سفارشی محدوده و پس زمینه کلیپ بسازیم

Jhey Tompkins

به CodePen بروید و یک قلم جدید بسازید.

نشانه گذاری برای متن خود ایجاد کنید. بیایید از یک هدر با کلمه "Speedy" استفاده کنیم:

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

انجام شده! 🎉 شما با استفاده از ویژگی‌های سفارشی محدوده‌دار و background-clip مقداری متن گرادیان متحرک با CSS ایجاد کرده‌اید.

در اینجا این نکته در فرم ویدیویی سریع آن است! ⚡️

این را به صورت توییت ترجیح می دهید؟ 🐦

عالی بمان! ʕ •ᴥ•ʔ

تصویر قهرمان توسط ولادیسلاو کلاپین در Unsplash