جلسه ۵۸ – گالری تصاویر در CSS

چگونه گالری تصاویر بسازیم؟ گالری هنری با گالری فروشگاهی چه فرقی دارند؟

همونطور که تو مقدمه فصل گالری تصاویر دیدیم، می‌تونیم گالری های تصاویر رو به دو فرم هنری و فروشگاهی به کار ببریم.

گالری تصاویر فروشگاهی

این گالری ها، شباهت بسیار زیادی به کارت ها دارن. برای مطالعه کامل کارت ها می‌تونین به مقاله کارت ها در CSS مراجعه کنین.

کاربرد این گالری ها، می‌تونه معرفی محصول و افراد مختلف باشه، از این نوع گالری برای معرفی آثار هنری هم استفاده می‌کنن.

مشخصه تصاویر تو این گالری ها، اینه که همیشه همراه خودشون توضیح دارن.

به مثال زیر توجه کنین:

نتیجه کد به شکل زیر خواهد بود:

<div class="card"> 
   <a target="_blank" href="car.jpg"> 
      <img src="car.jpg"> 
   </a> 
   <div> 
      <p>!فلان متن</p> 
   </div> 
</div> 
<div class="card"> 
   <a target="_blank" href="sunset.jpg"> 
      <img src="sunset.jpg"> 
   </a> 
   <div> 
      <p>!فلان متن</p> 
   </div> 
</div> 
<div class="card"> 
   <a target="_blank" href="ancient.jpg"> 
      <img src="ancient.jpg"> 
   </a> 
   <div> 
      <p>!فلان متن</p> 
   </div>
</div>

div.card{
   width: 20%;
   height:300px;
   border: 1px solid black;
   margin:30px;
   display: inline-block;
}
div.card:hover{
   box-shadow: 0px 1px 3px gray;
}
.card img{
   width:100%;
   height:60%;
}
.card div{
   display: flex;
   justify-content: center;
   align-items: center;
   height: 40%;
}

گالری تصاویر هنری

توسط این گالری ها، می‌تونیم تصاویر هنری زیبا رو تو صفحمون به صورت کاملا با نظم کنار هم قرار بدیم. این گالری ها می‌تونن از ویژگی grid و یا flexbox بهره ببرن.

به مثال زیر توجه کنین:

و نتیجه کد رو به صورت زیر می‌بینیم:

<a target="_blank" href="car.jpg">
   <img src="car.jpg">
</a>
<a target="_blank" href="ancient.jpg">
   <img src="ancient.jpg">
</a>
<a target="_blank" href="sea.jpg">
   <img src="sea.jpg">
</a>
<a target="_blank" href="mosque.jpg">
   <img src="mosque.jpg">
</a>
<a target="_blank" href="north.jpg">
   <img src="north.jpg">
</a>
<a target="_blank" href="sunset.jpg">
   <img src="sunset.jpg">
</a>

body{
   display: grid;
   grid-template-rows: 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   height: 100%;
}
a{
   display: inline-block;
   width: 100%;
   height:100%;
}
a img{
   width: 100%;
   height:100%;
   opacity: 0.8;
}
a img:hover{
   opacity: 1;
}

اگه در جایی از مقاله، براتون سوالی پیش اومد حتما تو قسمت نظرات پایگاه دانش میزفا بپرسین، ما همیشه هستیم و بهتون پاسخ می‌دیم 🙂

گالری های تصاویر واکنش گرا

ما می‌تونیم گالری های تصویر رو به صورت کاملا واکنش گرا هم تعریف کنیم.

همونطور که در مقاله مفهوم طراحی واکنش گرا در CSS می‌خونیم، طراحی واکنش گرا، به طراحی ای گفته میشه که می‌تونه محتوای درون وب سایت ما رو در هر دستگاهی به خوبی نمایش بده.

این موضوع رو در آینده بررسی می‌کنیم، اما فعلا برای آشنایی، به مثال زیر توجه کنین:

پایان ترم: یه سوال خیلی ساده!

سوال:

نتیجه گیری

تو این مقاله یاد گرفتیم که چطور می‌تونیم یک گالری تصاویر در CSS داشته باشیم.

همچنین با دو نوع گالری تصاویر فروشگاهی و هنری آشنا شدیم.

ناگفته نمونه که مطالب گفته شده تو این مقاله، بسیار محدوده و طراحی گالری ها، آمیزه ای نامحدود از علم طراحی رابط کاربری و برنامه نویسی تحت وبه که تنوع خیلی زیاده داره.

به هر حال، به پایان این فصل خیلی کوتاه و کاربردی می‌رسیم 🙂 امیدوارم که بهره کافی رو برده باشید.

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی‌