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

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

Razvan Caliman

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

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

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

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

<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 هي المفتاح هنا. تحدّد السمة shape-outside شكل المنطقة التي يلتف حولها المحتوى، ولكن بدون العائم، لن تظهر لك تأثيرات الشكل.

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

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

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

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

الدالةCircle()

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

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

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

قبل المتابعة، نريد أن نشير إلى أنّه من المهم تذكُّر أنّ أشكال CSS لا تؤثّر إلا في شكل منطقة التعويم حول العنصر. إذا كان العنصر له خلفية، فلن يتم اقتصاصه بواسطة الشكل. لتحقيق هذا التأثير، يجب استخدام سمات من تظليل 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.

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

يمكن استخدام مربّع مرجع واحد فقط في وقت معيّن مع بيان 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، وهي توجِّه المتصفّح إلى كيفية مراعاة "داخل" المضلّع في حال وجود مسارات متقاطعة ذاتيًا أو أشكال مضمّنة. يشرح "جوني تريثال" بشكل جيد كيفية عمل خاصية قاعدة التعبئة في رسومات موجّهة يمكن تغيير حجمها (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;
}

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

من الممكن تحقيق تأثير اقتباس مميّز مُعدَّل باستخدام سمتَي float وmargin فقط. ويتطلّب ذلك وضع عنصر الاقتباس في شجرة 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 لا تقبل سوى قيمة موجبة واحدة. لا يتضمّن كتابة بخط اليد. ما هو shape-margin-top للدائرة؟

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

يمكنك مزج أشكال 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 سمة 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، استخدمنا موضع التمرير لتغيير الهامش العلوي من المحتوى. يتم ضغط النص بين عنصرين عائمين. أثناء تحركه للأسفل، يجب إعادة ترتيبه وفقًا shape-outside للعنصرَين المعلّقَين. يعطي ذلك انطباعًا بأنّ النص ينزل إلى أسفل الصفحة، ما يعزّز تجربة سرد القصص. هل هناك مشاهد عنف غير مبرّرة؟ ربما. يبدو أنّه رائع.

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

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

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

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

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

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

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

إزالة الغموض عن استبعادات خدمة مقارنة الأسعار (CSS)

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

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

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

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

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

Brackets: تستخدم إضافة "محرر أشكال CSS" في Brackets وضع المعاينة المباشرة في محرِّر الرموز البرمجية لوضع محرِّر تفاعلي فوقه لتعديل قيم الأشكال.

Google Chrome: توفّر إضافة "محرر أشكال CSS" لمتصفّح Google Chrome أدوات مطوّري البرامج في المتصفّح مع عناصر تحكّم لإنشاء الأشكال وتعديلها. يضع محررًا تفاعليًا أعلى العنصر المحدد.

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

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

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

الخاتمة

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

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

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