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

ایجاد گالری تصویر CSS به طرح صاف تصاویر در وب سایت ها اشاره دارد.

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

• گالری عکس HTML به این معنی است که شما برای گالری فقط با چندین عنصر پایه ایجاد می کنید: <div> و <img> و <a>.
• شما با استفاده از ویژگی های CSS سبک های مختلفی را برای اصلاح نحوه نمایش گالری های تصویر در وب سایت خود اعمال می کنید.

ایجاد یک گالری عکس

گالری CSS فوق دارای فاصله برابر ، اندازه های ثابت و فضای اضافی برای توصیف تصاویر است.

div.gallery {
    margin: 10px;
    border: 2px solid black;
    float: right;
    width: 200px;
}

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

div.desc {
   padding: 15px;
   text-align: center;
}

در اینجا عناصر اصلی HTML که برای ایجاد گالری تصاویر استفاده شده است:

نکته: عناصر <div> ظروف جعبه ای شکل را هم برای تصویر و هم برای توضیح جدا می کنند.

ویژگی های یک ظاهر طراحی شده برای گالری ها

مراحل زیر توضیح می دهد که چگونه خصوصیات گالری های تصویر به سبک CSS:

1. ویژگی حاشیه را برای نشان دادن فاصله بین جعبه های تصویر تنظیم کنید.
2. یک حاشیه اضافه کنید تا قابهای تصویر را قاب کنید.
3. برای تنظیم تراز بندی عناصر از float استفاده کنید.
4. برای نشان دادن اندازه جعبه های ظرف ، ارتفاع را اضافه کنید.
5. سپس ، می توانید خصوصیات تصویر جداگانه مانند تعریف ابعاد اندازه با عرض را اضافه کنید.
6. مقدار خودکار اختصاص داده شده به ارتفاع به شما امکان می دهد تصاویر نسبت طبیعی خود را حفظ کنند.
7. جعبه متن را برای توضیحات تصویر طراحی کنید. برای نشان دادن فاصله بین تصاویر و متن ، padding را مشخص کنید.
8. متن را در موقعیت دلخواه خود به کادر متن اختصاص دهید.

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

• با استفاده از JavaScript می توانید گالری های تصویر پیشرفته تری ایجاد کنید. به عنوان مثال ، می توانید Onclick را تنظیم کنید تا تصاویر در اندازه کامل آن ها نشان داده شوند.
• یک جایگزین برای این گالری تصاویر HTML و CSS ، چرخ فلک Bootstrap (یا نمایش اسلاید تصاویر) است.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.