بدء استخدام أشكال CSS

التفاف المحتوى حول مسارات مخصّصة

Razvan Caliman

لفترة طويلة، اضطر مصممو الويب إلى إنشاء تصميماتهم ضمن قيود المستطيل. لا يزال معظم المحتوى على الويب محاصرًا في مربعات بسيطة لأن معظم المشاريع الإبداعية في التخطيط غير المستطيل تنتهي بالإحباط. That is about to change with the introduction of CSS Shapes, available starting with Chrome 37. تتيح ميزة "أشكال CSS" لمصمّمي الويب التفاف المحتوى حول مسارات مخصّصة، مثل الدوائر والأشكال البيضاوية والمضلّعات، وبالتالي التحرّر من قيود المستطيل.

يمكن تحديد الأشكال يدويًا أو استنتاجها من الصور.

لنلقِ نظرة على مثال بسيط جدًا.

ربما كنت ساذجًا مثلي عندما قمت لأول مرة بتعويم صورة ذات أجزاء شفافة متوقعًا أن يلتف المحتوى ويملأ الفجوات، لتصاب بخيبة أمل بسبب استمرار شكل الالتفاف المستطيل حول العنصر. يمكن استخدام CSS Shapes لحلّ هذه المشكلة.

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

يخبر تعريف CSS shape-outside: url(image.png) المتصفح باستخراج شكل من الصورة.

تحدّد السمة shape-image-threshold الحدّ الأدنى لمستوى تعتيم وحدات البكسل التي سيتم استخدامها لإنشاء الشكل. يجب أن تتراوح قيمتها بين 0.0 (شفاف بالكامل) و1.0 (معتم بالكامل). لذلك، تعني القيمة shape-image-threshold: 0.5 أنّه سيتم استخدام وحدات البكسل التي تبلغ درجة تعتيمها% 50 أو أكثر فقط لإنشاء الشكل.

سمة float هي الأساسية هنا. While the shape-outside property defines the shape of the area around which content will wrap, without the float, you won't see the effects of the shape.

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

في المستقبل، سيكون من الممكن استخدام shape-outside على العناصر التي لا تطفو مع استثناءات CSS.

إنشاء الأشكال يدويًا

بالإضافة إلى استخراج الأشكال من الصور، يمكنك أيضًا ترميزها يدويًا. يمكنك الاختيار من بين بعض القيم الوظيفية لإنشاء الأشكال: circle() وellipse() وinset() وpolygon(). تقبل كل دالة شكل مجموعة من الإحداثيات ويتم إقرانها بمربّع مرجعي يحدّد نظام الإحداثيات. سنتعرّف على المزيد حول مربّعات المراجع بعد قليل.

الدالة circle()‎

الصيغة الكاملة لقيمة شكل الدائرة هي circle(r at cx cy)، حيث يمثّل r نصف قطر الدائرة، بينما يمثّل cx وcy إحداثيات مركز الدائرة على المحور السيني والمحور الصادي. إحداثيات مركز الدائرة اختيارية. وفي حال حذفها، سيتم استخدام مركز العنصر (تقاطع أقطاره) كقيمة تلقائية.

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

في المثال أعلاه، سيتم التفاف المحتوى حول الجزء الخارجي من مسار دائري. تحدّد الوسيطة الواحدة 50% نصف قطر الدائرة، والذي يساوي في هذه الحالة المحدّدة نصف عرض العنصر أو ارتفاعه. سيؤثر تغيير أبعاد العنصر في نصف قطر شكل الدائرة. هذا مثال بسيط على كيفية جعل أشكال CSS متجاوبة.

قبل المتابعة، إليك ملاحظة سريعة: من المهم تذكُّر أنّ CSS Shapes تؤثر فقط في شكل منطقة العائمة حول عنصر معيّن. إذا كان العنصر يحتوي على خلفية، لن يتم اقتصاصها حسب الشكل. لتحقيق هذا التأثير، يجب استخدام خصائص من CSS Masking، إما clip-path أو mask-image. تُعدّ السمة clip-path مفيدة جدًا لأنّها تتّبع الترميز نفسه الذي تتّبعه أشكال CSS، لذا يمكنك إعادة استخدام القيم.

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

لنعد إلى شكل الدائرة.

