پیش‌نمایش زنده (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 را حذف کنید؛ برای ساب‌تیترهای همیشه‌رنگی مناسب‌تر است.

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

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

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

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

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

کپچا

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

شاید بپسندی

CREATIVE

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

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

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

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

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

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

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

PREMIUM

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

متن فلزی براق

متن فلز کروم
۸۰
۴.۵ (۱۲)