پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<h2 class="radikalwp-txt-gradient">خلاقیت بی‌مرز<//h2>
.radikalwp-txt-gradient {
  margin: 0;
  font-size: 42px;
  font-weight: 900;
  text-align: center;
  background: linear-gradient(110deg, #6366f1, #ec4899, #f59e0b, #6366f1);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: radikalwp-txt-gradient-flow 6s ease infinite;
}
@keyframes radikalwp-txt-gradient-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

درباره این اسنیپت

تیتری با گرادیان چندرنگ که آهسته داخل حروف جابه‌جا می‌شود و حس نور جاری می‌دهد. متن با background-clip به گرادیان بریده شده و انیمیشن فقط موقعیت پس‌زمینه را حرکت می‌دهد. برای هیروهای لندینگ، تیترهای فروشگاه و بخش‌های خلاقانه مناسب است. با هر پس‌زمینه‌ای چون خود متن رنگ است هماهنگ می‌شود.

پرسش‌های متداول

چون گرادیان پس‌زمینه با background-clip: text فقط داخل شکل حروف نمایش داده می‌شود؛ اگر رنگ متن رنگی بماند روی گرادیان می‌نشیند و افکت از بین می‌رود.

مرورگرهایی که background-clip: text ندارند متن شفاف می‌بینند؛ برای احتیاط می‌توانید رنگ را داخل @supports بگذارید و fallback رنگی تعیین کنید.

کافی است دو مقدار درصد در کی‌فریم جابه‌جا شود؛ جهت حرکت برعکس می‌شود و سرعت همان می‌ماند.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۲ از ۱۶ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

خوش آمدید

پیش‌نمایش زنده اسنیپت

متن گرادیان رنگین

متن گرادیان تیتر
۶۰
۴.۵ (۹)

رادیکال‌دبلیوپی

پیش‌نمایش زنده اسنیپت

متن گرادیان متحرک

متن گرادیان تیتر
۴۵
۴.۷ (۷)
طراحی با کلاس
پیش‌نمایش زنده اسنیپت

متن گرادیان عمودی شبنمی

متن گرادیان شبنم
۳۷
۴.۰ (۶)