لفترة طويلة، اضطر مصممو الويب إلى الإنشاء ضمن قيود المستطيل. لا يزال معظم المحتوى على الويب عالقًا في مربعات بسيطة لأن معظم المشاريع الإبداعية التي تعمل في تخطيط غير مستطيل تنتهي بالإحباط. نحن على وشك أن يتغيّر مع طرح أشكال CSS، المتاحة بدءًا من Chrome 37.
تسمح أشكال CSS لمصممي الويب بالتفاف المحتوى حول المسارات المخصصة، مثل الدوائر والأشكال البيضاوية والمضلعات، مما يؤدي إلى الاستغناء عن قيود المستطيل.
يمكن تحديد الأشكال يدويًا أو يمكن استنتاجها من الصور.
لنلقِ نظرة على مثال بسيط للغاية.
ربما كنت بارعًا مثلي عندما تطفو لأول مرة صورة بأجزاء شفافة تتوقع أن يلتف المحتوى ويملأ الفجوات، فقط أن تشعر بخيبة أمل بسبب شكل الالتفاف المستطيل الذي يستمر حول العنصر. يمكن استخدام أشكال CSS لحل هذه المشكلة.
يطلب بيان CSS shape-outside: url(image.png) من المتصفّح استخراج شكل من الصورة.
تحدد السمة shape-image-threshold الحد الأدنى لمستوى تعتيم وحدات البكسل التي سيتم استخدامها لإنشاء الشكل. ويجب أن تتراوح قيمتها بين 0.0 (شفاف بالكامل) و1.0 (غير شفاف تمامًا). لذلك، تعني shape-image-threshold: 0.5 أنه سيتم استخدام وحدات البكسل ذات التعتيم 50% أو أعلى فقط لإنشاء الشكل.
تُعدّ السمة float هي الأساس هنا. وبالرغم من أن السمة shape-outside تحدد شكل المنطقة التي يلتف حولها المحتوى، لن تظهر تأثيرات الشكل بدون العدد العشري.
تحتوي العناصر على مساحة عائمة على الجانب الآخر من قيمة float الخاصة بها. على سبيل المثال، إذا كان العنصر الذي يحمل صورة فنجان قهوة عائمًا إلى اليسار، سيتم إنشاء المساحة العائمة على يمين الكوب. على الرغم من أنه يمكنك هندسة صورة بها فجوات على كلا الجانبين، فلن يلتف المحتوى إلا حول الشكل على الجانب الآخر المحدد بواسطة خاصية العدد العشري، الأيسر أو الأيمن، وليس كليهما.
في المستقبل، يمكن استخدام shape-outside على العناصر غير المعدَّلة مع إضافة استبعادات CSS في المقدّمة.
إنشاء الأشكال يدويًا
بالإضافة إلى استخراج الأشكال من الصور، يمكنك أيضًا ترميزها يدويًا. يمكنك الاختيار من بين بعض القيم الوظيفية لإنشاء أشكال: circle() وellipse() وinset() وpolygon(). تقبل كل دالة شكل مجموعة من الإحداثيات ويتم إقرانها بمربع مرجعي يؤسس نظام الإحداثيات. مزيد من المعلومات حول مربعات المرجع في وقت قصير
الدالة الدائرة()
الرمز الكامل لقيمة شكل الدائرة هو circle(r at cx cy) حيث يكون r هو نصف قطر الدائرة، بينما cx وcy هما إحداثيات مركز الدائرة على المحور السيني والمحور Y. إحداثيات مركز الدائرة اختيارية. إذا قمت بحذفها، فسيتم استخدام مركز العنصر (تقاطع أقطاره) كإعداد افتراضي.
في المثال أعلاه، سيلتف المحتوى حول الجزء الخارجي من مسار دائري. وتحدد الوسيطة المفردة 50% نصف قطر الدائرة، والذي يبلغ في هذه الحالة نصف عرض العنصر أو ارتفاعه. سيؤثر تغيير أبعاد العنصر على نصف قطر شكل الدائرة. هذا مثال أساسي على كيفية استجابة أشكال CSS.
قبل المضي قدمًا، لِنأخذ جانبًا سريعًا: من المهم تذكر أن أشكال CSS تؤثر فقط على شكل المنطقة العائمة حول العنصر. إذا كان العنصر له خلفية، فلن يتم اقتصاصه حسب الشكل. ولتحقيق هذا التأثير، عليك استخدام الخصائص من CSS Masking (الإخفاء في CSS) إما clip-path أو mask-image. تُعد السمة clip-path سهلة الاستخدام لأنّها تتبع العلامة نفسها لأشكال CSS، وبالتالي يمكنك إعادة استخدام القيم.
تستخدم الصور التوضيحية في هذا المستند الاقتصاص لإبراز الشكل ومساعدتك في فهم التأثيرات.
عُد إلى شكل الدائرة.
عند استخدام النسب المئوية لنصف قطر الدائرة، يتم في الواقع احتساب القيمة باستخدام معادلة أكثر تعقيدًا بعض الشيء: sqrt(width^2 + height^2) / sqrt(2). من المفيد فهم ذلك لأنه سيساعدك على تخيل شكل الدائرة الناتج إذا لم تكن أبعاد العنصر متساوية.
يمكن استخدام جميع أنواع وحدات CSS في إحداثيات دوال الشكل - px، em، rem، vw، vh، وهكذا. يمكنك اختيار المنتج الذي يتميز بالمرونة أو الصرامة بما يكفي لاحتياجاتك.
يمكنك ضبط موضع الدائرة من خلال تعيين قيم صريحة لإحداثيات مركزها.
.element{
shape-outside: circle(50% at 0 0);
}
هذا يضع مركز الدائرة عند أصل النظام الإحداثي. ما النظام الإحداثي؟ وهنا نقدّم مربعات مرجعية.
المربعات المرجعية لأشكال CSS
المربع المرجعي هو مربع افتراضي حول العنصر، يؤسس نظام الإحداثيات المستخدم لرسم الشكل ووضعه. يقع أصل النظام الإحداثي في زاويته العلوية اليسرى مع توجيه المحور س إلى اليمين والمحور ص يشير إلى أسفل.
لا تنسَ أنّ shape-outside تغيّر شكل المنطقة العائمة التي سيلف حولها المحتوى. تمتد المساحة العائمة إلى الحواف الخارجية للمربّع التي تحدّدها السمة margin. يسمى هذا الخيار margin-box وهو المربع المرجعي التلقائي للشكل إذا لم يتم ذكر أي منهما صراحةً.
يحتوي تعريفا CSS التاليان على نتائج متطابقة:
.element{
shape-outside: circle(50% at 0 0);
/* identical to: */
shape-outside: circle(50% at 0 0) margin-box;
}
لم نقم بعد بتعيين هامش للعنصر. في هذه المرحلة، من الآمن افتراض أن أصل نظام الإحداثيات ومركز الدائرة يقعان في الزاوية العلوية اليسرى من منطقة محتوى العنصر. يتغير هذا عند تعيين هامش:
.element{
shape-outside: circle(50% at 0 0) margin-box;
margin: 100px;
}
يقع أصل نظام الإحداثيات الآن خارج مساحة محتوى العنصر (100 بكسل لأعلى و100 بكسل لليسار)، كما هو الحال في مركز الدائرة. تزيد أيضًا القيمة المحسوبة لنصف قطر الدائرة لاحتساب السطح المتزايد لنظام الإحداثيات الذي أنشأه المربع المرجعي margin-box.