اشکال تصویر در CSS (Image Shapes)
در این راهنما یاد می گیرید چگونه با «اشکال تصویر (Image Shapes)» در CSS، تصاویر را به دایره، بیضی و چندضلعی ببُرید و حتی جریان متن را پیرامون شکل کنترل کنید.
clip-path و تابع circle()
ویژگی clip-path عنصر را به یک شکل پایه برش می دهد. با تابع circle() می توان شعاع و موقعیت دایره را تعیین کرد.
نمونه برش تصویر به دایره با شعاع 50٪:
img { clip-path: circle(50%); }می توانید مرکز دایره را هم مشخص کنید؛ مقدار می تواند طول، درصد یا واژه هایی مانند left، right، top و bottom باشد. نمونه قرار دادن مرکز روی راست:
img { clip-path: circle(50% at right); }shape-outside و circle()
با shape-outside شکل پیچش متن کنار عنصر را تعریف می کنیم. در مثال زیر تصویر به دایره 40٪ بریده می شود و متن با دایره 45٪ پیچیده می شود:
img { float: left; clip-path: circle(40%); shape-outside: circle(45%); }نکته: برای نتیجه بهتر، تصویر را درون ظرفی با عرض کافی قرار دهید و سپس مرکزچین کنید.
clip-path و تابع ellipse()
تابع ellipse() بیضی را با دو شعاع X و Y تعریف می کند.
برش تصویر به بیضی با شعاع X برابر 50٪ و Y برابر 35٪:
img { clip-path: ellipse(50% 35%); }همچنین می توان مرکز بیضی را مشخص کرد؛ مثالِ قرار دادن مرکز روی راست:
img { clip-path: ellipse(50% 35% at right); }shape-outside و ellipse()
در این حالت تصویر با بیضی 40٪×50٪ بریده می شود و شکل پیچش متن 45٪×50٪ است:
img { float: left; clip-path: ellipse(40% 50%); shape-outside: ellipse(45% 50%); }تابع polygon()
تابع polygon() چندضلعی را با نقاط جفت مختصات (X,Y) تعریف می کند. این تابع در clip-path و shape-outside استفاده می شود.
نمونه برش تصویر به شکل لوزی:
img { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }اشکال تصویر: جمع بندی و ادامه مسیر
اکنون می توانید با «اشکال تصویر» جلوه های حرفه ای بسازید. برای کنترل جلوه های بصری بیشتر به صفحه فیلترهای تصویر سر بزنید. همچنین بخش استایل دهی تصویر ایده های بیشتری ارائه می کند.