المسارات والأشكال والقص والإخفاء

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

المسارات والأشكال

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

يمكن أن تكون الأشكال المحدّدة في CSS إما أشكالاً أساسية (مثل الدوائر والمستطيلات والمضلّعات) أو مسارات (يمكنها تحديد أشكال معقّدة ومركّبة).

الأشكال الأساسية

circle() وellipse()

تحدّد الدالتان circle() وellipse() أشكالاً مستديرة وبيضاوية بنصف قطر بالنسبة إلى أحد العناصر. تقبل الدالة circle() حجمًا أو نسبة مئوية واحدة كمعلَمة. تحدّد كلتا الدالتين موضع الشكل بالنسبة إلى وسط العنصر بشكل تلقائي. يقبل كلاهما موضعًا اختياريًا بعد الكلمة الرئيسية at، ويمكن التعبير عنه كأطوال أو نسب مئوية أو كلمات رئيسية موضعية.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: circle(50%);
}

يعرض المثال السابق مسار قص دائريًا باستخدام الدالة circle(). يُرجى العِلم أنّ نصف القطر 50% ينشئ دائرة بعرض العنصر الكامل. تقبل الدالة ellipse() وسيطتَين تمثّلان نصف القطر الأفقي والعمودي للشكل.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25%);
}

يعرض المثال السابق مسار قص بيضاوي الشكل باستخدام الدالة ellipse(). يُرجى العِلم أنّ نصف القطر بنسبة% 50 ينشئ قطعًا ناقصًا بعرض العنصر الكامل. يعرض المثال التالي الشكل البيضاوي نفسه الذي تم وضعه بحيث يكون مركزه في أعلى العنصر.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25% at center top);
}

rect() وinset()

توفّر الدالتان rect() وinset() طرقًا مختلفة لتحديد مستطيل من خلال ضبط موضع أضلاعه بالنسبة إلى أضلاع عنصر. يتيح لك ذلك إنشاء مستطيلات تختلف بصريًا عن المربّع التلقائي للعنصر. يمكن أن تقبل اختياريًا الكلمة الرئيسية round لإنشاء مستطيل بزوايا مستديرة، باستخدام بنية الجملة نفسها الخاصة بالخاصية المختصرة border-radius.

تحدّد الدالة rect() موضع الجانبَين العلوي والسفلي من المستطيل بالنسبة إلى الحافة العلوية للعنصر، والجانبَين الأيمن والأيسر بالنسبة إلى الحافة اليسرى للعنصر. تقبل هذه الدالة أربع وحدات حجم أو نسبة مئوية كمعلمات تحدّد الجوانب العلوي والأيمن والسفلي والأيسر. يمكنك اختيار الدالة rect() عندما تريد مستطيلاً لا يتم تغيير حجمه عند تغيير حجم العنصر أو مستطيلاً يحافظ على النِسب نفسها عند تغيير حجم العنصر.

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: rect(15px 75px 45px 10px);
}

يعرض المثال السابق مسار قص مستطيلًا تم تحديده باستخدام الدالة rect(). تكون الأبعاد بالنسبة إلى الحافتين العلوية واليسرى للعنصر كما هو موضّح في الرسم التخطيطي.

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

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px);
}

يعرض المثال السابق مسار قص مستطيلًا تم تحديده باستخدام الدالة inset(). تكون الأبعاد مرتبطة بجوانب العنصر.

تقبل الدالتان rect() وinset() بشكل اختياري الكلمة الرئيسية round لإنشاء مستطيل بزوايا مستديرة، وذلك باستخدام البنية نفسها الخاصة بالخاصية المختصرة border-radius. يوضّح المثال التالي نُسخًا مستديرة من المستطيلات المعروضة سابقًا.

