ایجاد گالری تصاویر در CSS

Build Image Gallery with HTML & CSS

0 762

گالری تصاویر

گالری ها (در انگلیسی: Image Gallery) در دنیای وب مجموعه ای از تصاویر هستند که روی یک وب سایت قرار گرفته اند. کد زیر مثالی از همین گالری تصاویر است:

مشاهده ی خروجی در JSBin

این مثال تصاویر را به صورت بسیار ساده نمایش می دهد. ما می توانیم یک قدم پیش برویم و آن را responsive یا واکنش گرا طراحی کنیم:

مشاهده ی خروجی در JSBin

ما در این کد از media query ها استفاده کرده ایم تا این گالری را واکنش گرا کنیم. برای صفحاتی با سایز 700 پیکسل و بیشتر، چهار تصویر را کنار هم (در یک خط) نمایش می دهد. برای صفحاتی با سایز کوچک تر تصاویر را به صورت دو به دو کنار هم نمایش می دهد. در آخر اگر عرض صفحه 500 پیکسل یا کمتر باشد صفحه آنقدر کوچک می شود که تصاویر به صورت عمودی زیر هم قرار می گیرند.

اما آیا این حد از سادگی در دنیای مدرن امروزی قابل قبول است؟

Slideshow چیست؟

Slideshow ها نوعی image gallery هستند که به جای نمایش تمام تصاویر، آن ها را دانه به دانه و به نوبت نشان می دهند. به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

همانطور که میبینید این کدها شامل کدهای جاوا اسکریپت نیز می باشند و از موارد قبل بسیار پیچیده تر هستند! در واقع آموزش آنها چند جلسه ای طول می کشد و از موضوع CSS نیز خارج می شود بنابراین ما زیاد روی آن ها مانور نمی دهیم و آشنایی با این موارد را به بعد از اتمام دوره های جاوا اسکریپت، HTML و CSS واگذار می کنیم. در واقع این پیشرفته شدن تا بی نهایت ادامه پیدا می کند و انواع خلاقیت ها را می توان در آن پیاده سازی کرد.

به مثال زیر نگاه کنید:

مشاهده ی خروجی در JSBin

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

ترتیبی که روکسو برای یادگیری مطالب سری صفر تا صد CSS به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle