پیشنمایش زنده (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% روی شبهالمان فاصله را کنترل میکند. چند پیکسل بیشتر، بازتاب را از متن جدا میکند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۹ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!