فكر خارج الصندوق باستخدام شكل CSS الخارجي

يعتمد CSS على نموذج الصندوق. إذا كانت لديك صورة عبارة عن دائرة تريد التفاف النص حولها ، فستلتف حول المربع المحيط بالصور.

الشكل الخارجي

تتيح لك خاصية CSS جديدة تسمى الشكل الخارجي التفاف النص الذي يتوافق مع شكل صورتك.

ما هو الشكل الخارجي

Shape-outside هي خاصية CSS جديدة تغير شكل العناصر التي يتم تغليفها. بدلاً من أن يقتصر على مربع محيط مستطيل حول الصورة ، يسمح لنا الشكل الخارجي بتشكيل المحتوى ليلائم الصورة.

إليك كيفية وصف MDN للشكل الخارجي:

في الشكل الخارجي الملكية CSS تستخدم القيم شكل لتحديد منطقة تعويم لتعويم، وسوف يؤدي المحتوى المضمن للالتفاف حول الشكل بدلا من المربع المحيط تعويم ل.

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

باستخدام الشكل الخارجي

تأخذ خاصية الشكل الخارجي "الشكل الأساسي" وتطبق وظيفة الشكل عليها. تُستخدم وظيفة الشكل لتغيير شكل منطقة تعويم الشكل. توفر خاصية CSS shape-outside وظائف لإنشاء وظائف الشكل هذه:

  • دائرة
  • الشكل البيضاوي
  • مضلع
  • مستطيل
  • عنوان url

يمكن وضع الصورة بهذه القيم. يتم إلحاق القيم بالنهاية:

  • صندوق الهامش
  • مربع الحشو
  • مربع الحدود

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

دائرة

الدائرة () هي إحدى القيم الوظيفية المتوفرة مع الشكل الخارجي. الترميز الكامل للدائرة () هو الدائرة (r عند cx cy) حيث r هو نصف قطر الدائرة و cx و cy هما إحداثيات مركز الدائرة. إذا حذفتهم ، فسيتم استخدام وسط الصورة كقيم افتراضية.

فيما يلي مثال على استخدام الشكل الخارجي على دائرة:

.circle { height: 200px; width: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: circle(); shape-outside: circle();}

الشكل البيضاوي

Ellipse هو شكل من أشكال الدائرة حيث يكون العنصر ممدودًا على المحور الأفقي أو الرأسي. الترميز الكامل للقطع الناقص () هو القطع الناقص (rx ry في cx cy) حيث rx و ry هما نصف قطر القطع الناقص و cx و cy هما إحداثيات مركز القطع الناقص.

فيما يلي مثال على استخدام الشكل الخارجي على القطع الناقص:

.ellipse { width: 100px; height: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: ellipse(50px 100px at 50% 50%); shape-outside: ellipse(50px 100px at 50% 50%);}

مضلع

توفر وظيفة المضلع نطاقًا غير محدود من الأشكال. الترميز الكامل للمضلع () هو مضلع (x1 y1 ، x2 y2 ، ...)حيث يحدد كل زوج إحداثيات س ص لرأس المضلع. لاستخدام الدالة polygon () ، يجب تحديد 3 أزواج من الرأس على الأقل.

يُستخدم المضلع مع مسار القصاصة. تنشئ خاصية Clip-path CSS منطقة قطع تحدد أي جزء من العنصر يجب عرضه. يتم عرض أي شيء داخل المنطقة ، بينما يتم إخفاء الخارج.

فيما يلي مثال على استخدام الشكل الخارجي لإنشاء شكلين مثلثين ويتدفق النص بينهما:

.leftTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}.rightTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 0 5px 25px; float: right; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}

دعم المتصفح

يتم دعم شكل CSS الخارجي بشكل أساسي بواسطة Chrome و Opera و Safari.

احصل على الكود

يمكن العثور على رمز جميع الأمثلة في github repo هنا.

المزيد من المقالات

شكرا لقراءة مقالي. إذا كنت ترغب في ذلك ، فيرجى النقر فوق أيقونة التصفيق أدناه حتى يتمكن الآخرون من العثور على المقالة. إليك المزيد من مقالاتي التي قد تكون مهتمًا بها:

فيما يلي 5 تخطيطات يمكنك إجراؤها باستخدام FlexBox

اتساع أول بحث في JavaScript

أنماط التماثل في جافا سكريبت