پیشنمایش زنده (iframe sandbox)
تمامصفحه
<h2 class="radikalwp-txt-outline">RADIKAL<//h2>
.radikalwp-txt-outline {
margin: 0;
font-size: 58px;
font-weight: 900;
letter-spacing: 4px;
text-align: center;
color: transparent;
-webkit-text-stroke: 2px #6366f1;
transition: color .4s ease;
cursor: default;
}
.radikalwp-txt-outline:hover { color: #6366f1; }
@supports not (-webkit-text-stroke: 1px black) {
.radikalwp-txt-outline {
color: #6366f1;
text-shadow: -1.5px -1.5px 0 #6366f1, 1.5px -1.5px 0 #6366f1, -1.5px 1.5px 0 #6366f1, 1.5px 1.5px 0 #6366f1;
}
}
درباره این اسنیپت
متن توخالی که فقط دور آن خط رنگی کشیده شده و در هاور، داخلش پر میشود؛ جلوهای معماریگونه و پرتناسب برای تیترهای بزرگ. با text-stroke (و fallback به سایههای نازک) ساخته شده و ترنزیشن رنگ آن روان است. برای صفحههای خلاقانه، پورتفولیو و بریفینگهای برند مناسب است. ضخامت خط قابل تنظیم است.
پرسشهای متداول
مقدار 2px در -webkit-text-stroke را تغییر دهید؛ برای تیترهای خیلی بزرگ 3px و برای متن کوچک 1px بهتر است.
مرورگرهایی که text-stroke ندارند با @supports متن توپر با سایههای چهارطرفه میبینند که تقریباً همان حس خط دور را میدهد.
بله؛ رنگ hover را به قاعده اصلی منتقل کنید و transition را حذف کنید؛ برای سابتیترهای همیشهرنگی مناسبتر است.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۱ از ۹ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!