پرش به محتوا

کادرهای متحرک - فراغیب

از فراغیب
تفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
صفحه‌ای تازه حاوی «<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="طراحی کابینت و دکوراسیون داخ...» ایجاد کرد
 
بدون خلاصۀ ویرایش
خط ۱۸: خط ۱۸:
     <figure class="cabinet-card">
     <figure class="cabinet-card">
       <img
       <img
         src="cabinet-2.png"
         src="https://dl.faraghaib.ir/m/260015-01/260015-01-46.png"
         alt="کابینت آشپزخانه مدرن با طراحی چوبی"
         alt="کابینت آشپزخانه مدرن با طراحی چوبی"
         loading="lazy"
         loading="lazy"
خط ۲۶: خط ۲۶:
     <figure class="cabinet-card">
     <figure class="cabinet-card">
       <img
       <img
         src="cabinet-3.png"
         src="https://dl.faraghaib.ir/m/260015-01/260015-01-47.png"
         alt="طراحی فضای غذاخوری و کابینت مدرن"
         alt="طراحی فضای غذاخوری و کابینت مدرن"
         loading="lazy"
         loading="lazy"
خط ۳۴: خط ۳۴:
     <figure class="cabinet-card">
     <figure class="cabinet-card">
       <img
       <img
         src="cabinet-4.png"
         src="https://dl.faraghaib.ir/m/260015-01/260015-01-48.png"
         alt="طراحی دکوراسیون داخلی و کابینت مدرن"
         alt="طراحی دکوراسیون داخلی و کابینت مدرن"
         loading="lazy"
         loading="lazy"
خط ۴۷: خط ۴۷:
<style>
<style>


/* =================================
/* =========================================
   Mobile First
   گالری - Mobile First
   ================================= */
   ========================================= */


.cabinet-gallery {
.cabinet-gallery {
خط ۵۹: خط ۵۹:
   overflow: hidden;
   overflow: hidden;
}
}
/* =========================================
  Grid
  ========================================= */


.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;
}
}




/* =================================
/* =========================================
   کادر
   کادر تصاویر
   ================================= */
   ارتفاع ثابت 248px
  ========================================= */


.cabinet-card {
.cabinet-card {
   width: 100%;
   width: 100%;
   height: 248px;
   height: 248px;
   margin: 0;
   margin: 0;
  padding: 0;


   overflow: hidden;
   overflow: hidden;
خط ۸۵: خط ۹۸:
   box-sizing: border-box;
   box-sizing: border-box;


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


   /* موبایل بدون حرکت */
   /* موبایل بدون Motion */
   transform: none;
   transform: none;
  /* جلوگیری از تغییر اندازه */
  flex-shrink: 0;
}
}




/* =================================
/* =========================================
   تصویر داخل کادر
   تصویر
   ================================= */
   ========================================= */


.cabinet-card img {
.cabinet-card img {
خط ۱۰۱: خط ۱۱۷:
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
  margin: 0;
  padding: 0;
  border: 0;


   /*
   /*
    تصویر کل فضای کادر را پر می‌کند
    تصویر تمام فضای کادر را پر می‌کند
    و فضای خالی باقی نمی‌ماند
    بدون ایجاد فضای خالی
   */
   */
   object-fit: cover;
   object-fit: cover;
خط ۱۱۰: خط ۱۳۱:
   object-position: center;
   object-position: center;


  margin: 0;
   /*
  padding: 0;
    هیچ حرکتی برای تصویر وجود ندارد
 
  */
  border: 0;
   transform: none !important;
 
   transition: none !important;
   /* هیچ Motion روی عکس وجود ندارد */
   transform: none;
   transition: none;
}
}




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


@media (min-width: 600px) {
@media (min-width: 600px) {
خط ۱۳۲: خط ۱۵۰:


   .cabinet-gallery__grid {
   .cabinet-gallery__grid {
     grid-template-columns: repeat(2, 1fr);
 
    /* دو ستون */
     grid-template-columns: repeat(2, minmax(0, 1fr));
 
     gap: 24px;
     gap: 24px;
   }
   }


  /*
    ارتفاع همچنان 248px
  */
   .cabinet-card {
   .cabinet-card {
     height: 300px;
     height: 248px;
   }
   }


خط ۱۴۳: خط ۱۶۷:




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


@media (min-width: 900px) {
@media (min-width: 900px) {
خط ۱۵۴: خط ۱۷۸:


   .cabinet-gallery__grid {
   .cabinet-gallery__grid {
     grid-template-columns: repeat(4, 1fr);
 
    /* چهار ستون */
     grid-template-columns:
      repeat(4, minmax(0, 1fr));


     gap: 24px;
     gap: 24px;
خط ۱۶۱: خط ۱۸۸:
   }
   }


  /* ======================================
    کادرها
    ====================================== */


   .cabinet-card {
   .cabinet-card {


     height: 300px;
    width: 100%;
     height: 248px;


     /*
     /*
      انیمیشن فقط برای خود کادر
      Motion فقط برای کادر
      نه برای تصویر
     */
     */
     transition:
     transition:
خط ۱۷۷: خط ۲۰۸:




   /* =================================
   /* ======================================
     حالت اولیه
     حالت اولیه
     ================================= */
     ====================================== */


   /* کادرهای 1 و 3 پایین */
   /* کادر 1 و 3 پایین */
   .cabinet-card:nth-child(odd) {
   .cabinet-card:nth-child(odd) {
     transform: translateY(45px);
     transform: translateY(35px);
   }
   }




   /* کادرهای 2 و 4 بالا */
   /* کادر 2 و 4 بالا */
   .cabinet-card:nth-child(even) {
   .cabinet-card:nth-child(even) {
     transform: translateY(-45px);
     transform: translateY(-35px);
   }
   }




   /* =================================
   /* ======================================
     حالت Hover
     Hover
     ================================= */
     ====================================== */


   /*
   /*
    کادرهایی که ابتدا پایین بودند
    کادرهای پایین
    حالا خیلی بالاتر می‌روند
    در Hover خیلی بالاتر می‌روند
   */
   */


خط ۲۰۵: خط ۲۳۶:
   .cabinet-card:nth-child(odd) {
   .cabinet-card:nth-child(odd) {


     transform: translateY(-65px);
     transform: translateY(-55px);
   }
   }




   /*
   /*
    کادرهایی که ابتدا بالا بودند
    کادرهای بالا
    حالا خیلی پایین‌تر می‌آیند
    در Hover خیلی پایین‌تر می‌آیند
   */
   */


خط ۲۱۷: خط ۲۴۸:
   .cabinet-card:nth-child(even) {
   .cabinet-card:nth-child(even) {


     transform: translateY(65px);
     transform: translateY(55px);
   }
   }


خط ۲۲۳: خط ۲۵۴:




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


@media (min-width: 1100px) {
@media (min-width: 1100px) {
خط ۲۳۴: خط ۲۶۵:


   .cabinet-card {
   .cabinet-card {
     height: 300px;
     height: 248px;
    border-radius: 38px;
   }
   }


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




/* =================================
/* =========================================
   کاربران دارای کاهش Motion
   کاهش Motion
   ================================= */
   ========================================= */


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

نسخهٔ ‏۱۷ اوت ۲۰۲۶، ساعت ۰۹:۱۹

طراحی کابینت و دکوراسیون داخلی مدرن
کابینت آشپزخانه مدرن با طراحی چوبی
طراحی فضای غذاخوری و کابینت مدرن
طراحی دکوراسیون داخلی و کابینت مدرن

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:کادرهای_متحرک&oldid=6470»