سلام دوستان! امروز می‌خوایم درباره یکی از موضوعات جالب و کاربردی در دنیای وب صحبت کنیم: استایل دهی به تصاویر با استفاده از CSS. حالا فرض کنید می‌خواهید تصاویری که در وب‌سایتتون قرار داره زیباتر و جذاب‌تر کنید. اولین چیزی که به ذهن میاد استفاده از CSS هستش تا این کار رو به سادگی انجام بدهید.
CSS به شما اجازه میده تا انواع مختلف استایل‌ها مثل حاشیه، سایه، شفافیت و حتی فیلترهای تصویری رو به تصاویر اعمال کنید. استفاده از این موارد نه تنها می‌تونه زیبایی ظاهری سایت رو افزایش بده بلکه می‌تونه به تجربه کاربری بهتری هم منجر بشه. مثلا می‌تونید با اضافه کردن فیلترها به تصاویر، یه تم خاص به صفحاتتون بدهید.
یه چیز دیگه هم اینکه اضافه کردن استایل‌ها به تصاویر باعث میشه که صفحات شما توی مرورگرهای مدرن بهتر و جذاب‌تر به نظر برسند. مثلا اضافه کردن سایه به تصاویر می‌تونه به اون‌ها عمق بدهد و باعث شه که تصاویر طبیعی‌تر و زیباتر به نظر برسند.
حالا بیاید چند مثال ببینیم از چگونگی استفاده از CSS برای زیباتر کردن تصاویر. اینجا با استفاده از CSS ساده می‌تونیم سایه، حاشیه و شفافیت رو به تصاویرمون اضافه کنیم و اینجوری استایل‌های چشم‌نواز درست کنیم.
نمونه کد CSS برای تصاویر
<style>
img {
border: 5px solid #f3f3f3;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.4);
opacity: 0.9;
transition: all 0.3s ease;
}
img:hover {
opacity: 1;
}
</style>
<img src="image.jpg" alt="Sample Image">توضیحات خط به خط کد:
img: دارد برای تمامی تصاویر استایل تعیین می‌کند.برای تصاویر، حاشیه‌ای از نوع
solid و به ضخامت 5px با رنگ #f3f3f3 در نظر می‌گیرد.box-shadow: به تصویر سایه‌ای با مختصات داده شده اضافه می‌کند.opacity: شفافیت تصویر را به 0.9 تنظیم می‌کند که یعنی تصویر کمی شفاف خواهد بود.transition: برای تمامی ویژگی‌ها یک تغییر حالت با زمان‌بندی 0.3s تعیین می‌کند که بیشتر برای انیمیشن در هنگام hover استفاده می‌شود.بخش
img:hover: وقتی که کاربر روی تصویر می‌آید، شفافیت تصویر opacity به 1 تغییر می‌کند.