مقدمه
تصاویر بخش مهمی از طراحی وب هستند و با استفاده از CSS میتوان اندازه، موقعیت و افکتهای آنها را کنترل کرد. درک نحوه استایلدهی تصاویر باعث ایجاد طراحی زیبا و حرفهای میشود. برای یادگیری کامل CSS و طراحی واکنشگرا پیشنهاد میکنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.
توضیح مفهومی استایل تصاویر
CSS امکانات گستردهای برای مدیریت تصاویر ارائه میدهد، از جمله تغییر اندازه، ترازبندی، گرد کردن گوشهها و اعمال افکتهای مختلف.
- width و height → تعیین اندازه تصویر
- border-radius → گرد کردن گوشهها
- object-fit → نحوه جایگیری تصویر در کانتینر
- box-shadow → ایجاد سایه برای تصویر
- filter → اعمال افکتهای بصری مانند grayscale و blur
مثال عملی با کد
تغییر اندازه تصویر:
img {
width: 100%;
height: auto;
}گرد کردن گوشهها:
.avatar {
border-radius: 50%;
}قرارگیری تصویر با object-fit:
.cover {
width: 300px;
height: 200px;
object-fit: cover;
}افکت سایه و فیلتر:
.image-box {
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
filter: grayscale(50%);
}نکات مهم و توضیحات تکمیلی
- استفاده از object-fit برای حفظ تناسب تصویر در کانتینر اهمیت دارد.
- گرد کردن گوشهها و سایه باعث طراحی حرفهایتر میشود.
- افکتهای CSS مانند filter و box-shadow به زیبایی بصری کمک میکنند.
- در طراحی Responsive حتماً اندازه تصاویر را با واحدهای نسبی تنظیم کنید.
ادامه آموزش CSS
برای یادگیری کامل طراحی لیستها، عناصر ساختاری و مدیریت محتوای صفحات وب، ادامه مسیر یادگیری را در دوره جامع دنبال کنید: ادامه یادگیری در دوره CSS.
آموزش قبلی: آموزش کار با لینک ها در CSS
آموزش بعدی: آموزش کار با لیست ها در CSS
دیدگاه و پرسش