فراغیب

الگو:کادرهای متحرک: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<html>
<html>
<!-- ==============================
    گالری تصاویر کابینت
    ============================== -->


<section class="cabinet-gallery" aria-label="نمونه طراحی و اجرای کابینت">
<section class="cabinet-gallery" aria-label="نمونه طراحی و اجرای کابینت">
خط ۴۷: خط ۴۴:
<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: 70px 12px;
 
   box-sizing: border-box;
   box-sizing: border-box;
   overflow: hidden;
 
  /*
    بسیار مهم:
    گالری نباید کادرهای متحرک را ببرد
  */
   overflow: visible;
}
}




/* =========================================
/* ==========================================
   Grid
   Grid
   ========================================= */
   ========================================== */


.cabinet-gallery__grid {
.cabinet-gallery__grid {
   width: 100%;
   width: 100%;
   display: grid;
   display: grid;


  /* موبایل: یک ستون */
   grid-template-columns: 1fr;
   grid-template-columns: 1fr;


خط ۷۵: خط ۸۳:


   align-items: center;
   align-items: center;
  /*
    بسیار مهم
  */
  overflow: visible;
}
}




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


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


خط ۹۰: خط ۱۰۳:
   padding: 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 {
خط ۱۲۴: خط ۱۴۰:


   /*
   /*
     تصویر تمام فضای کادر را پر می‌کند
     تصویر داخل کادر را کاملاً پر می‌کند
    بدون ایجاد فضای خالی
   */
   */
   object-fit: cover;
   object-fit: cover;
خط ۱۳۲: خط ۱۴۷:


   /*
   /*
     هیچ حرکتی برای تصویر وجود ندارد
     تصویر کاملاً ثابت
   */
   */
   transform: none !important;
   transform: none !important;
   transition: none !important;
   transition: none !important;
}
}




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


@media (min-width: 600px) {
@media (min-width: 600px) {


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


   .cabinet-gallery__grid {
   .cabinet-gallery__grid {


    /* دو ستون */
     grid-template-columns:
     grid-template-columns: repeat(2, minmax(0, 1fr));
      repeat(2, minmax(0, 1fr));


     gap: 24px;
     gap: 24px;
   }
   }


  /*
    ارتفاع همچنان 248px
  */
   .cabinet-card {
   .cabinet-card {
     height: 248px;
     height: 248px;
خط ۱۶۷: خط ۱۸۰:




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


@media (min-width: 900px) {
@media (min-width: 900px) {


   .cabinet-gallery {
   .cabinet-gallery {
     padding: 40px 20px;
 
    /*
      فضای کافی برای حرکت
    */
     padding: 100px 20px;
   }
   }


   .cabinet-gallery__grid {
   .cabinet-gallery__grid {


    /* چهار ستون */
     grid-template-columns:
     grid-template-columns:
       repeat(4, minmax(0, 1fr));
       repeat(4, minmax(0, 1fr));
خط ۱۸۶: خط ۲۰۳:


     align-items: center;
     align-items: center;
    overflow: visible;
   }
   }




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


   .cabinet-card {
   .cabinet-card {


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


     /*
     /*
       Motion فقط برای کادر
       فقط خود کادر حرکت می‌کند
     */
     */
     transition:
     transition:
خط ۲۰۸: خط ۲۲۶:




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


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




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




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


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


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


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


خط ۲۴۲: خط ۲۶۹:
   /*
   /*
     کادرهای بالا
     کادرهای بالا
     در Hover خیلی پایین‌تر می‌آیند
     بسیار پایین‌تر می‌آیند
   */
   */


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


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


خط ۲۵۴: خط ۲۸۲:




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


@media (min-width: 1100px) {
@media (min-width: 1100px) {
  .cabinet-gallery {
    padding: 100px 20px;
  }


   .cabinet-gallery__grid {
   .cabinet-gallery__grid {
     gap: 24px;
     gap: 24px;
   }
   }


   .cabinet-card {
   .cabinet-card {
     height: 248px;
     height: 248px;
   }
   }
خط ۲۷۱: خط ۳۰۶:




/* =========================================
/* ==========================================
   کاهش 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;
   }
   }
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:کادرهای_متحرک»