پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<div class="radikalwp-bg-cats"><span class="radikalwp-bg-cat-d">طراحی<//span><span class="radikalwp-bg-cat-c">کدنویسی<//span><span class="radikalwp-bg-cat-g">گرافیک<//span><//div>
.radikalwp-bg-cats { display: flex; gap: 8px; }
.radikalwp-bg-cats span { padding: 5px 14px; font-size: 11px; font-weight: 700; border-radius: 8px; }
.radikalwp-bg-cat-d { color: #7c3aed; background: #f3e8ff; }
.radikalwp-bg-cat-c { color: #0369a1; background: #e0f2fe; }
.radikalwp-bg-cat-g { color: #be185d; background: #fce7f3; }

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

برچسب دسته با رنگ اختصاصی هر دسته (طراحی/کدنویسی/گرافیک)؛ راه سریع تشخیص موضوع کارت. سه رنگ پیش‌فرض با همین کلاس آماده است. این بلوک ناوبری ساختار مسیریابی صفحه را می‌سازد و در دسکتاپ و موبایل پاسخ‌گو است. پشتیبانی کامل راست‌چین (RTL) دارد و در حالت تیره سایت نیز ظاهر مناسبی خواهد داشت. کد کاملاً با CSS خالص نوشته شده و به هیچ کتابخانه خارجی وابسته نیست؛ کافی است آن را کپی و در پروژه خود بچسبانید.

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

خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشن‌ها روی GPU اجرا می‌شوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.

بله، این کد به‌صورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه می‌شود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.

بله، اندازه‌ها با واحدهای نسبی و flex/grid ساخته شده‌اند و در نمایشگرهای کوچک هم درست نمایش داده می‌شوند. اگر عرض ثابت دیدید، می‌توانید آن را با max-width برای موبایل تنظیم کنید.

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

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

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

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

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

کپچا

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

شاید بپسندی