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

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