پیشنمایش زنده (iframe sandbox)
تمامصفحه
<nav class="radikalwp-nv-glass"><a href="#" class="radikalwp-nv-glass-on">داشبورد<//a><a href="#">پروژهها<//a><a href="#">گزارشها<//a><a href="#">تنظیمات<//a><//nav>
.radikalwp-nv-glass {
display: inline-flex;
gap: 4px;
padding: 6px;
background: rgba(15, 23, 42, .85);
backdrop-filter: blur(10px);
border: 1px solid #334155;
border-radius: 999px;
}
.radikalwp-nv-glass a {
padding: 8px 20px;
font-size: 12.5px;
font-weight: 600;
color: #cbd5e1;
text-decoration: none;
border-radius: 999px;
transition: all .22s ease;
}
.radikalwp-nv-glass a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.radikalwp-nv-glass-on { color: #0f172a !important; background: #fff !important; font-weight: 700 !important; }
درباره این اسنیپت
هدر شناور شیشهای با لینکهای قرصی که لینک فعال پسزمینه سفید میگیرد؛ مخصوص سایتهای تیره یا تصویری. با backdrop-filter روی هر پسزمینهای مینشیند.
پرسشهای متداول
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۱۶ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!