استایل دهی تصاویر (Image Styling)
در «استایل دهی تصاویر» یاد می گیریم تصویر را زیباتر کنیم. با «گوشه گرد»، «دایره»، «بندانگشتی»، و «گالری واکنش گرا». همه با CSS ساده و قابل فهم.
گوشه دار و دایره ای
ویژگی «border-radius» گوشه ها را گرد می کند. درصد 50٪ تصویر را دایره می کند.
img {\n border-radius: 8px;\n}\nimg {\n border-radius: 50%;\n}\nتصاویر بندانگشتی
برای بندانگشتی از «border»، «padding»، و «width» استفاده کن.
img {\n border: 1px solid #ddd;\n border-radius: 4px;\n padding: 5px;\n width: 150px;\n}\nimg {\n border: 1px solid #ddd;\n border-radius: 4px;\n padding: 5px;\n width: 150px;\n}\n\nimg:hover {\n box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);\n}\nتصاویر واکنش گرا
برای واکنش گرا از «max-width:100%» و «height:auto» کمک بگیر.
img {\n max-width: 100%;\n height: auto;\n}\nکارت (Polaroid) ساده
با «box-shadow» و «پس زمینه سفید»، کارت عکس بساز.
div.polaroid {\n width: 80%;\n background-color: white;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n}\n\nimg {\n width: 100%;\n}\n\ndiv.container {\n text-align: center;\n padding: 10px 20px;\n}\nشفافیت تصویر (Opacity)
«Opacity» شفافیت را از 0 تا 1 تعیین می کند. 0 نامرئی است.
img {\n opacity: 0.5;\n}\nمتن روی تصویر
با «position:relative» روی ظرف و «absolute» روی متن، جای متن را مشخص کن.
<div style="position:relative; text-align:center;">\n <img src="img_5terre_wide.jpg" alt="Cinque Terre" style="width:100%; height:auto; opacity:0.3;">\n <div style="position:absolute; top:8px; left:16px; font-size:18px;">Top Left</div>\n <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:18px;">Centered</div>\n</div>\nاورلی روی تصویر با Hover
اورلی (Overlay) یعنی لایه رویی. با «opacity» و «transition» محو ظاهرش کن.
.containerfade {\n position: relative;\n width: 200px;\n}\n\n.imagefade {\n display: block;\n width: 100%;\n height: auto;\n}\n\n.overlayfade {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: rgba(0, 0, 0, 0.6);\n overflow: hidden;\n width: 100%;\n height: 0;\n transition: height 0.4s;\n}\n\n.containerfade:hover .overlayfade {\n height: 100%;\n}\n\n.textfade {\n color: white;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\nبرگشت تصویر (Flip)
با «transform: scaleX(-1)» تصویر روی محور افقی برمی گردد.
img:hover {\n transform: scaleX(-1);\n}\nگالری واکنش گرا
با Media Query در موبایل ستون ها را کمتر کن تا مرتب بماند.
@media only screen and (max-width: 768px) {\n div.gallery-item {\n width: calc(50% - 20px);\n }\n}\n\n@media only screen and (max-width: 480px) {\n div.gallery-item {\n width: calc(100% - 20px);\n }\n}\nمراحل تمرین سریع
- یک تصویر بگذار و گوشه ها را گرد کن.
- بندانگشتی با حاشیه و سایه بساز.
- واکنش گرا کن تا در موبایل درست شود.
- متن را با موقعیت دهی روی عکس بگذار.
- اورلی و افکت محو شدن اضافه کن.
نکته: همیشه برای تصاویر، alt توصیفی بنویس. سئو بهتر می شود.
جمع بندی سریع
- border-radius برای گرد و دایره است.
- max-width و height:auto واکنش گرا می کنند.
- opacity شفافیت را کنترل می کند.
- position متن را روی تصویر می چیند.
- overlay با transition حرفه ای می شود.