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