CSS Image Shapes
اشکال تصاویر (CSS Image Shapes)
CSS به شما امکان میدهد تا شکل تصاویر و نحوهی برش و نمایش آنها را کنترل کنید، بهخصوص وقتی میخواهید تصاویر به شکلهای غیرمستطیلی نمایش داده شوند. این ویژگیها به طراحی زیباتر و خلاقانهتر کمک میکنند.
—
مهمترین خصوصیات مرتبط با شکل تصاویر:
1. `border-radius`
* سادهترین راه برای گرد کردن گوشههای تصاویر و ایجاد شکلهای دایرهای یا بیضی.
مثال:
“`css
img {
border-radius: 50%; /* تصویر به شکل دایره نمایش داده میشود */
}
“`
2. `clip-path`
* این خاصیت به شما اجازه میدهد تصاویر را به شکلهای پیچیدهتر و سفارشی برش دهید.
* میتوانید از اشکال هندسی آماده مثل دایره، بیضی، چندضلعی و حتی مسیرهای SVG استفاده کنید.
مثال:
“`css
img {
clip-path: circle(50% at center); /* تصویر به شکل دایره در میآید */
}
“`
یا چندضلعی:
“`css
img {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* مثلث */
}
“`
3. `shape-outside`
* وقتی تصویر در کنار متن قرار دارد، این خاصیت تعیین میکند که متن چگونه دور شکل تصویر جریان پیدا کند.
* معمولا همراه با `float` استفاده میشود.
مثال:
“`css
img {
float: left;
shape-outside: circle(50%);
width: 200px;
height: 200px;
clip-path: circle(50%);
}
“`
—
جمعبندی
* با `border-radius`گوشهها را گرد کنید.
* با `clip-path` شکلهای پیچیدهتری بسازید.
* با `shape-outside` متن را به شکل دلخواه دور تصویر جریان دهید.
دیدگاهتان را بنویسید