آموزش گالری عکس در CSS

آموزش گالری عکس در CSS

گالری عکس در وب سایت می تواند کاربردهای زیادی داشته باشد، از جمله برای معرفی محصولات یا درج تصاویر از پرسنل شرکت و … می توان از یک آلبوم عکس ساده استفاده کرد. پس به شما پیشنهاد می کنیم، در این آموزش طراحی سایت با ما همراه باشید، چون علاوه بر ساخت گالری عکس، نکات مهمی در مورد وسط چین کردن عکس ها، ایجاد double border برای عکس ها و … بیان خواهیم کرد.

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

 

آموزش گالری عکس در CSS  آموزش گالری عکس در css آموزش گالری عکس در CSS gallery

آموزش گالری عکس در CSS

مرحله اول : 

در این مرحله شما باید ، فایل HTML خودتون رو بسازید ، برای اینکار NotePad ویندوز رو باز کنید ، یه فایل ایجاد کنید و اون فایل رو با پسوند html ذخیره کنید.

مرحله دوم : 

اگه ویرایشگر حرفه ای مثل DreamWaver یا Notepad++ دارید ، فایل Html تون رو داخلش باز کنید و گرنه از همون NotePad استفاده کنید.

مرحله سوم :

حالا کافیه کدهای زیر رو کپی کنید ، داخل صفحه Html خودتون و اون رو ذخیره کنید.

 

تاری / شفافیت (Opacity / Transparency) تصاویر CSS

ایجاد تصاویر شفاف با CSS آسان است.

خاصیت کدری CSS بخشی از توصیه های CSS3 است.

مثال ۱ – ایجاد یک تصویر نامحسوس

CSS3 برای ایجاد یک تصویر نامحسوس و شفاف از ویژگی opacity استفاده میکند. در مثال زیر چگونگی ایجاد یک تصویر نامحسوس با استفاده از CSS را میتوانید ببینید:

مرورگرهای IE9، فایرفاکس، کروم، اپرا و سافاری از خاصیت opacity برای شفافیت استفاده میکنند. این property میتواند مقادیر بین ۰٫۰ تا ۱٫۰ را بپذیرد. مقدار پایین تر به این خاصیت باعث شفافیت بیشتر تصویر میگردد.

مثال ۲ – شفاف سازی تصویر – اثرات خاصیت Hover

در مثال زیر، با قرار گرفتن ماوس روی تصاویر ایجاد شده ، میزان شفافیت آنها مطابق کد نوشته شده تغییر میکند :

در این مثال، در ابتدا تصاویر گالری با شفافیت ۰٫۳ نشان داده میشوند و تا حدی کدر هستند، اما طبق کد CSS ی که برای آن نوشته شده است، با قرار گرفتن ماوس روی تصاویر آنها با وضوح کامل (شفافیت ۱٫۰) به نمایش در می آیند و با کنار رفتن ماوس دوباره با شفافیت قبلی برمیگردند

اسپریت های تصاویر در CSS

اسپریت تصویر مجموعه ای از تصاویر قرار داده شده در یک تصویر تنها است.

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

در مثال زیر به جای استفاده از سه تصویر جداگانه از اسپریتی با سه بخش مختلف استفاده شده است که با استفاده از کد CSS فقط بخشی از تصویر که مورد نیاز است نمایش داده شده است:

 

آموزش CSS آموزش طراحی وب

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