عند استخدام النسب المئوية لنصف قطر الدائرة، يتم احتساب القيمة باستخدام صيغة أكثر تعقيدًا: الجذر التربيعي لـ(العرض^2 + الارتفاع^2) / الجذر التربيعي لـ(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.

هناك بعض خيارات مربّعات المراجع التي يمكن الاختيار من بينها: `margin-box` و`border-box` و`padding-box` و `content-box`. تشير أسماؤها إلى حدودها. لقد شرحنا سابقًا `margin-box`. يتم تقييد `border-box` بالحواف الخارجية لحدود العنصر، ويتم تقييد `padding-box` بحشو العنصر، بينما يتطابق `content-box` مع مساحة السطح الفعلية التي يستخدمها المحتوى داخل العنصر.

يمكن استخدام مربّع مرجعي واحد فقط في وقت معيّن مع بيان shape-outside. سيؤثر كل مربع مرجعي في الشكل بطريقة مختلفة وأحيانًا دقيقة. هناك مقالة أخرى تتعمّق أكثر وتساعدك في فهم مربّعات المراجع لأشكال CSS.

الدالة ellipse()‎

تبدو الأشكال البيضاوية مثل الدوائر المضغوطة. ويتم تحديدها على النحو التالي: ellipse(rx ry at cx cy)، حيث يمثّل rx وry نصف قطر القطع الناقص على المحور X والمحور Y، بينما يمثّل cx وcy إحداثيات مركز القطع الناقص.

.element{
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

سيتم احتساب قيم النسبة المئوية من أبعاد نظام الإحداثيات. لا حاجة إلى إجراء عمليات حسابية معقّدة هنا. يمكنك حذف إحداثيات مركز الشكل البيضاوي وسيتم استنتاجها من مركز نظام الإحداثيات.

يمكن أيضًا تحديد أنصاف الأقطار على المحورَين X وY باستخدام الكلمات الرئيسية: ينتج عن farthest-side نصف قطر يساوي المسافة بين مركز الشكل البيضاوي وجانب المربّع المرجعي الأبعد عنه، بينما يعني closest-side العكس تمامًا، أي استخدام أقصر مسافة بين المركز والجانب.

.element{
  shape-outside: ellipse(closest-side farthest-side at 50% 50%);
  /* identical to: */
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

قد يكون ذلك مفيدًا عندما تتغيّر أبعاد العنصر (أو مربّع المرجع) بطرق غير متوقّعة، ولكنك تريد أن يتكيّف الشكل البيضاوي معها.

يمكن أيضًا استخدام الكلمتَين الرئيسيَّتَين farthest-side وclosest-side نفسهما لنصف القطر في دالة الشكل circle().

الدالة polygon()‎

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

.element{
  shape-outside: polygon(0 0, 0 300px, 300px 600px);
  width: 300px;
  height: 600px;
}

يتم وضع الرؤوس على نظام الإحداثيات. بالنسبة إلى المضلّعات المتجاوبة، يمكنك استخدام قيم النسبة المئوية لبعض الإحداثيات أو جميعها.

.element{
  /* polygon responsive to font-size*/
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  width: 20em;
  height: 40em;
}

هناك مَعلمة fill-rule اختيارية، مستورَدة من SVG، توجّه المتصفّح إلى كيفية اعتبار "الداخلية" لمضلّع في حال المسارات ذاتية التقاطع أو الأشكال المغلقة. تشرح "جوني تريثال" بشكل جيد جدًا طريقة عمل السمة fill-rule في SVG. في حال عدم تحديد السمة، يتم ضبط fill-rule تلقائيًا على nonzero.

.element{
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  /* identical to: */
  shape-outside: polygon(nonzero, 0 0, 0 100%, 100% 100%);
}

الدالة inset()‎

تتيح لك دالة الشكل inset() إنشاء أشكال مستطيلة لالتفاف المحتوى حولها. قد يبدو هذا غير بديهي بالنظر إلى الفرضية الأولية بأنّ أشكال CSS تحرّر محتوى على الويب من المربّعات البسيطة. قد يكون ذلك صحيحًا. لم أجد بعد حالة استخدام لـ inset() لا يمكن تحقيقها باستخدام العناصر العائمة والهوامش أو باستخدام polygon(). ومع ذلك، يوفّر inset() تعبيرًا أكثر قابلية للقراءة للأشكال المستطيلة من polygon().

الصيغة الكاملة لدالة شكل داخلي هي inset(top right bottom left border-radius). الوسيطات الأربع الأولى للموضع هي إزاحات إلى الداخل من حواف العنصر. الوسيطة الأخيرة هي نصف قطر الحد للشكل المستطيل. هذا الحقل اختياري، لذا يمكنك تركه فارغًا. وهي تتبع تدوين الاختصار border-radius الذي تستخدمه حاليًا في CSS.

.element{
  shape-outside: inset(100px 100px 100px 100px);
  /* yields a rectangular shape which is 100px inset on all sides */
  float: left;
}

إنشاء أشكال من مربّعات مرجعية

إذا لم تحدّد دالة شكل للسمة shape-outside، يمكنك السماح للمتصفّح باستخراج شكل من مربّع مرجع العنصر. مربّع المرجع التلقائي هو margin-box. لا شيء غريب حتى الآن، فهذه هي الطريقة التي تعمل بها الأعداد العشرية. ولكن من خلال تطبيق هذه التقنية، يمكنك إعادة استخدام الشكل الهندسي لعنصر ما. لنلقِ نظرة على السمة border-radius.

إذا استخدمتها لتدوير زوايا عنصر عائم، فستحصل على تأثير الاقتصاص، لكن تظل المنطقة العائمة مستطيلة. أضِف shape-outside: border-box للالتفاف حول المحيط الذي تم إنشاؤه بواسطة border-radius.

.element{
  border-radius: 50%;
  shape-outside: border-box;
  float: left;
}

بالطبع، يمكنك استخدام جميع مربعات المراجع بهذه الطريقة. إليك استخدام آخر للأشكال المشتقة، وهو الاقتباسات البارزة.

من الممكن تحقيق تأثير الاقتباس المنسحب عن طريق استخدام خصائص التعويم والهامش فقط. ولكن يتطلّب ذلك وضع عنصر الاقتباس في شجرة HTML في الموضع الذي تريد عرضه فيه.

في ما يلي كيفية تحقيق تأثير الاقتباس البارز نفسه مع مرونة إضافية:

.pull-quote{
  shape-outside: content-box;
  margin-top: 200px;
  float: left;
}

نضبط بشكل صريح مربّع الإحاطة content-box لنظام إحداثيات الشكل. في هذه الحالة، يحدد مقدار المحتوى في الاقتباس المقتطف الشكل الذي سيلتف حوله المحتوى الخارجي. تُستخدَم السمة margin-top هنا لتحديد موضع (إزاحة) الاقتباس البارز، بغض النظر عن موضعه في شجرة HTML.

هامش الشكل

ستلاحظ أنّ التفاف المحتوى حول شكل ما قد يجعله قريبًا جدًا من العنصر. يمكنك إضافة مسافة حول الشكل باستخدام السمة shape-margin.

.element{
  shape-outside: circle(40%);
  shape-margin: 1em;
  float: left;
}

يشبه التأثير ما اعتدت عليه من استخدام السمة margin العادية، ولكنّ السمة shape-margin تؤثر فقط في المساحة المحيطة بالقيمة shape-outside. ستتم إضافة مسافات حول الشكل فقط إذا كانت هناك مساحة له في نظام الإحداثيات. لهذا السبب، تم ضبط نصف قطر الدائرة في المثال أعلاه على %40 وليس %50. إذا تم ضبط نصف القطر على %50، ستشغل الدائرة كل المساحة في نظام الإحداثيات، ولن تترك أي مساحة لتأثير shape-margin. يُرجى العِلم أنّ الشكل يقتصر في النهاية على margin-box للعنصر (العنصر بالإضافة إلى margin المحيط به). إذا كان الشكل أكبر حجمًا ويتجاوز الحدّ المسموح به، سيتم اقتصاصه إلى margin-box وستحصل على شكل مستطيل.

من المهم فهم أنّ السمة shape-margin تقبل قيمة موجبة واحدة فقط. ولا يتضمّن تدوينًا طويلاً. ما هو الهامش العلوي للشكل الدائري؟

إضافة حركة إلى الأشكال

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

يمكنك إضافة تأثيرات حركية إلى أنصاف الأقطار والمراكز لأشكال circle() وellipse() طالما أنّها محدّدة في قيم يمكن للمتصفّح استكمالها. يمكن الانتقال من circle(30%) إلى circle(50%). ومع ذلك، فإنّ استخدام الحركة بين circle(closest-side) وcircle(farthest-side) سيؤدي إلى إبطاء المتصفّح.

.element{
  shape-outside: circle(30%);
  transition: shape-outside 1s;
  float: left;
}

.element:hover{
  shape-outside: circle(50%);
}

يمكن تحقيق تأثيرات أكثر إثارة للاهتمام عند تحريك أشكال polygon()، مع ملاحظة مهمة وهي أنّ المضلّع يجب أن يحتوي على العدد نفسه من الرؤوس بين حالتَي الحركة. لا يمكن للمتصفّح إجراء الاستكمال إذا أضفت رؤوسًا أو أزلتها.

تتمثل إحدى الحيل في إضافة الحد الأقصى لمقدار الرؤوس التي تحتاجها ووضعها مجمعة معًا في حالة الرسوم المتحركة حيث تريد حوافًا أقل إدراكًا للشكل.

.element{
  /* four vertices (looks like rectangle) */
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: shape-outside 1s;
}

.element:hover{
  /* four vertices, but second and third overlap (looks like triangle) */
  shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}

التفاف المحتوى داخل شكل

تضمّنت المسودة الأولية لمواصفات CSS Shapes السمة shape-inside التي سمحت لك بلف المحتوى داخل شكل. حتى أنّه تم تنفيذها في Chrome وWebkit لفترة من الوقت. ومع ذلك، فإنّ تضمين محتوى في موضع عشوائي داخل مسار مخصّص يتطلّب جهدًا وبحثًا أكبر بكثير لتغطية جميع السيناريوهات المحتملة وتجنُّب الأخطاء. لهذا السبب، تم تأجيل السمة shape-inside إلى المستوى 2 من أشكال CSS وتم سحب عمليات تنفيذها.

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

<div>
  <div class='left-shape'></div>
  <div class='right-shape'></div>

  Lorem ipsum...
</div>

يُعدّ موضع عنصرَي الدعامة .left-shape و.right-shape في أعلى الحاوية مهمًا لأنّهما سيطفوان إلى اليسار وإلى اليمين من أجل إحاطة المحتوى.

.left-shape{
  shape-outside: polygon(0 0, ...);
  float: left;
  width: 50%;
  height: 100%;
}

.right-shape{
  shape-outside: polygon(50% 0, ...);
  float: right;
  width: 50%;
  height: 100%;
}

يؤدي هذا التنسيق إلى جعل العنصرَين العائمَين يشغلان كل المساحة داخل العنصر، ولكنّ السمتَين shape-outside تقتطعان مساحة لبقية المحتوى.

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

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

في العرض التوضيحي Alice in Wonderland لأشكال CSS، استخدمنا موضع التمرير لتغيير الهامش العلوي للمحتوى. يتم ضغط النص بين عنصرين عائمين. As it moves down, it has to relayout according to the shape-outside of the two floated elements. يعطي هذا انطباعًا بأن النص ينزل في حفرة الأرنب ويضيف إلى تجربة سرد القصص. هل المحتوى قريب من مخالفة السياسات المتعلقة بالمحتوى المجاني؟ ربما. لكنّها تبدو رائعة.

بما أنّ تنسيق النص يتم بشكل أصلي من خلال المتصفّح، يكون الأداء أفضل من استخدام حلّ JavaScript. ولكن تغيير الهامش العلوي عند التمرير يؤدي إلى تشغيل الكثير من أحداث إعادة التخطيط والرسم، وقد يؤدي ذلك إلى تقليل الأداء بشكل ملحوظ. يُرجى استخدامها بحذر. ومع ذلك، فإنّ استخدام CSS Shapes بدون تحريكها لا يؤدي إلى انخفاض ملحوظ في الأداء.

التحسين التدريجي

ابدأ بافتراض أنّ المتصفّح لا يتيح استخدام أشكال CSS، ثم أضِف هذه الميزة عندما تكتشفها. Modernizr هو حلّ جيد لرصد الميزات، وهناك اختبار لـ "أشكال CSS" في قسم "عمليات الرصد غير الأساسية".

توفّر بعض المتصفّحات ميزة رصد الميزات في CSS من خلال قاعدة @supports بدون الحاجة إلى مكتبات خارجية. ويفهم Google Chrome، الذي يتيح أيضًا استخدام أشكال CSS، القاعدة @supports. إليك كيفية استخدامه للتحسين المتدرّج:

.element{
  /* styles for all browsers */
}

@supports (shape-outside: circle(50%)){
  /* styles only for browsers which support CSS Shapes */
  .element{
    shape-outside: circle(50%);
  }
}

كتبت ليا فيرو المزيد عن كيفية استخدام قاعدة CSS @supports.

التوضيح من استبعادات CSS

ما نعرفه اليوم باسم CSS Shapes كان يُطلق عليه اسم CSS Exclusions and Shapes في الأيام الأولى من المواصفات. قد يبدو التبديل في التسمية فارقًا بسيطًا، ولكنه في الواقع مهم للغاية. استبعادات CSS، وهي الآن مواصفات منفصلة، تتيح التفاف المحتوى حول العناصر التي يتم وضعها بشكل عشوائي، بدون الحاجة إلى سمة عائمة. تخيَّل التفاف المحتوى حول عنصر ذي موضع مطلق، هذه إحدى حالات استخدام CSS Exclusions. تحدّد أشكال CSS فقط المسار الذي سيتم التفاف المحتوى حوله.

لذا، فإنّ الأشكال والاستبعادات ليست الشيء نفسه، ولكنّها يكمّل بعضها بعضًا. تتوفر أشكال CSS في المتصفحات اليوم، بينما لم يتم تنفيذ استثناءات CSS بعد مع تفاعل الأشكال.

أدوات للعمل مع أشكال CSS

يمكنك إنشاء مسارات في أدوات تأليف الصور الكلاسيكية، ولكن لا يقوم أي منها، في وقت كتابة هذا التقرير، بتصدير البنية المطلوبة لقيم أشكال CSS. وحتى لو كان بإمكانهم ذلك، لن يكون العمل بهذه الطريقة عمليًا للغاية.

تم تصميم أشكال CSS ليتم استخدامها في المتصفّح، حيث تتفاعل مع العناصر الأخرى في الصفحة. من المفيد جدًا تصور تأثيرات تعديل الشكل على المحتوى الذي يحيط به. هناك بعض الأدوات لمساعدتك في سير العمل هذا:

‫Brackets: تستخدم إضافة CSS Shapes Editor لبرنامج Brackets وضع المعاينة المباشرة في أداة تعديل الرموز لعرض أداة تعديل تفاعلية لتعديل قيم الأشكال.

‫Google Chrome: تتيح إضافة CSS Shapes Editor لمتصفّح Google Chrome توسيع نطاق "أدوات المطوّرين" في المتصفّح من خلال عناصر تحكّم لإنشاء الأشكال وتعديلها. يضع محرّرًا تفاعليًا فوق العنصر المحدّد.

يتضمّن الفاحص في Google Chrome دعمًا مدمجًا لتمييز الأشكال. مرِّر مؤشر الماوس فوق عنصر يتضمّن السمة shape-outside وسيضيء لتوضيح الشكل.

الأشكال من الصور: إذا كنت تفضّل إنشاء صور واستخراج الأشكال منها من خلال المتصفّح، يمكنك الاطّلاع على دليل تعليمي جيد حول Photoshop كتبته "ريبيكا هوك".

Polyfill: Google Chrome هو أول متصفّح رئيسي يوفّر ميزة "أشكال CSS". ستتوفّر هذه الميزة قريبًا على نظام التشغيل iOS 8 من Apple ومتصفّح Safari 8. وقد يراعيها مورّدو المتصفّحات الآخرون في المستقبل. وحتى ذلك الحين، يتوفّر polyfill لأشكال CSS لتوفير الدعم الأساسي.

الخاتمة

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

أترككم مع مجموعة من الأعمال التي أنجزها آخرون، معظمها من المطبوعات، والتي توضح الاستخدامات المثيرة للاهتمام للتخطيط غير المستطيل. نأمل أن يشجّعك ذلك على تجربة CSS Shapes وأفكار تصميم جديدة.

شكرًا جزيلاً لـ "بيرل تشن" و"آلان ستيرنز" و"زولتان هورفاث" على مراجعة هذه المقالة وتقديم معلومات قيّمة.