<a class="radikalwp-card-article" href="#"><span class="radikalwp-card-article-bar radikalwp-card-article-bar--indigo"><//span><div class="radikalwp-card-article-body"><time class="radikalwp-card-article-date">۱۲ مهر ۱۴۰۴<//time><h3 class="radikalwp-card-article-title">راهنمای کامل بهینهسازی سرعت صفحات المنتور<//h3><p class="radikalwp-card-article-excerpt">با این هفت تکنیک ساده، امتیاز Core Web Vitals صفحات خود را بهطور محسوس بهبود دهید.<//p><//div><//a>
.radikalwp-card-article {
display: flex;
max-width: 420px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
overflow: hidden;
text-decoration: none;
transition: box-shadow .3s ease, transform .3s ease;
}
.radikalwp-card-article:hover {
transform: translateX(-4px);
box-shadow: 0 14px 34px rgba(15, 23, 42, .1);
}
.radikalwp-card-article-bar {
width: 5px;
flex-shrink: 0;
background: #94a3b8;
transition: width .25s ease;
}
.radikalwp-card-article:hover .radikalwp-card-article-bar { width: 8px; }
.radikalwp-card-article-bar--indigo { background: #6366f1; }
.radikalwp-card-article-bar--emerald { background: #10b981; }
.radikalwp-card-article-bar--rose { background: #f43f5e; }
.radikalwp-card-article-body { padding: 16px 18px; }
.radikalwp-card-article-date {
display: block;
font-size: 11px;
color: #94a3b8;
margin-bottom: 6px;
}
.radikalwp-card-article-title {
margin: 0 0 8px;
font-size: 15px;
font-weight: 800;
color: #1e293b;
line-height: 1.7;
transition: color .25s ease;
}
.radikalwp-card-article:hover .radikalwp-card-article-title { color: #4f46e5; }
.radikalwp-card-article-excerpt {
margin: 0;
font-size: 12.5px;
line-height: 1.9;
color: #64748b;
}
درباره این اسنیپت
کارت مقاله یا خبر با نوار رنگی عمودی در لبه راست که دسته محتوا را در یک نگاه مشخص میکند. تاریخ، عنوان و خلاصه سهخطی در چیدمانی مرتب و فشرده قرار گرفتهاند و هاور، نوار را بلندتر و عنوان را رنگی میکند. مناسب لیست وبلاگ، خبرنامه داخلی و بخش اطلاعیههای سایت است. سه رنگ نمونه برای دستههای مختلف در کد آماده است.
پرسشهای متداول
سه کلاس اصلاحی --indigo و --emerald و --rose در کد آماده است؛ بهجای آنها رنگ برند دسته خودتان را بگذارید یا کلاس جدیدی به همان الگو اضافه کنید.
حرکت translateX(-4px) جهت خواندن RTL را همراهی میکند و حس «لغزش به داخل» میدهد. برای سایت چپبهراست جهت را مثبت کنید.
چیدمان برای دو تا سه خط خلاصه تنظیم شده است؛ برای متنهای بلندتر از line-clamp در CSS یا کوتاهسازی سمت سرور استفاده کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۶ از ۵ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
هفت اصل رابط کاربری تمیز
با این اصول ساده صفحههایی بسازید که هم زیبا باشند و هم خواندنشان خستهکننده نباشد.
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!