آموزش CSSآموزش طراحی سایت

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

ساخت گالری تصویر با استفاده از CSS

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

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

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

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

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

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

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

کد HTML گالری

کد 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 بهره ببرن.

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

کد HTML گالری تصاویر هنری

کد CSS گالری تصاویر هنری

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

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

<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

 

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

سوال:

با توجه به مطالب گفته شده تو این مقاله، کاربرد گالری هنری چیه؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

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

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

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

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

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

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

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر