Javid در ‏۱۷ اوت ۲۰۲۶، ساعت ۱۳:۰۰

2026-08-17T13:00:00Z

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۱۷ اوت ۲۰۲۶، ساعت ۱۳:۰۰
خط ۲۱۴:		خط ۲۱۴:

	.cabinet-gallery {		.cabinet-gallery {
	padding: ~~20px~~ 1px;		padding: 80px 1px;
	}		}

Javid در ‏۱۷ اوت ۲۰۲۶، ساعت ۱۲:۵۸

2026-08-17T12:58:47Z

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۱۷ اوت ۲۰۲۶، ساعت ۱۲:۵۸
خط ۱۶۰:		خط ۱۶۰:

	.cabinet-gallery {		.cabinet-gallery {
	padding: ~~100px 20px~~;		padding: 5px 1px;
	}		}

خط ۲۱۴:		خط ۲۱۴:

	.cabinet-gallery {		.cabinet-gallery {
	padding: ~~100px~~ 20px;		padding: 20px 1px;
	}		}

Javid: صفحه‌ای تازه حاوی «

...» ایجاد کرد

2026-08-17T09:40:59Z

صفحه‌ای تازه حاوی «<html> <section class="cabinet-gallery" aria-label="نمونه طراحی و اجرای کابینت"> <div class="cabinet-gallery__grid"> <figure class="cabinet-card"> <img src="https://dl.faraghaib.ir/m/260015-01/260015-01-45.png" alt="طراحی کابینت و دکوراسیون داخلی مدرن" loading="lazy" decoding="async"> </figure> <figure class="cabinet-card">...» ایجاد کرد

صفحهٔ تازه

<html>

<section class="cabinet-gallery" aria-label="نمونه طراحی و اجرای کابینت">

<div class="cabinet-gallery__grid">

<figure class="cabinet-card">
<img
src="https://dl.faraghaib.ir/m/260015-01/260015-01-45.png"
alt="طراحی کابینت و دکوراسیون داخلی مدرن"
loading="lazy"
decoding="async">
</figure>

<figure class="cabinet-card">
<img
src="https://dl.faraghaib.ir/m/260015-01/260015-01-46.png"
alt="کابینت آشپزخانه مدرن با طراحی چوبی"
loading="lazy"
decoding="async">
</figure>

<figure class="cabinet-card">
<img
src="https://dl.faraghaib.ir/m/260015-01/260015-01-47.png"
alt="طراحی فضای غذاخوری و کابینت مدرن"
loading="lazy"
decoding="async">
</figure>

<figure class="cabinet-card">
<img
src="https://dl.faraghaib.ir/m/260015-01/260015-01-48.png"
alt="طراحی دکوراسیون داخلی و کابینت مدرن"
loading="lazy"
decoding="async">
</figure>

</div>

</section>

<style>

/* =========================================
گالری کابینت - Mobile First
========================================= */

.cabinet-gallery {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px 12px;
box-sizing: border-box;
overflow: visible;
}

.cabinet-gallery__grid {
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: 20px;
align-items: center;
overflow: visible;
}

/* =========================================
کادر موبایل
========================================= */

.cabinet-card {
width: 100%;
height: 500px;

margin: 0;
padding: 0;

box-sizing: border-box;
overflow: hidden;

border-radius: 38px;

background: #eee;

box-shadow: 0 8px 25px rgba(0,0,0,.10);

transform: none;

/* جلوگیری از تأثیر CSS قالب */
min-width: 0;
min-height: 0;
}

/* =========================================
تصویر
========================================= */

.cabinet-card img {
display: block;

width: 100% !important;
height: 100% !important;

max-width: none !important;
min-width: 0 !important;

margin: 0 !important;
padding: 0 !important;

border: 0 !important;

box-sizing: border-box;

/*
تصویر دقیقاً به اندازه کادر
*/
object-fit: cover;
object-position: center;

/*
هیچ Motion برای عکس
*/
transform: none !important;
transition: none !important;
}

/* =========================================
Tablet
========================================= */

@media (min-width: 600px) {

.cabinet-gallery {
padding: 70px 20px;
}

.cabinet-gallery__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}

.cabinet-card {
width: 100%;
height: 500px;
}

}

/* =========================================
Desktop
========================================= */

@media (min-width: 900px) {

.cabinet-gallery {
padding: 100px 20px;
}

.cabinet-gallery__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
align-items: center;
overflow: visible;
}

.cabinet-card {
width: 100%;
height: 500px;

transition:
transform .7s cubic-bezier(.22,.61,.36,1);

will-change: transform;
}

/* حالت عادی */

.cabinet-card:nth-child(odd) {
transform: translateY(35px);
}

.cabinet-card:nth-child(even) {
transform: translateY(-35px);
}

/* حالت هاور */

.cabinet-gallery__grid:hover
.cabinet-card:nth-child(odd) {
transform: translateY(-55px);
}

.cabinet-gallery__grid:hover
.cabinet-card:nth-child(even) {
transform: translateY(55px);
}

}

/* =========================================
دسکتاپ بزرگ
========================================= */

@media (min-width: 1100px) {

.cabinet-gallery {
padding: 100px 20px;
}

.cabinet-card {
height: 500px;
}

}

/* =========================================
کاهش Motion
========================================= */

@media (prefers-reduced-motion: reduce) {

.cabinet-card {
transition: none !important;
transform: none !important;
}

}

</style>

</html>

الگو:کادرهای متحرک/کابینت یاشیل - تاریخچهٔ نسخه‌ها

Javid در ‏۱۷ اوت ۲۰۲۶، ساعت ۱۳:۰۰

Javid در ‏۱۷ اوت ۲۰۲۶، ساعت ۱۲:۵۸

Javid: صفحه‌ای تازه حاوی « ...» ایجاد کرد

Javid: صفحه‌ای تازه حاوی «

...» ایجاد کرد