فراغیب

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

دیداریویکی‌متن
صفحه‌ای تازه حاوی «<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="طراحی کابینت و دکوراسیون داخ...» ایجاد کرد
 
بدون خلاصۀ ویرایش
 
(۹ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<html>
<!-- ==============================
    گالری تصاویر کابینت
    ============================== -->


<section class="cabinet-gallery" aria-label="نمونه طراحی و اجرای کابینت">
<section class="cabinet-gallery" aria-label="نمونه طراحی و اجرای کابینت">
خط ۱۸: خط ۱۵:
     <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"
خط ۴۳: خط ۴۰:


</section>
</section>




<style>
<style>


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


.cabinet-gallery {
.cabinet-gallery {
خط ۵۷: خط ۵۵:
   padding: 20px 12px;
   padding: 20px 12px;
   box-sizing: border-box;
   box-sizing: border-box;
   overflow: hidden;
   overflow: visible;
}
}


خط ۶۵: خط ۶۳:
   grid-template-columns: 1fr;
   grid-template-columns: 1fr;
   gap: 20px;
   gap: 20px;
  align-items: center;
  overflow: visible;
}
}




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


.cabinet-card {
.cabinet-card {
   width: 100%;
   width: 100%;
   height: 248px;
   height: 500px;
 
   margin: 0;
   margin: 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);


  /* موبایل بدون حرکت */
   transform: none;
   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 !important;
  padding: 0 !important;
 
  border: 0 !important;
 
  box-sizing: border-box;


   /*
   /*
    تصویر کل فضای کادر را پر می‌کند
    تصویر دقیقاً به اندازه کادر
    و فضای خالی باقی نمی‌ماند
   */
   */
   object-fit: cover;
   object-fit: cover;
   object-position: center;
   object-position: center;


  margin: 0;
   /*
  padding: 0;
    هیچ Motion برای عکس
 
  */
  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 {
   .cabinet-gallery {
     padding: 30px 20px;
     padding: 70px 20px;
   }
   }


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


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


خط ۱۴۳: خط ۱۵۳:




/* =================================
/* =========================================
   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: repeat(4, 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%;
    height: 500px;


    height: 300px;
    /*
      انیمیشن فقط برای خود کادر
      نه برای تصویر
    */
     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(45px);
     transform: translateY(35px);
   }
   }


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




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


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


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


خط ۲۲۳: خط ۲۰۷:




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


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


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


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


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




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


@media (prefers-reduced-motion: reduce) {
@media (prefers-reduced-motion: reduce) {
خط ۲۵۵: خط ۲۳۸:


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