𝐈𝐓𝐂𝐎𝐃𝐄

:Navigation bar 🔥

HTML&CSS.

92 views19:21

navbar

88 views19:21

بسم الله الرحمن الرحيم والصلاة والسلام على اشرف المرسلين.

~~وداعاً border-radius : اكتشف خاصية corner-shape في CSS~~

لغة CSS في تطور مستمر واليوم موضوعنا عن خاصية جديدة في css وهي conrner-shape

خاصية corner-shape هي اللاعب الجديد في الساحة اليوم؛ فبعد سنوات طويلة كانت فيها زوايا صفحات الويب إما حادة أو مستديرة قليلاً، تكسر هذه الخاصية القواعد لتمنحك أنواعاً مختلفة من تأثيرات الزوايا الرائعة مثل الحواف المائلة، التجاويف، والمربعات المستديرة (squircles) دون الحاجة للفوتوشوب أو ملفات SVG كما كان متبعاً في السابق.

فإن خاصية corner-shape تأتي لتكمل المشهد؛ فبينما يحدد الريديس حجم الزاوية، تمنحك هذه الخاصية التحكم الكامل في شكلها الهندسي.

ما هي خاصية corner-shape؟

هي خاصية CSS جديدة (حالياً متاحة فقط في إصدار Chrome 139+ وليست مدعومة على نطاق واسع بعد، لذا لا تستخدمها في المواقع الرسمية حالياً) تتيح لك التحكم في شكل زوايا الصندوق، وليس فقط مدى استدارتها. وهي تعمل جنباً إلى جنب مع border-radius — فكر في border-radius على أنها تحدد حجم الزاوية، بينما تحدد corner-shape نمطها.

مثال سريع:

div {
  border-radius: 38px;
  corner-shape: scoop;
}

يمنحك هذا صندوقاً بزوايا مقعرة بدلاً من الزوايا المستديرة المعتادة.

لماذا يجب أن تهتم؟

١-خيارات تصميم أكثر : تجاوز المستطيلات والدوائر المملة. اجعل واجهة مستخدمك تبرز بزوايا مسننة، مائلة، أو بنمط squircle.

٢-وداعاً لحيَل الصور : افعل كل ذلك باستخدام CSS فقط — لا داعي لصور إضافية، ملفات SVG، أو وسوم (markup) غريبة.
٣-تنسيق متناسق : تتبع الحدود، الخلفيات، والظلال جميعها شكل الزاوية الجديد تلقائياً.

كيف تعمل هذه الخاصية؟

تستخدم corner-shape جنباً إلى جنب مع border-radius. تقبل هذه الخاصية من قيمة واحدة إلى أربع قيم، تماماً مثل border-radius ، ويمكنك المزج والتوفيق بين أشكال مختلفة لكل زاوية.

الأشكال المدعومة (الكلمات المفتاحية):

round (الافتراضي، تماماً مثل border-radius المعتاد).
bevel (زوايا مقطوعة بشكل مائل.
notch (زوايا حادة بقطع داخلي).
scoop (مقعرة، كأنها قضمة مأخوذة من الزاوية).
square (يزيل تأثير border-radius ويجعل الزاوية حادة).
squircle (مزيج انسيابي بين المربع والدائرة).
superellipse() (تتيح لك ضبط الانحناء بدقة باستخدام رقم).

div {
  border-radius: 38px;
  corner-shape: scoop; // خصائص أخرى
}

امثلة:

CSS

/* جميع الزوايا مائلة */
corner-shape: bevel;

/* الزاوية العلوية اليسرى والسفلية اليمنى مسننة، والباقي بنمط superellipse */
corner-shape: notch superellipse(0.6);

/* كل زاوية بشكل مختلف */
corner-shape: scoop superellipse(-1.6) superellipse(-2.2) round;
.

الترتيب مهم: تسير القيم باتجاه عقارب الساعة بدءاً من الزاوية العلوية اليسرى، تماماً مثل خاصية border-radius.

دعم المتصفحات

هذه الخاصية لا تزال تجريبية. في الوقت الحالي، يدعمها متصفح Chrome 139+ و متصفح Microsoft Edge فقط، وستحتاج إلى التحقق من التوافق قبل استخدامها في أي مشاريع هامة. لكنها أداة رائعة للنماذج الأولية (Prototypes)، التجارب، أو مجرد الاستمتاع باستكشاف ميزات CSS الجديدة.

باختصار

تتيح لك خاصية corner-shape اختيار نمط زواياك، وليس فقط مدى استدارتها.
تعمل مع border-radius لإنشاء أطنان من الأشكال الجديدة.
رائعة لتصاميم واجهة المستخدم العصرية والفريدة لا حاجة للصور أو ملفات SVG.
إذا كنت قد سئمت من نفس الزوايا القديمة المعتادة، جرب corner-shape (في متصفح مدعوم). إنه تغيير بسيط يمكن أن يجعل تصاميمك تبدو حيوية وممتعة.

جرب واخبرنا عن تجربتك بالتعليقات 👇

110 viewsedited 14:06