<div class="radikalwp-hov-lift"><h3 class="radikalwp-hov-lift-title">دوره پیشرفته CSS<//h3><p class="radikalwp-hov-lift-text">با افکتهای مدرن، انیمیشنهای GPU و معماری استایل مقیاسپذیر آشنا شوید.<//p><span class="radikalwp-hov-lift-more">جزئیات دوره ←<//span><//div>
.radikalwp-hov-lift {
max-width: 300px;
padding: 26px 24px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
cursor: pointer;
transition: transform .3s cubic-bezier(.25, .8, .3, 1), box-shadow .3s ease;
}
.radikalwp-hov-lift:hover {
transform: translateY(-8px);
box-shadow: 0 24px 44px rgba(15, 23, 42, .14);
}
.radikalwp-hov-lift-title {
margin: 0 0 10px;
font-size: 15.5px;
font-weight: 800;
color: #1e293b;
}
.radikalwp-hov-lift-text {
margin: 0 0 16px;
font-size: 12.5px;
line-height: 2;
color: #64748b;
}
.radikalwp-hov-lift-more {
font-size: 12.5px;
font-weight: 700;
color: #4f46e5;
}
درباره این اسنیپت
کارت استانداردی که در هاور چند پیکسل بلند میشود و سایه پخشتر و عمیقتری میگیرد؛ ساده، محترمانه و همهجا کاربردی. برای گرید محصولات، مقالات و هر لیست کارتی که نمیخواهید هاور پر سر و صدا باشد مناسب است. ترنزیشن کوتاه و منحنی ملایم، تعامل را تمیز نگه میدارد. پایه هر سیستم طراحی است.
پرسشهای متداول
مقدار translateY(-8px) را به 4 تا 5 پیکسل برسانید؛ برای لیستهای متراکم حرکت کمتر آرامتر است.
شعاع عمودی 44px و شفافیت .14 را کاهش دهید؛ سایه باید هشدار عمق بدهد نه جلب توجه کامل.
کل کارت را داخل <a> بگذارید یا لینک more را با استرچ تکنیک (pseudo-element مطلق inset صفر) روی کل کارت بگسترید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۹ از ۳ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
هاور شناور با سایه رشد
پکیج ابزارهای حرفهای
مجموعه کامل افزونهها و اسنیپتهای آماده برای راهاندازی سریع سایت.
هاور شیب پرسپکتیو کارت
هدفون بیسیم Pro
کیفیت صدا استودیویی با نویز کنسلینگ فعال
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!