کادرهای متحرک - فراغیب
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| (۷ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
| خط ۴۰: | خط ۴۰: | ||
</section> | </section> | ||
<style> | <style> | ||
/* | /* ========================================= | ||
گالری | گالری کابینت - Mobile First | ||
========================================= */ | |||
.cabinet-gallery { | .cabinet-gallery { | ||
width: 100%; | width: 100%; | ||
max-width: 1200px; | max-width: 1200px; | ||
margin: 0 auto; | margin: 0 auto; | ||
padding: 20px 12px; | |||
padding: | |||
box-sizing: border-box; | box-sizing: border-box; | ||
overflow: visible; | overflow: visible; | ||
} | } | ||
.cabinet-gallery__grid { | .cabinet-gallery__grid { | ||
width: 100%; | width: 100%; | ||
display: grid; | display: grid; | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
gap: 20px; | gap: 20px; | ||
align-items: center; | align-items: center; | ||
overflow: visible; | overflow: visible; | ||
} | } | ||
/* | /* ========================================= | ||
کادر | کادر موبایل | ||
========================================= */ | |||
.cabinet-card { | .cabinet-card { | ||
width: 100%; | width: 100%; | ||
height: 500px; | |||
height: | |||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
box-sizing: border-box; | |||
overflow: hidden; | overflow: hidden; | ||
| خط ۱۱۲: | خط ۸۶: | ||
background: #eee; | background: #eee; | ||
box- | box-shadow: 0 8px 25px rgba(0,0,0,.10); | ||
transform: none; | |||
/* | /* جلوگیری از تأثیر CSS قالب */ | ||
min-width: 0; | |||
min-height: 0; | |||
} | } | ||
/* | /* ========================================= | ||
تصویر | تصویر | ||
========================================= */ | |||
.cabinet-card img { | .cabinet-card img { | ||
display: block; | display: block; | ||
width: 100%; | width: 100% !important; | ||
height: 100%; | height: 100% !important; | ||
max-width: none !important; | |||
min-width: 0 !important; | |||
margin: 0; | margin: 0 !important; | ||
padding: 0; | padding: 0 !important; | ||
border: 0; | border: 0 !important; | ||
box-sizing: border-box; | |||
/* | /* | ||
تصویر | تصویر دقیقاً به اندازه کادر | ||
*/ | */ | ||
object-fit: cover; | object-fit: cover; | ||
object-position: center; | object-position: center; | ||
/* | /* | ||
هیچ Motion برای عکس | |||
*/ | */ | ||
transform: none !important; | transform: none !important; | ||
transition: none !important; | transition: none !important; | ||
} | } | ||
/* | /* ========================================= | ||
Tablet | |||
========================================= */ | |||
@media (min-width: 600px) { | @media (min-width: 600px) { | ||
| خط ۱۶۶: | خط ۱۴۱: | ||
.cabinet-gallery__grid { | .cabinet-gallery__grid { | ||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
grid-template-columns: | |||
gap: 24px; | gap: 24px; | ||
} | } | ||
.cabinet-card { | .cabinet-card { | ||
height: | width: 100%; | ||
height: 500px; | |||
} | } | ||
| خط ۱۸۰: | خط ۱۵۳: | ||
/* | /* ========================================= | ||
Desktop | |||
========================================= */ | |||
@media (min-width: 900px) { | @media (min-width: 900px) { | ||
.cabinet-gallery { | .cabinet-gallery { | ||
padding: 100px 20px; | padding: 100px 20px; | ||
} | } | ||
.cabinet-gallery__grid { | .cabinet-gallery__grid { | ||
grid-template-columns: repeat(4, minmax(0, 1fr)); | |||
grid-template-columns: | |||
gap: 24px; | gap: 24px; | ||
align-items: center; | align-items: center; | ||
overflow: visible; | overflow: visible; | ||
} | } | ||
.cabinet-card { | .cabinet-card { | ||
width: 100%; | |||
height: 500px; | |||
transition: | transition: | ||
transform .7s cubic-bezier(.22,.61,.36,1); | transform .7s cubic-bezier(.22,.61,.36,1); | ||
| خط ۲۲۶: | خط ۱۸۱: | ||
/* | /* حالت عادی */ | ||
.cabinet-card:nth-child(odd) { | .cabinet-card:nth-child(odd) { | ||
transform: translateY(35px); | |||
transform: | |||
} | } | ||
.cabinet-card:nth-child(even) { | .cabinet-card:nth-child(even) { | ||
transform: translateY(-35px); | |||
transform: | |||
} | } | ||
/* | /* حالت هاور */ | ||
.cabinet-gallery__grid:hover | .cabinet-gallery__grid:hover | ||
.cabinet-card:nth-child(odd) { | .cabinet-card:nth-child(odd) { | ||
transform: translateY(-55px); | |||
transform: | |||
} | } | ||
.cabinet-gallery__grid:hover | .cabinet-gallery__grid:hover | ||
.cabinet-card:nth-child(even) { | .cabinet-card:nth-child(even) { | ||
transform: translateY(55px); | |||
transform: | |||
} | } | ||
| خط ۲۸۲: | خط ۲۰۷: | ||
/* | /* ========================================= | ||
دسکتاپ بزرگ | دسکتاپ بزرگ | ||
========================================= */ | |||
@media (min-width: 1100px) { | @media (min-width: 1100px) { | ||
.cabinet-gallery { | .cabinet-gallery { | ||
padding: 100px 20px; | padding: 100px 20px; | ||
} | } | ||
.cabinet-card { | .cabinet-card { | ||
height: 500px; | |||
height: | |||
} | } | ||
| خط ۳۰۶: | خط ۲۲۴: | ||
/* | /* ========================================= | ||
کاهش Motion | کاهش Motion | ||
========================================= */ | |||
@media (prefers-reduced-motion: reduce) { | @media (prefers-reduced-motion: reduce) { | ||
.cabinet-card { | .cabinet-card { | ||
transition: none !important; | transition: none !important; | ||
transform: none !important; | transform: none !important; | ||
} | } | ||
| خط ۳۲۲: | خط ۲۳۸: | ||
</style> | </style> | ||
</html> | </html> | ||
نسخهٔ کنونی تا ۱۷ اوت ۲۰۲۶، ساعت ۰۹:۳۹