.rounded-rect {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

.rounded-inset {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

polygon()

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

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: polygon(
    50% 0,
    0 100%,
    100% 100%
  );
}

ينشئ المثال السابق مسار قص مثلثًا من خلال تحديد ثلاث نقاط.

تعرض الدالة polygon() تلقائيًا المناطق المتداخلة على أنّها مملوءة. يمكنك تغيير هذا السلوك باستخدام وسيط أول اختياري يُعرف باسم قاعدة التعبئة. للتنقل بين المساحات المملوءة وغير المملوءة، اضبط قاعدة التعبئة على evenodd. لاستخدام قاعدة التعبئة التلقائية، اضبطها على nonzero.

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

الأشكال المعقّدة

عندما لا تكون دوال الأشكال الأساسية كافية لوصف شكل معقّد، يوفّر CSS دوال تستخدم بنية أكثر تعقيدًا لوصف ميزات مثل المنحنيات والخطوط. تكون هذه الدوال مفيدة أيضًا للأشكال المركّبة (الأشكال التي تتكوّن من أشكال متعددة، مثل دائرة بها ثقب).

path()

تقبل الدالة path() سلسلة من بنية مسار SVG لوصف شكل. يتيح ذلك إنشاء أشكال معقّدة باستخدام تعليمات تصف الخطوط والمنحنيات التي تشكّل الشكل. قد يكون تعديل بنية SVG مباشرةً أمرًا معقّدًا، لذا ننصحك باستخدام محرّر مرئي مخصّص يمكنه تصدير البنية عند إنشاء أشكال باستخدام الدالة path().

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

shape()

تستخدم الدالة shape() بنية أوامر لوصف شكل، على غرار الدالة path(). ومع ذلك، فإنّ أوامر الدالة shape() هي CSS أصلية ويمكنها استخدام وحدات حجم CSS. يتيح ذلك تغيير حجم الأشكال المحدّدة باستخدام الدالة shape() بشكل متجاوب.

يستخدم المثال السابق الدالتَين path() وshape() لتحديد شكل قلب ودائرة بها ثقب في المنتصف. يستخدم المثال القيمة نفسها بالبكسل لكلتا الدالتين، ولكن كان بإمكان الدالتين shape() استخدام وحدات حجم CSS أخرى، مثل النسب المئوية أو الوحدات النسبية للحاوية أيضًا.

القص

يحدّد الاقتصاص المناطق المرئية من العنصر، على غرار اقتصاص صورة من مجلة. تضبط السمة clip-path المسار المستخدَم لتحديد مساحة القص.

كما رأيت في الأمثلة الواردة في القسم السابق، يمكن استخدام أيّ من وظائف الشكل أو المسار الأساسية كـ clip-path. تتيح السمة clip-path أيضًا المسارات المحدّدة في عنصر clipPath بتنسيق SVG، ويمكن أن تكون مضمّنة أو في ملف منفصل.

يوضّح الرسم البياني السابق كيف تؤدي إضافة clip-path إلى عنصر صورة إلى تغيير المساحة المرئية للصورة. يستخدم مسار القطع العلوي الدالة circle()، بينما يستخدم مسار القطع السفلي clipPath بتنسيق SVG. يُرجى العِلم أنّ الدائرة التي تم إنشاؤها باستخدام الدالة circle() يتم وضعها في وسط العنصر تلقائيًا.

تقبل السمة clip-path مسارًا واحدًا فقط. لقص عنصر باستخدام أشكال متعددة لا تتداخل، استخدِم الدالتَين path() أو shape() لتحديد مسار مركّب، أو استخدِم clipPath بتنسيق SVG. هناك خيار آخر للحالات المعقّدة وهو استخدام الإخفاء بدلاً من القص، وسنتناول هذا الخيار في قسم لاحق.

القص باستخدام الأشكال

للقص باستخدام دالة شكل أو مسار أساسية، اضبط السمة clip-path على القيمة التي تعرضها الدالة، كما في الأمثلة السابقة. ستحدّد كل دالة موضع شكل القص بشكل مختلف بالنسبة إلى العنصر، لذا يُرجى الرجوع إلى المرجع الخاص بكل دالة.

في المثال السابق، تم تطبيق عنصرَين دائريَين clip-path باستخدام الفئة .clipped. يُرجى العِلم أنّ موضع clip-path يكون نسبيًا لكل عنصر، وأنّ النص داخل clip-path لا يعيد التدفق ليتبع الشكل.

المربع المرجعي لمسار القطع

يتضمّن مسار القص لعنصر ما تلقائيًا حدود العنصر. عند استخدام إحدى دوال الأشكال الأساسية، يمكنك ضبط المربّع المرجعي لـ clip-path بحيث يتضمّن فقط مساحة العنصر داخل الحدود. القيم الصالحة لمربّع المرجع هي stroke-box (القيمة التلقائية) وfill-box (لتضمين المنطقة داخل الحدود فقط).

يعرض المثال السابق عناصر ذات حدود كبيرة (20px)، ويستخدم كل منها الدالة inset() لضبط clip-path. يظل العنصر الذي يتم اقتصاصه نسبةً إلى حدود العنصر يعرض جزءًا من الحدود. العناصر التي يتم قصها بالنسبة إلى المنطقة داخل الحدود لا تعرض أي حدود وتكون أصغر، حتى مع قيمة الإزاحة الداخلية نفسها.

القص باستخدام الرسومات

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

<img id="kitten" src="kitten.png">

<svg>
  <defs>
    <clipPath id="kitten-clip-shape">
      <circle cx="130" cy="175" r="100" />
    </clipPath>
  </defs>
</svg>

<style>
  #kitten {
    clip-path: url(#kitten-clip-shape);
  }
</style>

في المثال السابق، تم تطبيق clipPath مع id بقيمة kitten-clip-shape على العنصر <img>. في هذه الحالة، يتم تضمين مستند SVG في HTML. إذا كان مستند SVG ملفًا خارجيًا باسم kitten-clipper.svg، سيتم بدلاً من ذلك الإشارة إلى clipPath على النحو url(kitten-clipper.svg#kitten-clip-shape).

الإخفاء

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

لتطبيق قناع، اضبط السمة mask-image. تقبل هذه السمة صورة واحدة أو أكثر أو تدرّجات أو مراجع لعناصر <mask> في مستند SVG. يمكن تطبيق صور قناع متعددة من خلال الفصل بينها بفواصل.

.my-element {
  mask-image: url(my-mask.png),
              linear-gradient(black 0%, transparent 100%);
}

في المثال السابق، يتم إخفاء .my-element باستخدام صورة PNG، متبوعة بتدرّج خطي. تتم إضافة أقنعة متعددة معًا تلقائيًا لإنشاء القناع النهائي.

يعرض المثال السابق صورة تم تطبيق قناع واحد أو أكثر عليها. بدِّل كل قناع لمعرفة كيفية إضافة الأقنعة معًا لإنتاج التأثير النهائي.

مقارنة بين حجب ألفا وحجب الإضاءة

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

لضبط وضع الإخفاء، استخدِم السمة mask-mode. يتم ضبط السمة mask-mode تلقائيًا على match-source، ما يؤدي إلى ضبط وضع استنادًا إلى نوع صورة القناع. بالنسبة إلى الصور والتدرجات، سيتم ضبط هذا الخيار تلقائيًا على alpha. بالنسبة إلى أقنعة SVG، سيتم تلقائيًا ضبط هذه السمة على قيمة السمة mask-type للعنصر <mask> أو luminance، في حال عدم تحديد mask-type.

في المثال السابق، تم استخدام نمط اختبار يعرض قيمًا مختلفة للألوان وقيم ألفا كقناع. من خلال النقر على mask-mode، يمكنك معرفة كيفية عمل الوضع alpha استنادًا إلى الشفافية، بينما يعتمد الوضع luminance على سطوع اللون وشفافيته.

خصائص إخفاء إضافية

توفّر CSS خصائص إضافية لضبط سلوك الأقنعة بدقة. تقبل كل سمة قائمة قيم مفصولة بفواصل، وسيتم مطابقتها مع قائمة الأقنعة التي تم ضبطها بواسطة السمة mask-image. إذا كان عدد القيم أقل من عدد الأقنعة، ستتكرر القائمة إلى أن يتم ضبط قيمة لكل قناع. إذا كان عدد القيم أكبر من عدد الأقنعة، يتم تجاهل أي قيم زائدة.

اختصار القناع

يمكنك ضبط عدّة خصائص قناع في آنٍ واحد باستخدام صيغة مختصرة للقناع. يمكن أن يؤدي ذلك إلى تبسيط عملية ضبط أقنعة متعدّدة من خلال تجميع جميع سمات كل قناع معًا. إنّ الاختصار الخاص بالقناع يعادل ضبط هذه الخصائص بالترتيب التالي: mask-image وmask-mode وmask-position وmask-size وmask-repeat وmask-origin وmask-clip وmask-composite. ليس من الضروري تضمين كل سمة، وسيتم إعادة ضبط أي سمة غير مضمّنة إلى قيمتها الأولية. بما أنّ هذا الجدول يتيح استخدام ما يصل إلى ثماني سمات لكل قناع، من المفيد توفير مرجع كامل.

.longhand {
  mask-image: linear-gradient(white, black),
              linear-gradient(90deg, black, transparent);
  mask-mode: luminance, alpha;
  mask-position: bottom left, top right;
  mask-size: 50% 50%, 30% 30%;
}

.shorthand {
  mask: linear-gradient(white, black) luminance bottom left / 50% 50%,
        linear-gradient(90deg, black, transparent) alpha top right / 30% 30%;
}

في المثال السابق، تم تطبيق قناعَين على كل فئة. يستخدم الأول خصائص فردية بينما يستخدم الثاني الاختصار mask. وكلا الأسلوبين متكافئان.

ضبط النص حسب الشاشة حول العناصر العائمة

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

تحدّد السمة shape-outside الشكل الذي سيتدفق المحتوى حول العنصر. يمكن أن يكون هذا الشكل أيًا من دوال الأشكال الأساسية، ولكن ليس الأشكال المحدّدة باستخدام الدالتَين path() أو shape()، أو clipPath محدّد في مستند SVG.

تقبل السمة shape-outside أيضًا صورة أو تدرّجًا. كما هو الحال مع إخفاء جزء من الصورة، سيتم تحديد حدود الشكل من خلال درجة شفافية الصورة أو التدرّج. تحدّد السمة shape-image-threshold مستويات الشفافية التي يتم أخذها في الاعتبار داخل الشكل.

الأشكال في الصور المتحركة

تحريك clip-path

يمكنك إضافة حركة إلى السمة clip-path، ما يؤدي إلى دمج الأشكال معًا. يجب استخدام دالة الشكل نفسها لكل إطار رئيسي لإنشاء رسوم متحركة سلسة. عند استخدام الدالتَين polygon() أو shape()، يجب استخدام عدد النقاط نفسه في كل إطار مفتاحي.

في المثال السابق، ينتقل clip-path أحد العناصر بين شكل خماسي وشكل نجمة محدّد باستخدام الدالة polygon(). يستخدم المثال قاعدة التعبئة evenodd لتوضيح كيف تنشئ النقاط المتحركة مناطق متداخلة.

إنشاء رسوم متحركة باستخدام offset-path

يمكنك أيضًا تحريك العناصر على طول المسارات التي تم إنشاؤها باستخدام دوال الأشكال هذه. تحدّد السمة offset-path الشكل الذي سيتم استخدامه كمسار، وتحدّد السمة offset-distance الموضع على طول هذا المسار. يمكنك أيضًا استخدام الدالة ray() مع السمة offset-path لتحريك العناصر على طول خط مستقيم.

يوضّح المثال السابق استخدام المضلّع نفسه لكل من clip-path وoffset-path. تستخدِم الحركة offset-distance لنقل النجوم الأصغر حجمًا على طول المضلّع نفسه الذي تستخدمه النجمة الكبيرة كـ clip-path.

التحقّق من فهمك