<div class="radikalwp-cd-music"><div class="radikalwp-cd-music-c"><//div><div class="radikalwp-cd-music-m"><b>شب بیستاره<//b><span>هنرمند مستقل<//span><div class="radikalwp-cd-music-p"><i><//i><//div><div class="radikalwp-cd-music-c2"><span>◀◀<//span><span class="radikalwp-cd-music-play">▶<//span><span>▶▶<//span><//div><//div><//div>
.radikalwp-cd-music {
display: flex;
gap: 14px;
width: 300px;
padding: 16px;
background: #0f172a;
border-radius: 18px;
}
.radikalwp-cd-music-c {
width: 74px;
height: 74px;
flex-shrink: 0;
background: conic-gradient(#f59e0b, #ec4899, #8b5cf6, #f59e0b);
border-radius: 14px;
animation: radikalwp-music-spin 5s linear infinite;
}
@keyframes radikalwp-music-spin { to { transform: rotate(360deg); } }
.radikalwp-cd-music-m { flex: 1; min-width: 0; }
.radikalwp-cd-music-m b { display: block; font-size: 13.5px; color: #fff; }
.radikalwp-cd-music-m span { font-size: 10.5px; color: #94a3b8; }
.radikalwp-cd-music-p { height: 4px; background: #1e293b; border-radius: 999px; margin: 10px 0 8px; overflow: hidden; }
.radikalwp-cd-music-p i { display: block; width: 45%; height: 100%; background: linear-gradient(90deg, #f59e0b, #ec4899); border-radius: 999px; }
.radikalwp-cd-music-c2 { display: flex; align-items: center; gap: 14px; color: #cbd5e1; font-size: 11px; }
.radikalwp-cd-music-play {
width: 34px;
height: 34px;
background: #fff;
color: #0f172a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
cursor: pointer;
}
درباره این اسنیپت
کارت پخش با جلد آلبوم گرادیانی، نوار پیشرفت و کنترلهای موسیقی؛ حس پلیر اسپاتیفایگونه میدهد. برای پلیرها و بخش پادکست سایت جذاب است. این کارت برای نمایش محصول، پروفایل، آمار یا محتوای ویژه در گریدهای صفحه اصلی مناسب است. پشتیبانی کامل راستچین (RTL) دارد و در حالت تیره سایت نیز ظاهر مناسبی خواهد داشت. کد کاملاً با CSS خالص نوشته شده و به هیچ کتابخانه خارجی وابسته نیست؛ کافی است آن را کپی و در پروژه خود بچسبانید.
پرسشهای متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۸ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
دفتر مرکزی
تهران، خیابان آزادی، پلاک ۱۲۰
کارت آدرس با نقشه گرادیانی
محمد رضایی
توسعهدهنده فرانتاند
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!