فراغیب

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

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۸ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<html>
<!-- ==============================
    گالری تصاویر کابینت
    ============================== -->


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


</section>
</section>




خط ۴۸: خط ۴۶:


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


خط ۵۷: خط ۵۵:
   padding: 20px 12px;
   padding: 20px 12px;
   box-sizing: border-box;
   box-sizing: border-box;
   overflow: hidden;
   overflow: visible;
}
}
/* =========================================
  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;
   align-items: center;
  overflow: visible;
}
}




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


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


   margin: 0;
   margin: 0;
   padding: 0;
   padding: 0;


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


خط ۹۶: خط ۸۶:
   background: #eee;
   background: #eee;


  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;


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


خط ۱۱۵: خط ۱۰۳:
   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;
خط ۱۴۶: خط ۱۳۷:


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


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


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


خط ۱۷۴: خط ۱۶۰:


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


   .cabinet-gallery__grid {
   .cabinet-gallery__grid {
 
     grid-template-columns: repeat(4, minmax(0, 1fr));
    /* چهار ستون */
     grid-template-columns:
      repeat(4, minmax(0, 1fr));
 
     gap: 24px;
     gap: 24px;
     align-items: center;
     align-items: center;
    overflow: visible;
   }
   }
  /* ======================================
    کادرها
    ====================================== */


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


    /*
      Motion فقط برای کادر
    */
     transition:
     transition:
       transform .7s cubic-bezier(.22,.61,.36,1);
       transform .7s cubic-bezier(.22,.61,.36,1);
خط ۲۰۸: خط ۱۸۱:




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


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


  /* کادر 2 و 4 بالا */
   .cabinet-card:nth-child(even) {
   .cabinet-card:nth-child(even) {
     transform: translateY(-35px);
     transform: translateY(-35px);
خط ۲۲۴: خط ۱۹۲:




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


   .cabinet-gallery__grid:hover
   .cabinet-gallery__grid:hover
   .cabinet-card:nth-child(odd) {
   .cabinet-card:nth-child(odd) {
     transform: translateY(-55px);
     transform: translateY(-55px);
   }
   }
  /*
    کادرهای بالا
    در Hover خیلی پایین‌تر می‌آیند
  */


   .cabinet-gallery__grid:hover
   .cabinet-gallery__grid: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__grid {
   .cabinet-gallery {
     gap: 24px;
     padding: 100px 20px;
   }
   }


   .cabinet-card {
   .cabinet-card {
     height: 248px;
     height: 500px;
   }
   }


خط ۲۸۵: خط ۲۳۸:


</style>
</style>
</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:کادرهای_متحرک»