CSS: ميزات مثيرة للاهتمام لنصف قطر الحدود

ما الذي يمكن عمله مع خاصية border-radius CSS؟ يقول مؤلف المادة ، التي ننشر ترجمتها ، أنه أكثر مما يبدو للوهلة الأولى. على وجه الخصوص ، نحن نتحدث عن حقيقة أن زوايا العناصر التي تحيط بها هذه الخاصية يمكن أن يكون لها شكل مثير للغاية.


نقترح التحدث عن تعقيدات استخدام border-radius .

الخصائص القديمة وتصميم مواقع الإنترنت الحديثة

هذا العام ، في مؤتمر Frontend في زيوريخ ، قدمت راشيل أندرو عرضًا تقديميًا حول إمكانيات تقنية CSS Grid. في نهاية العرض ، قالت شيئًا عن خصائص CSS القديمة وكلماتها لفتت انتباهي. وهي تبدو كالتالي: "تم عمل الصورة بشكل دائري فقط باستخدام خاصية border-radius المدعومة جيدًا. تذكر أن CSS القديمة لا تزال موجودة ويمكن أن تكون مفيدة. لا يتعين عليك دائمًا استخدام شيء جديد تمامًا لإنشاء أي تأثيرات ".

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

إتقان نصف القطر الحدودي

meaning معنى واحد

لنبدأ بالأساسيات. آمل ألا تشعر بالملل مع هذا المثال. قد تكون على دراية بـ CSS ، وخاصية border-radius أيضًا. لقد كان موجودًا لبعض الوقت ، ويستخدمونه بشكل أساسي للإشارة إلى معنى واحد. يبدو أن هذا: border-radius: 1em . ربما كانت هذه واحدة من أكثر الميزات التي تحدثت عن CSS3 في عام 2010 ، عندما كان css3please.com هو أفضل صديق للمصممين.

عند استخدام قيمة واحدة border-radius يتم تقريب زوايا العنصر وفقًا لهذه القيمة.


تقريب جميع زوايا المربع إلى قيمة نصف قطر حد واحدة

كما ترى من المثال أعلاه ، يمكنك تعيين قيم ثابتة ليس فقط عن طريق تحديد وحدات القياس بعد الأرقام ، مثل px أو rem أو em ، ولكن أيضًا علامة النسبة المئوية. يستخدم هذا عادةً لإنشاء دوائر مربعة عند تعيين border-radius على 50٪. تستند قيمة النسبة المئوية إلى عرض العنصر وارتفاعه. لذلك ، عند تطبيقه على المستطيلات ، لن تكون الزوايا الناتجة متناظرة. فيما يلي مثال يوضح الفرق بين border-radius: 110px border-radius: 30% تطبيق خصائص border-radius: 30% على مستطيل.


تقريب زوايا المستطيل

انتبه إلى حقيقة أن زوايا المستطيل الأيمن غير متناظرة وتذكر ذلك. سيكون مفيدا لنا بعد ذلك بقليل.

▍ أربع قيم منفصلة

عند استخدام أكثر من قيمة border-radius ، يمكنك ضبط الإعدادات لكل زاوية ، بدءًا من أعلى اليسار وتتحرك في اتجاه عقارب الساعة. هنا ، مرة أخرى ، يمكنك استخدام قيم النسبة المئوية. يمكن أيضًا مزجها مع القيم الثابتة.


تحديد المعلمات للأركان الأربعة للعنصر

values ​​ثماني قيم مفصولة بخط مائل

أعتقد أن الكثير منكم قد جرب بالفعل كل ما تحدثنا عنه أعلاه. حان الوقت لبعض التجارب المثيرة للاهتمام حقًا. ماذا يحدث إذا تم فصل القيم بشرطة مائلة وتم تحديد ما يصل إلى ثمانية؟ أولاً ، ألق نظرة على المواصفات . يخبرنا أنه إذا تم إعطاء القيم قبل وبعد الخط المائل ، فإن القيم قبل الخط المائل تحدد نصف القطر الأفقي ، والقيم بعد الرأسي. إذا لم يكن هناك أي خط مائل ، فسيكون كلا القطرين متطابقين.

لذا ، فإن القيم قبل الخط المائل هي المسؤولة عن المسافات الأفقية ، والقيم بعد الخط المائل مسؤولة عن الرأسي. كل هذا جيد ، ولكن هنا يطرح سؤال منطقي: "ما الذي نتحدث عنه؟" هل تتذكر قيم النسبة المئوية لتقريب الزوايا للأشكال المستطيلة؟ تم تطبيق قيم مطلقة مختلفة للمسافات الرأسية والأفقية هناك وكانت الزوايا المستديرة غير متماثلة موجودة. هذا هو بالضبط ما يمكنك تحقيقه باستخدام الشرطة المائلة عند ضبط border-radius .

دعنا نقارن التأثيرات التي تعطيها الإعدادات التالية: border-radius: 4em 8em و border-radius: 4em / 8em . ستكون النتائج مختلفة للغاية.


الزوايا المتناظرة للعنصر الأيسر هي ربع دائرة ، والزوايا غير المتماثلة للعنصر الأيسر هي أجزاء من القطع الناقص

لنكون صادقين ، فإن الأرقام التي تم الحصول عليها نتيجة لتطبيق الإعدادات المذكورة أعلاه تبدو غريبة. ومع ذلك ، لا تنس أنه تم إنشاء الدوائر باستخدام المعلمات التالية: border-radius: 50% . يتم الحصول على الدائرة بسبب حقيقة أنه تم إضافة قيمتين تحددان جانبًا واحدًا وتم الحصول على 100٪ (50٪ + 50٪ = 100٪) ولا توجد خطوط مستقيمة من المربع الأصلي. إذا كنت تفكر بنفس الروح في القيم الثماني المستخدمة لتعيين خاصية border-radius ، فقد اتضح أنه بمساعدتهم يمكنك وصف شخصية تبدو وكأنها جيتار أو خلية في كائن حي.


الشكل الناتج عن تطبيق 8 قيم مفصولة بخط مائل


أربعة أشكال بيضاوية متداخلة تشكل شكلاً

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

الملخص

الآن بعد أن علمت أنه عند تعيين border-radius يمكنك استخدام 8 قيم ، ثم إذا جربت الأداة المذكورة أعلاه ، يمكنك أن تشعر بخيبة أمل طفيفة ، لأنها لا تسمح لك بالتحكم في كل قيمة بشكل مستقل. إذا كان الأمر كذلك ، فعندئذ هنا ، خاصة بالنسبة لك ، نسخته التي تدعم التكوين المستقل لجميع القيم الثمانية. قبل استخدامه ، تذكر محادثة واحدة من فيلم Ghostbusters لعام 1984:

- لا تقاطع تيارات.
- لماذا؟
- لكنها ستكون سيئة.

والحقيقة هي أنه إذا قمت بتحريك المتلاعبين بحيث تتقاطع على جانب واحد من الشكل ، فسيبدأ في التصرف ... دعنا نقول فقط - سيبدأ في التصرف بشكل غير متوقع. ماذا يمكنني أن أقول - انظر بنفسك. في النهاية ، لن يؤدي هذا إلى كارثة عالمية ، ولكن عند القيام بذلك ، تذكر أننا حذرناك.

أعزائي القراء! هل تستخدم خاصية CSS التي يبلغ قطرها نصف قطرها؟