۱۱
تیر

ساخت گالری تصاویر در CSS

دسته‌بندی‌ها :

جزئیات
نوع مطلبآموزشی

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش چگونگی ایجاد گالری تصاویر در css بپردازیم. شاید شما در برخی از سایت ها مشاهده کرده باشید ، که یک گالری عمودی یا افقی تصاویر با کیفیت در سایت قرار دارد. که با اشاره ماوس یا در یک بازه ی زمانی نوار تصاویر به آرامی حرکت کرده و تصاویر دیگر را ظاهر می کند. این کار قبلا با جاوا اسکریپت میسر بود. اما اکنون با استفاده از کدهای css نیز می توان این قابلیت را در سایت پیاده سازی کرد.

در آموزشهای قبلی css در مورد مباحث مدیریت متن عناصر HTML در CSS و حالات نمایش عناصر html در css و همچنین ایجاد نوار منو navigation در css آموزشهایی را در پی وی لرن ارائه دادیم.

همچنین در مورد مدیریت فضاهای بین عناصر html نیز پست های آموزشی کار با فضای بین عناصر html در css ، مدیریت فضای خالی داخل عناصر html در css را نیز ارائه کردیم.

در ادامه ی این پست آموزشی به آموزش چگونگی ایجاد گالری تصاویر در css می پردازیم.

responsive – ایجاد گالری تصاویر در css

چگونگی ایجاد گالری تصاویر در css

در این مثال css کدهای css برای ایجاد یک گالری تصاویر ،در داخل کد html صفحه وب ، که قابل پخش بر روی نمایشگر کامپیوتر و تلفن همراه است را قرار داده ایم:

مثال :

<html>
<head>
<style>
div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="fjords.jpg">
    <img src="5terre.jpg" alt="Cinque Terre" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="forest.jpg">
    <img src="forest.jpg" alt="Forest" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="lights.jpg">
    <img src="lights.jpg" alt="Northern Lights" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="mountains.jpg">
    <img src="mountains.jpg" alt="Mountains" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

<html>

<head>

<style>

div.gallery {

margin: 5px;

border: 1px solid #ccc;

float: left;

width: 180px;

}

div.gallery:hover {

border: 1px solid #777;

}

div.gallery img {

width: 100%;

height: auto;

}

div.desc {

padding: 15px;

text-align: center;

}

</style>

</head>

<body>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</body>

</html>

در کد بالا گالری ایجاد شده دارای قابلیت responsive می باشد. این قابلیت باعث می شود که گالری تصاویر ایجاد شده بر روی انواع نمایشگرها (کامپیوتر ، تب لت ، موبایل و …) بصورت خودکار تنظیم شود.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

ساخت گالری تصاویر در CSS

مقدمه

چگونگی ایجاد گالری تصاویر در css

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