استایلدهی تصاویر
می آموزید که چگونه تصاویر را با استفاده از CSS استایل دهی کنید.[۱]
تصاویر گرد شده
از ویژگی border-radius
برای ساختن تصاویر گرد شده استفاده کنید:
مثالتصویر با گوشه گرد: |
مثالتصویر دایرهای: |
تصاویر کوچک
از ویژگی border
برای ساختن تصاویر کوچک استفاده کنید:
تصویر کوچک: | تصویر کوچک به عنوان لینک: |
تصاویر واکنش گرا
تصاویر واکنش گرا به صورت خودکار تنظیم میشوند تا با اندازه صفحه نمایش همخوانی داشته باشد.
اندازه مرورگر را تغییر دهید تا اثر آن را ببینید :
اگر میخواهید که تصویر کوچکتر شود، اما هرگز از اندازه اصلی خود بزرگتر نشود، کد زیر را اضافه کنید:
نکته: مطالب بیشتری را در مورد طراحی وب واکنش گرا در آموزش RWD در CSS ما بخوانید.
وسط چین کردن یک عکس
برای وسط چین کردن یک عکس، حاشیه های چپ و راست را روی auto
تنظیم کنید و آنها را به یک عنصر block
تبدیل کنید:
تصاویر/کارت های Polaroid (قطبی)
تصاویر شفاف
ویژگی opacity
میتواند مقداری بین ۰٫۰ – ۱٫۰ بگیرد. مقدار کمتر، شفافیت بیشتر:
متن تصویر
چگونه متن را درون تصویر موقعیت دهی کنیم:
مثال
فیلترهای تصاویر
ویژگی filter
در CSS جلوه های بصری (مانند کدر و اشباع (به انگلیسی: saturation)) به یک عنصر اضافه میکند.
نکته: ویژگی Filter در Internet Explorer یا Edge 12 پشتیبانی نمیشود.
تغییر رنگ تمامی تصاویر به سیاه و سفید (۱۰۰٪ خاکستری):
نکته: به مرجع Filter در CSS ما مراجعه کنید تا مطالب بیشتری را در مورد Filterها در CSS بیاموزید.
پوشش تصویر در هنگام Hover
ساخت یک پوشش تصویر در هنگام hover:
مثالمتن Fade in: |
مثالFade in درون یک جعبه: |
مثالSlide in (بالا): |
مثالSlide in (پایین): |
مثالSlide in (چپ): |
مثالSlide in (راست): |
قرینه کردن یک تصویر
نشانهگر ماوس را روی تصویر قرار دهید:
گالری تصاویر واکنش گرا
CSS میتواند برای ساخت گالری تصاویر نیز استفاده شود. این مثال از media queryها برای چینش دوباره تصاویر در صفحه نمایش های دارای اندازههای متفاوت استفاده میکند. اندازه پنجره مرورگر را تغییر دهید تا اثر آن را ببینید:
- تصاویر واکنش گرا
نکته: مطالب بیشتری را در مورد طراحی وب واکنش گرا در آموزش RWD در CSS ما بخوانید.
تصویر Modal (پیشرفته)
این یک مثال در مورد نحوه کار کردن CSS و JavaScript باهم است.
ابتدا، از CSS برای ساخت یک پنجره modal (دیالوگ باکس)، و پنهان کردن آن به صورت پیش فرض استفاده کنید.
سپس، از جاوا اسکریپت برای نمایش پنجره modal و نمایش تصویر درون modal، هنگام کلیک کاربر روی تصویر استفاده کنید:
منابع آموزشی