مولد الحواف الدائرية الإبداعية
مولد حواف دائرية إبداعي مجاني عبر الإنترنت. اسحب المقابض الثمانية أو اختر شكلًا جاهزًا لإنشاء أشكال CSS عضوية ونسخ الكود فورًا.
ماذا تعني صيغة border-radius ذات القيم الثماني؟
في صيغة border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 تكون القيم قبل الخط المائل هي الأنصاف الأفقية (أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار) وما بعده هي الأنصاف الرأسية. استخدام قيم مختلفة في كل اتجاه هو ما يخلق الأشكال العضوية.
كيف أستخدم كود CSS الناتج؟
انسخ سطر border-radius والصقه في أي قاعدة CSS للعنصر المطلوب تشكيله، مثل .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. يعمل في CSS العادي وSass وقيم Tailwind المخصصة والأنماط المضمنة.
أين تُستخدم أشكال الـ blob؟
تنتشر أشكال الـ blob في رسومات الواجهة الرئيسية، والصور الرمزية، وصور الملفات الشخصية، وبطاقات المزايا، والأزرار، والخلفيات الزخرفية في تصميم الويب والتطبيقات الحديثة.
هل تعمل الحواف الدائرية في كل المتصفحات؟
نعم. تتيح جميع المتصفحات الحديثة خاصية border-radius، بما في ذلك Chrome وFirefox وSafari وEdge ومتصفحات الهواتف، دون الحاجة إلى أي بادئات.
هل يمكنني تحريك شكل الـ blob؟
نعم. border-radius خاصية قابلة للتحريك، لذا يتيح انتقال CSS التحول بسلاسة بين الأشكال، مثل .blob { transition: border-radius .8s ease; }.
ما الفرق بين صيغة القيم الأربع والقيم الثماني؟
صيغة القيم الأربع تجعل النصف الأفقي والرأسي لكل زاوية متساويين، وهو ما يكفي للأشكال الكبسولية أو الدوائر. أما صيغة القيم الثماني فتفصل بين الأنصاف الأفقية والرأسية، وهذا ما يتيح الأشكال غير المتماثلة العضوية.
كيف أنشئ دائرة مثالية؟
اجعل القيم الثماني 50% في عنصر مربّع، أو استخدم ببساطة border-radius: 50%. يمكنك أيضًا البدء من شكل جاهز قريب من الدائرة وتعديله.
هل تُرفع بياناتي إلى أي مكان؟
لا. يعمل المولد بالكامل داخل متصفحك باستخدام CSS وJavaScript فقط. لا يُرسل أي شيء تسحبه أو تكتبه أو تنسخه إلى أي خادم.
هل يمكن استخدامه على عناصر غير مربعة؟
نعم، لكن الأنصاف المئوية نسبية إلى أبعاد العنصر، لذا سيُنتج المستطيل زوايا بيضاوية ومظهرًا مختلفًا عن المعاينة المربعة. استخدم القيم الناتجة كنقطة بداية ثم عدّلها.
كيفية استخدام مولد الحواف الدائرية الإبداعية
يعطي border-radius ذات القيم الثماني أشكالًا عضوية بزوايا بيضاوية لا يبلغها المستطيل المدوّر العادي. انحت الشكل بالمقابض وانسخ CSS الجاهز — كل شيء يُعرض مباشرة في متصفحك.
- اسحب أي مقبض من المقابض الثمانية على حواف الشكل — فمقابض الحافة العلوية والسفلية تضبط الأنصاف الأفقية، ومقابض الجانبين الأيمن والأيسر تضبط الأنصاف الرأسية.
- انقر أحد مربعات الأشكال الجاهزة الستة لتبدأ من شكل مصمم، ثم دقّق القيم في حقول «الأنصاف الأفقية» و«الأنصاف الرأسية» (قيمة لكل زاوية، من 0 إلى 100%).
- اضغط «عشوائي» لتوليد شكل عضوي جديد بنقرة واحدة، أو «إعادة تعيين» للعودة إلى الشكل والألوان الافتراضية.
- اختر لون الشكل ولون الخلفية لمعاينة الشكل على لوحة ألوانك المستهدفة — كلاهما يتحدث فورًا.
- اضغط «نسخ CSS» لالتقاط تعريف border-radius المعروض مباشرة في الشريط السفلي وألصقه على أي عنصر.
طبّق الشيفرة على عنصر مربع مع overflow: hidden للحصول على مظهر الشكل العضوي الكلاسيكي؛ النسب المئوية تحافظ على انسيابية المنحني في أي حجم، والشرطة المائلة في الصياغة تفصل الأنصاف الأفقية عن الرأسية.
أدوات ذات صلة
- مولد Border Radius CSS مولد border-radius CSS مرئي. اضبط كل زاوية بشكل مستقل مع معاينة فورية وانسخ كود CSS مباشرة.
- مولد تدرجات CSS أنشئ تدرجات CSS مذهلة بصريًا. أنشئ تدرجات خطية وشعاعية ومخروطية مع نقاط ألوان متعددة وزوايا ومواضع مخصصة. انسخ كود CSS الجاهز للإنتاج فورًا.
- مولد ظل الصندوق CSS مولد ظل الصندوق CSS مجاني عبر الإنترنت. أنشئ ظلالاً جميلة بصريًا مع إزاحة وضبابية وانتشار ولون وظل داخلي قابلة للتعديل. معاينة مباشرة ونسخ فوري للكود.
- مولد لوحة الألوان أنشئ لوحات ألوان جميلة ومتناسقة فوراً مع مولدنا المجاني عبر الإنترنت. يدعم أوضاع أحادي اللون، المتشابه، المكمل، الثلاثي، المنقسم المكمل، والرباعي. اضبط الألوان باستخدام شرائح HSL، أقفل المفضلة، وصدّر كـ CSS أو Tailwind أو JSON أو SVG. 100% قائم على المتصفح، بياناتك لا تغادر جهازك أبداً.
- محول الألوان محول ألوان مجاني عبر الإنترنت. تحويل فوري لتنسيقات HEX و RGB و HSL و HSV مع منتقي بصري. 100% خاص، يعمل في متصفحك.
- مولد التخفيف CSS مولد التخفيف في CSS مجاني عبر الإنترنت. اسحب نقطتي تحكم cubic-bezier على منحنى تفاعلي، واختر من بين 18 نمطًا جاهزًا، وشاهد معاينة بحركة كرة متكررة، وانسخ دالة التوقيت فورًا.
- مولد ظل النص CSS مولد text-shadow في CSS مجاني عبر الإنترنت. رصّ طبقات ظل متعددة مع الإزاحة والضبابية واللون والشفافية، جرّب أنماطًا جاهزة مثل النيون وثلاثي الأبعاد والريترو، وانسخ كود CSS فورًا.
- مولد clip-path في CSS مولد clip-path في CSS مجاني عبر الإنترنت. صمم أشكال polygon وcircle وellipse وinset بنقاط قابلة للسحب، مع معاينة مباشرة ونسخ كود CSS بنقرة واحدة.