🌐 سایت Shape.so

🖥 خیلی سخته بخوایم خودمون عکس طراحی بکنیم مخصوصا اگر توی عکس آدمک باشه یا اجسامی که رسمشون سخته، آیکون ها هم که دیگه هیچی، انقد براشون سرچ میکنیم که گوگل فکر میکنه رباتیم 😂😂

📣 این سایت دیگه این مشکل رو براتون رفع کرده، میتونید با سرچ و تنظیم فیلتر ، شکل و اندازه رو مشخص کنید!

#shape #images
☕️ @CodeExplore

پراپرتی shape-outside توی css چیه و چیکار میکنه ؟

🔹پراپرتی shape-outside در CSS به شما اجازه می‌دهد تا شکل خارجی یک عنصر را به شکلی دلخواه تغییر دهید. این کار با استفاده از یک شکل هندسی یا تصویر به عنوان ماسک انجام می‌شود.

🔸کاربردها:
1️⃣ایجاد دکمه‌های با اشکال غیرمعمول
2️⃣ساخت تصاویر و بنرهای جذاب
3️⃣طراحی رابط کاربری منحصر به فرد

▪️نحوه استفاده:
✅ تعریف شکل:
می‌توانید از اشکال هندسی پایه مانند دایره، مربع، مستطیل و ... استفاده کنید و یا می‌توانید از تصاویر SVG به عنوان ماسک استفاده کنید.
✅تنظیم کردن پراپرتی برای المنت :
مقدار این پراپرتی می‌تواند نام شکل هندسی یا آدرس URL تصویر SVG باشد.
می‌توانید از توابع مختلف برای تنظیم دقیق شکل و موقعیت ماسک استفاده کنید.
مثال:

.button {
  shape-outside: circle(50%);
  width: 100px;
  height: 100px;
  background-color: red;
}

این کد یک دکمه دایره‌ای با شعاع 50 پیکسل ایجاد می‌کند.

▪️نکات:
1️⃣پراپرتی shape-outside در مرورگرهای مختلف به طور کامل پشتیبانی نمی‌شود.
2️⃣استفاده از تصاویر SVG به عنوان ماسک می‌تواند پیچیده‌تر باشد.

#css #shape_outside
☕️ @CodeExplore