استایل دهی تصویر با CSS (CSS Image Styling)
در این راهنما با «استایل دهی تصویر با CSS» آشنا می شوید؛ از گردکردن گوشه ها تا تصاویر ریسپانسیو، کارت های پولاروید، شفافیت، پوشش متنی، افکت های هاور، برعکس کردن تصویر و گالری های واکنش گرا.
گردکردن تصاویر با border-radius
با ویژگی «بردر-ریدیوس (border-radius)» می توانید گوشه های تصویر را گرد کنید یا آن را کاملاً دایره ای نمایش دهید.
نمونه: گوشه های گرد
img { border-radius: 8px; }نمونه: تصویر دایره ای
img { border-radius: 50%; }نکته: برای شکل دهی پیشرفته به تصاویر (مانند دایره، بیضی یا چندضلعی) می توانید به فصل «شکل های تصویر» مراجعه کنید.
ساخت تصویر بندانگشتی (Thumbnail)
با «بردر (border)»، «بردر-ریدیوس (border-radius)»، «پدینگ (padding)» و «عرض ثابت» یک بندانگشتی تمیز بسازید. همچنین با هاور، سایه اضافه کنید.
img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; width: 150px; }
img:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); }تصاویر ریسپانسیو
برای واکنش گرا شدن تصویر، اجازه دهید عرض تصویر از ظرف خود تجاوز نکند و نسبت تصویر حفظ شود.
img { max-width: 100%; height: auto; }کارت های پولاروید
با پس زمینه سفید و سایه، قاب پولاروید بسازید و عنوان را در یک کانتینر زیر تصویر قرار دهید.
div.polaroid { width: 80%; background-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
img { width: 100%; }
div.container { text-align: center; padding: 10px 20px; }شفافیت تصویر با opacity
ویژگی «اپسیتی (opacity)» مقدار شفافیت را از 0.0 تا 1.0 تعیین می کند؛ 0.0 کاملاً نامرئی و 1.0 کاملاً قابل مشاهده است.
img { opacity: 0.5; }متن روی تصویر
برای قرار دادن متن در گوشه ها یا مرکز تصویر، والد را «نسبی (position:relative)» و متن را «مطلق (position:absolute)» تنظیم کنید. سپس با top/right/bottom/left یا transform، جای متن را کنترل کنید.
اُورلی (Overlay) روی هاور
می توانید با هاور، متن یا لایه ای نیمه شفاف را محو شونده نمایش دهید، یا با اسلاید از بالا/پایین/چپ/راست ظاهر کنید. برای هماهنگی حرکت و شفافیت از «ترنزیشن (transition)» کمک بگیرید. درباره افکت ها در ترنزیشن های CSS بخوانید.
برعکس کردن تصویر (Flip)
با «ترنسفورم (transform)» می توانید تصویر را در محور افقی معکوس کنید.
img:hover { transform: scaleX(-1); }گالری تصویر ریسپانسیو
با «مدیا کوئری (media query)» چیدمان کارت های گالری را در اندازه های مختلف صفحه تغییر دهید.
@media only screen and (max-width: 768px) { div.gallery-item { width: calc(50% - 20px); } }
@media only screen and (max-width: 480px) { div.gallery-item { width: calc(100% - 20px); } }نکته: برای توضیح تعاملی روی تصاویر، مقاله راهنما/تولتیپ CSS را ببینید. همچنین برای زمان بندی افکت ها از ترنزیشن ها کمک بگیرید.