پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<span class="radikalwp-mirror-text" data-text="نسخه طلایی">نسخه طلایی<//span>
.radikalwp-mirror-text {
  position: relative;
  display: inline-block;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.4;
  color: #0f172a;
}
.radikalwp-mirror-text::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  color: #64748b;
  opacity: .25;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 30%, #000 100%);
  pointer-events: none;
  transition: opacity .3s ease;
}
.radikalwp-mirror-text:hover::after { opacity: .45; }

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

متن اصلی با بازتاب آینه‌ای زیر آن که کم‌رنگ و محو است و حس سطح براق می‌دهد. بازتاب با data-text و شبه‌المان ساخته می‌شود تا متن دو بار نوشته نشود. برای تیتر هیرو در صفحات لوکس، معرفی محصول و بخش قهرمانان مناسب است. برای متن‌های کوتاه یک‌خطی طراحی شده تا بازتاب کامل و تمیز بماند.

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

مقدار opacity شبه‌المان ::after را زیاد کنید. برای بازتاب واقعی‌تر ماسک محو را هم بلندتر کنید.

خیر؛ بازتاب از خود متن با attr(data-text) ساخته می‌شود و لازم نیست متن را دو بار تایپ کنید.

مقدار top: 100% روی شبه‌المان فاصله را کنترل می‌کند. چند پیکسل بیشتر، بازتاب را از متن جدا می‌کند.

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

میانگین امتیاز کاربران: ۴.۹ از ۳ رأی — برای امتیازدهی وارد شوید

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

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

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

کپچا

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

شاید بپسندی

پریمیوم

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

متن درخشش عبوری

متن درخشش لوکس
۳۲
۴.۶ (۵)

CREATIVE

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

متن خط دور توخالی

متن توخالی outline
۱۰۰
۴.۲ (۱۶)

خلاقیت بی‌مرز

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

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

متن گرادیان تیتر
۱۰۰
۴.۲ (۱۶)