استخدمنا في المقالات السابقة الخاصية transition للقيام بالتحريك بين حالتين، حالة عدم التحويم (non-hover state) وحالة التحويم (hover state).

تحدُث تلك الانتقالات عند التحويم (تمرير مؤشر الفأرة) فوق العنصر. بيْد أنّ هذه ليست الطريقة الوحيدة لبدء التحريك، سنغطي في هذه المقالة طريقتين لفعل ذلك عبر استخدام JavaScript.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

إضافة أو إزالة الأصناف

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

يتألف هذا المثال من زر ومحتوى مُتضمَّن في عنصر div. في البداية سيكون لحاوية المحتوى صنف hide. في CSS، الصنف hide له الخاصية opacity: 0;‎.

لدينا أيضًا صنف ثانٍ في CSS يُسمى show. هذه الصنف لديه عتامة (opacity) مساوية للقيمة 1.

عند النقر فوق الزر، يتراوح صنف العنصر div بين hide وshow. ولأجل تحريكه، فنحن نطبق عملية انتقال على العنصر div أيضًا.

يمكنك مطالعة هذا على CodePen.

إذا كنت ترغب في التعمق أكثر في الموضوع، فأنصحك بقراءة المقال Adding Appeal to Your Animations on the Web.

في نهاية هذا الدرس، سنتعلم كيفية إجراء الانتقالات والتحريكات أثناء التمرير (scrolling).

التحكم في الانتقالات عبر جافاسكربت

يمكننا القيام بأكثر من إضافة أو إزالة الأصناف. فيمكننا باستخدام JavaScript، ضبط خاصيات CSS مباشرة على النحو التالي:

element.style.transition = `opacity 1s ease-out`;

في هذه الحالة، يمثل element عنصرًا حددناه. على سبيل المثال، إذا كان لعنصر ما المُعرّف js-show، فيمكنك تطبيق الانتقال عليه باستخدام getElementById:

document.getElementById(`js-show`).style.transition = `opacity 1s ease-out`;

عندما تفعل ذلك، يجب ألا تنسَ تضمين بادئات المتصفحات (vendor prefixes) أيضًا. سيُكتب ما سبق على النحو التالي:

document.getElementById(`js-show`).style.webkitTransition = `opacity 1s ease-out`;
document.getElementById(`js-show`).style.transition = `opacity 1s ease-out`;

في هذا المثال، ستُطبّق webkitTransition على كل المتصفحات ذات البادئة -webkit- في CSS.

ملخص

درسنا في المقالات السابقة الخاصية transition، وتعلّمنا كيفية استخدامها لجعل المتصفح يحرِّك عنصرًا من حالة إلى أخرى.

وقد تعلمنا في ثنيّات الطريق عدَّة خاصيات، مثل: المدة (duration) والتأخير (delay) ودوال التوقيت (timing functions).

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

وأخيرًا، في هذه المقالة توّجنا ما سبق بتعلم كيفية تطبيق هذه الانتقالات باستخدام JavaScript.

الانتقالات ليست سوى جزء بسيط من التحريك في CSS. سنغطي في المقالات اللاحقة الخاصية animation.

تمرين

قبل أن ننتقل إلى الخاصية animation، خذ بعض الوقت للتفكير في كيفية استخدام الانتقالات.

هل يمكنك التفكير في طرق يمكن أن تساعد بها الانتقالات على تسهيل التفاعلات، أو تغييرات الحالة على صفحاتك؟ كيف يمكنها أن تضيف جاذبية إلى تصميمك؟

المصادر

• ترجمة وبتصرف للفصل transitions and javascript من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: تطبيق عملي: التحريكات
• المقالة السابقة: الانتقالات المتعددة
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

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

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

المثال الأول: زر فني

رأينا في المقالات السابقة تأثيرًا بسيطًا للتحويم على الأزرار (button hover)، يمكننا دمج عدة انتقالات على نفس الزر للحصول على تأثير أكثر تعقيدًا.

في هذا المثال، يجمع تأثير التحويم بين عدة تغييرات للحالة، ولكنها مُحدّدة جميعًا عبر انتقال واحد:

transition: transform 0.4s cubic-bezier(.72,-0.61,.25,1.51);

إليك كيف يعمل هذا المثال. يتألف الزر من أيقونتين ونصّين. في الحالة الأولية (حالة غير التحويم non-hover state) يوضع النص "Follow me" وأيقونة Twitter داخل الزر. نضع الرمز @ والنص "cssanimation" خارج الزر على النحو التالي:

ثم نضيف حالة تحويم، حيث يتم وضع العناصر الموجودة خارج الزر داخله، كما يلي:

يمكننا فعل هذا باستخدام انتقالات CSS. على سبيل المثال، يُحدَّد موضع أيقونة Twitter باستخدام التموضع المطلق (absolute positioning). عند إعداد الأيقونة، يمكن تحديد موضعها في المكان الذي نريد باستخدام القيم left و top:

.icon {
  position: absolute;
  left: 0.75em;
  top: 0.75em;
}

ثم نضيف حالة تحويم للزر، ونضع أيقونة Twitter خارج الزر عبر الخاصية transform:

a:hover .icon {
  transform: translateY(3em);
}

إضافة overflow: hidden إلى الحاوية (container) يعني أنّ العناصر الموجودة خارج الزر لن تظهر.

في غياب الانتقال ستختفي الأيقونة فجأة. نظرًا لأنّ كل عنصر من العناصر الموجودة داخل الزر من النوع span، فيمكننا تطبيق الانتقال عليها جميعًا دفعة واحدة:

span {
  transition: transform 0.4s cubic-bezier(.72,-0.61,.25,1.51);
}

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

يمكنك مشاهدة هذا المثال بالكامل على CodePen.

المثال الثاني: كشف الخلفية

في هذا المثال، قمت بإعداد بطاقة تحتوي نصًّا، مع عرض نص عند التحويم عليها.

الحالة الأولية (حالة غير التحويم) للبطاقة تُظهر عنوانًا، ولكنّ عتامة (opacity) نص الفقرة تساوي الصفر. عند التحويم، نقوم بتغيير ذلك إلى القيمة 1 لإظهار النص، مع تغيير ارتفاع حاوية النص.

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

مع إضافة انتقالين، سيتغيّر الانطباع تمامًا. وها هي النتيجة.

يبدو الانتقال الأول (المكتوب بالصياغة المختزلة هذه المرة) كما يلي:

transition: all 0.5s cubic-bezier(.48,-0.28,.41,1.4);

يخبر هذا المتصفحَ بأنّ عليه تحريك جميع الخاصيات على مدى 0.5 ثانية، مع استخدام انتقال cubic-bezier لجعله يرتد. وفي هذه الحالة، فهو يؤثر على ارتفاع حاوية النص.

الانتقال الثاني يجعل النص يتحرك. سنستخدم هنا دالة التوقيت ease-out:

transition: all 0.4s ease-out;

يمكننا تحقيق الكثير من التأثيرات من خلال تغيير الحالات في وضع التحويم. في هذا المثال، يُعطَى لارتفاع العنصر div ذو الصنف info وللفقرة الموجودة داخله عندما يكونان في الحالة ‎.card: hover.

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

يمكنك مشاهدة هذا المثال على CodePen.

انتقالات متعددة على عنصر واحد

بالإضافة إلى استخدام عدة انتقالات على عدة عناصر، يمكننا أيضًا استخدام عدة عمليات انتقال على عنصر واحد.

يمكن استخدام ذلك عندما تحتاج إلى تغيير خلفية عنصر ما بشكل منفصل عن حدوده. إذ قد يكون تطبيق انتقال واحد على جميع الخاصيات غير مناسب.

يمكننا تحقيق ذلك من خلال الجمع بين عدة انتقالات في نفس التعليمة، حيث يتم فصل الانتقالات بفواصل.

مثلًا:

transition: background 1s ease-out, border 0.5s linear;

ينطبق الانتقال الأول هنا على الخلفية فقط، أما الثاني (بعد الفاصلة) فينطبق فقط على الحدود. هذا يعني أنّ حالة التحويم التي تغيّر الخلفية ستستغرق ثانية واحدة، فيما سيستغرق انتقال الحدود 0.5 ثانية.

تمرين

في هذه المقالة درسنا كيف يمكن التعامل مع عدة تأثيرات عبر انتقال واحد، وكيف يمكن استخدام عدة انتقالات معًا. يجدر بك إلقاء نظرة على الأمثلة في CodePen:

• مثال 1: زر فني
• مثال 2: بطاقة Cat Hover

هل يمكنك استخدام هذه الأنواع من الانتقالات في مشروع تعمل عليه حاليًا؟

لقد غطينا الكثير حتى الآن. سوف نلقي في المقالة التالية نظرة على كيفية تطبيق هذه الانتقالات باستخدام JavaScript.

المصادر

• ترجمة وبتصرف للفصل multiple transitions من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضا

• المقالة التالية: الانتقالات وجافاسكربت
• المقالة السابقة: دوال التوقيت
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

دالة التوقيت (timing function) تتحكم في وتيرة وسرعة التغيرات التي تحدث إبّان الانتقال (transition). باستخدام دوال التوقيت، يمكن جعل الانتقالات أكثر حيوية.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

فيما يلي مثال للانتقال باستخدام دالة توقيت خطية، إذ تتحرك جيئةً وذهابًا بوتيرة ثابتة.

قارن هذا بهذا المثال الذي يستخدم دوال التوقيت المسماة cubic-bezier. سترى فرقًا كبيرًا في وتيرة الحركة.

في هذا المثال، سنستخدم دالة cubic-bezier مخصصة:

تجعل مقاربة cubic-bezier في هذا المثال التحريكات تتراجع إلى الوراء قليلاً قبل التحول بسرعة إلى الحالة الثانية، حيث تتجاوزها فعليًا، ثم تعود إليها.

أمثلة CSS التي أعطيناها في البداية، وحالة التحويم (hover state) في كل الأمثلة تعتمد على دالة التوقيت.

سنلقي نظرة على كل تلك الدوال، ونتعرف على كيفية تأثيرها على الطريقة التي تتحرك بها العناصر.

إذا كنت ترغب بالتجريب على هذه الأمثلة، فقد أعددت مشروعًا على CodePen يمكنك الدخول إليه والتعديل عليه.

Linear

يتغير التسارع الخطي (linear transition) بمعدل ثابت من البداية إلى النهاية. ونظرًا لعدم وجود منحنى في الانتقال، فهو لا يتسارع أو يتباطأ. يمكن أن يكون هذا مفيدًا إن كنت تريد إنشاء تحريك يحتاج إلى حركة ثابتة، مثل مشهد خلفية نافذة قطار متحرك، أو الدوران الثابت.

Ease-in

تبدأ دالة التسارع المتباطئ عند الانطلاق (ease-in timing function) ببطء وتتسارع في نهاية الانتقال. بشكل مشابه لكرة تتدحرج من أعلى التل، حيث تبدأ ببطئ، وتنتهي بسرعة كبيرة في الأسفل.

Ease-out

دالة التسارع المتباطئ عند التوقف (ease-out timing function) تتصرف بشكل معاكس لدالة التسريع الداخلي. إذ تبدأ بسرعة، ثم تتباطئ في نهاية الانتقال. هذا مفيد في الحالات التي تحتاج فيها إلى إعطاء الزائر شعورًا بأنّ شيئًا ما يندفع من خارج الشاشة ثم يبطئ للتوقف.

Ease-in-out

دالة التسارع المتباطئ عند الانطلاق والتوقف (ease-in-out timing function)، هي مزيج من دالتي التسريع الداخلي والخارجي. إذ تبدأ ببطء، وتتسارع خلال الجزء الأوسط من الانتقال، ثم تتباطأ عند النهاية. يمكن أن تمثّل سيارة تبدأ من حالة توقف تام، ثم تتسارع، ثم تبطئ قبل التوقف. كما قد تكون مفيدة لإنشاء تحريك يمثل عملية التحميل.

Cubic-bezier

جميع دوال التوقيت التي رأيناها حتى الآن هي أمثلة لمنحنى cubic bezier. وهو منحنى يصف "شكل" دالة التوقيت. وهكذا، فإنّ تحديد دالة توقيت cubic-bezier يكافئ إنشاء دالة توقيت خاصة بنا.

تتألف دوال توقيت cubic-bezier من 4 قيم، تمثل إحداثيتين (co-ordinates).

صياغة cubic-bezier قد تبدو على الشكل التالي:

transition-timing-function: cubic-bezier(1,-0.49,.13,1.09);

الإحداثيتان هنا هما (‎1, -0.49) و (‎.13, 1.09). على الرسم البياني تبدو كما يلي:

بدلاً من إنشاء المنحنيات يدويًا، فأنا أستخدم موقع cubic-bezier.com. سيمكّنك هذا الموقع من إنشاء بعض التأثيرات الرائعة.

تصبح منحنيات cubic-bezier ممتعة عند استخدام قيم أكبر من 1، إذ من الممكن إنشاء انتقالات تتخطى الحدود وترتد.

Steps

في حين تعتمد معظم دوال التوقيت على المنحنيات، فإنّ الدالة steps تُقسّم عملية الانتقال إلى مجموعة من المراحل، وتقفز من مرحلة إلى التي تليها. ‎على سبيل المثال، إذا حددت القيمة steps(4)‎، فإنّ مدة الانتقال ستقُسّم إلى 4 قفزات منفصلة (انظر الصورة أعلاه).

هذا مفيد للتحريكات المفاجئة. على سبيل المثال، دوّار التحميل (loading spinner)، أو شخصية متحركة للعبة فيديو. من خلال تعيين موضع الخلفية في بداية سلسلة الإطارات (frames)، يمكن استخدام دالة التوقيت steps للقفز من إطار لآخر، وإحداث شعور بالحركة.

لمشاهدة مثال على ذلك، شاهد التحريك Twitter fave button.

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

يمكننا تحديد الخيار المناسب عند تحديد الخطوات:

transition: all 2s steps(10, start);
transition: all 2s steps(10, end);

تمرين

تتمة للتمرين السابق: حاول تغيير قيمة transition-timing-function، وشاهد كيف يغير ذلك الطريقة التي يظهر بها الانتقال.

يمكنك أيضًا محاولة تغيير القيم في هذا المثال التوضيحي. من الناحية الفنية، فهي تحريك (animation) وليست انتقالًا (transition)، لكنّ دالة التوقيت تنطبق بنفس الطريقة.

المصادر

• ترجمة وبتصرف للفصل timing functions من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: الانتقالات المتعددة
• المقالة السابقة: خاصيات الانتقالات
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

تعلّمنا في المقالة الماضية كيفية عمل الخاصية transition، وسنلقي في هذه المقالة نظرة على خاصيات الانتقالات.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

الصياغة المختزلة مقابل الصياغة المطولة

عند كتابة شيفرة CSS، يمكننا في كثير من الأحيان اختزال عدة خاصيات في خاصية واحدة مختزلة. على سبيل المثال، الصياغة المختزلة للخاصية padding تُكتب على النحو التالي:

padding: 10px 20px 15px 25px;

وهذا يكافئ:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;

يمكننا بالطريقة نفسها كتابة الخاصية transition بشكل مختزل:

transition: all 0.5s 1s linear;

وهذا هو الشكل العام:

transition: [property] [duration] [delay] [timing-function];

يمكن كتابة كل واحدة من هذه الخاصيات بشكل منفرد:

transition-property: all;
transition-duration: 0.5s;
transition-delay: 1s;
transition-timing-function: linear;

لنلق نظرة على هذه الخاصيات.

الخاصية transition-property

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

الخاصية transition-duration

تمثل قيمةُ الخاصية transition-duration المدةَ التي يستغرقها الانتقال. فترة انتقال تساوي 3s (ثلاث ثوانٍ) ستكون أطول بثلاث مرات من فترة انتقال تساوي 1000ms.

الخاصية transition-delay

تخبر الخاصية transition-delay المتصفح بالانتظار قبل تطبيق الانتقال. هذه قيمة زمنية، ويمكن تحديدها بالثانية أو الميلي ثانية(ms). على سبيل المثال، 3s تكافئ ثلاث ثوان، و100ms تكافئ مئة ميلي ثانية. بشكل مكافئ، يمكنك كتابة تلك القيمة على شكل 0.1s. الأمر متروك لك.

الخاصية transition-timing-function

تستخدِم كل من الانتقالات (transitions) والتحريكات (animations) دوال التوقيت (timing functions). تحتاج دوال التوقيت إلى فقرة خاصة بها، لذا سنؤجل الحديث عنها إلى المقالة التالية. لكن بإيجاز، دوال التوقيت تعطي للتحريكات حيوية.

الأشياء التي لا يطبّق الانتقال عليها

رغم أنه يمكن استخدام الانتقالات على الخاصيات size و colour و border و background-position وغيرها، إلا أنّ هناك بعض الخاصيات التي لا يمكن تطبيق الانتقال عليها. فمثلًا، لا يمكن تطبيق الانتقال على عائلة الخطوط font-family، لأنّ هذا يعني أنّ على المتصفح إنشاء إطارات مفتاحية (keyframes) بين صورتين مختلفتين تمامًا من الخطوط.

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

لكن يمكن تحريك خاصيات من قبيل opacity و background-position. وعن طريق تحريك صور الخلفية أو إخفائها، يمكنك إنشاء تأثيرات جذابة.

يمكنك مشاهدة مثال Baymax، حيث يتم تحريك صورة الخلفية لإنشاء حركة.

يتم استخدام تأثير مماثل لإحداث تأثير اللمعان على الأزرار، حيث يتم تحريك تدرج الخلفية في مقدمة الزر.

تمرين

لقد أنشأت مثالًا على Codepen لتجربة الانتقالات.

المثال يقوم بالانتقال من شكل الماس (diamond shape) إلى شكل الدائرة. حاول تغيير بعض الخاصيات لمعرفة ما سيحدث.

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

المصادر

• ترجمة وبتصرف للفصل transitions-properties من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: دوال التوقيت
• المقال السابقة: تطبيق عملي: الانتقالات
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

الآن وبعد أن قدمنا الخاصيتين transition و animation، فقد حان الوقت للتعمق أكثر في الانتقالات (transitions)، ومطالعة بعض الأمثلة.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

الانتقالات

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

الخاصية transition هي خاصية من خاصيات CSS. مثلها مثل الخاصيات height أو width أو border.

يمكننا برمجة الانتقالات في CSS على النحو التالي:

transition: background 0.5s linear;

في هذه الحالة، نقول للمتصفح أنّ أيّ انتقال لخاصية الخلفية (background) سيستغرق نصف ثانية، إضافة إلى استخدام دالة التوقيت "الخطي" (linear).

قد تتسبب الخاصية المذكورة أعلاه في تغيير خلفية الزر عند تمرير مؤشر الفأرة فوقه:

button {
  background: white;
  transition: background 0.5s linear;
}

button:hover {
  background: green;
}

لاحظ الخاصية transition في المحدد button، والتي تقول للمتصفح أن يطبّق الانتقال على أي تغيير في الحالة، مثل التغيير الذي يحدث عن التحويم (hover)، وكذلك عند العودة إلى الحالة الأصلية بعد التحويم.

إذا طبَّقنا الخاصية transition على حالة التحويم (hover) وحسب، فلن يتم الانتقال إلا إلى حالة التحويم، ولكن ليس عند العودة للحالة الأولى.

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

مثال: انتقال الزر

إليك مثالًا في CodePen يوضح تأثير التحويم (hover effect). في CodePen، يمكنك إجراء تغييرات على HTML و CSS ورؤية النتائج مباشرة.

الشيء المهم الذي ينبغي التركيز عليه هو الخاصيات التي تبدأ بالبادئة transition-‎.

transition-property: all;
transition-duration: 0.4s;
transition-timing-function: ease-out;

تخبر هذه الشيفرة المتصفح بنوع الحركة التي ينبغي إنشاؤها عند الانتقال من حالة عدم التحويم (non-hover state)، إلى حالة التحويم (hover state). كما تُخبر المتصفح بالتحريك (الانتقال) التدريجي لكل الخصائص (الألوان والحجم والموضع) على مدار 0.4 ثانية.

حاول تغيير بعض هذه القيم. على سبيل المثال، قم بتغيير "0.4s" إلى قيمة أطول، مثل "2s" (ثانيتين). كيف يبدو التحريك؟ يمكنك كذلك تغيير الخاصية من all إلى background.

لإنشاء تأثير ممتع، حاول تغيير قيمة transition-timing-function من ease-out إلى:

transition-timing-function: cubic-bezier(.59,-0.26,.33,1.42)

دالة التوقيت cubic bezier تضفي على الحركة متعة وجاذبية. سنعود لدوال التوقيت بمزيد من التفاصيل في المقالات التالية.

البادئات وتوافق المتصفحات

لم أضمِّن بادئات المتصفحات (vendor prefixes) في شيفرات الأمثلة. وذلك لتسهيل قراءة الشيفرة، ولكن في حال كنت تستخدم الشيفرة في مرحلة الإنتاج فسيكون عليك إضافتها.

أحب استخدام بادئ تلقائي Autoprefixer (وهو خيار متاح في Codepen، لتفعيله اضغط على أيقونة الإعدادات "cog" في قسم CSS)، ويمكن تفعيلها باستخدام أدوات البناء، مثل Grunt أو Gulp. بالمقابل، يمكنك كتابتها يدويًا على النحو التالي:

-webkit-transition: ...;
-moz-transition: ...;
transition: ...;

تمرين

قم بتحرير الزر في المثال، وأضف أفكارك الخاصة. يمكنك تغيير الشكل (shape)، أو الحد (border)، أو أي خاصية أخرى. جرّب واستمتع، فالهدف هو التأكد من أنك تفهم كيف يؤثر الانتقال على تأثير التحويم الخاص بالعنصر.

لمزيد من الإلهام، تحقَّق من تنسيق التحويم على هذا الرابط. هناك الكثير من الأمثلة الرائعة لاستلهام الأفكار.

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

المصادر

• ترجمة وبتصرف للفصل transitions in action من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: خاصيات الانتقالات
• المقال السابقة: مدخل إلى الحركات: مفهوم الحركة
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

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

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

في هذه الفقرة ستتعرّف على الخاصية animation.

التحريك في المتصفح

الانتقال (Transition) والتحريك (animation) متشابهان. فكلاهما يأخذ شكل خاصية CSS، ويحدث خلال مدة معيّنة، إضافة إلى خصائص أخرى للتحكم في كيفية إنشاء المتصفح للحركة.

في حين أنّ الانتقالات تدور حول جعل التغيير من الحالة "A" إلى الحالة "B" يبدوا سلسًا، فإنّ التحريكات هي وسيلة لوصف مراحل متعددة من الحركة.

التحريكات مفيدة لإنجاز الحركات المعقدة في المتصفح. في المثال أعلاه، هناك 3 حالات (A و B و C). الانتقال سينتقل من A إلى C وحسب، في حين تسمح لنا التحريكات بتحديد مرحلة وسطية B، بحيث يتم المرور على كل الخطوات الثلاث.

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

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

أمثلة

تعد حركة الزر "Save" التي نراها في Codepen مثالًا جيدًا على التحريكات.

هذه الحركة تساعد الناس على ملاحظة الزر وتذكر ضرورة حفظ عملهم.

يتكون التأثير من سلسلة من الإطارات المفتاحية (keyframes) التي تخبر المتصفح أن يهُزّ الزر من اليسار إلى اليمين. سنتعمّق أكثر في هذا الموضوع في فقرة الإطارات المفتاحية بشكل عملي .

يمكننا أن نفعل الكثير من الأشياء عبر تحريك ونقل الإطارات المفتاحية عبر CSS. هذا مثال آخر ثلاثي الأبعاد:

المثال CSS Mac Plus متوفر على موقع CodePen، وهذا دليل مفصل لكيفية تصميمه.

الانتقال أم التحريك؟

تحدث الانتقالات عندما ينقل المتصفح عنصرًا من حالة إلى أخرى (من A إلى B) مما يوحي بحدوث حركة. يتم تطبيق ذلك عادةً نتيجة لحدث ما، مثل التحويم (hovering) فوق عنصر ما، أو إضافة صنف أو إزالته باستخدام JavaScript.

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

سنعود للخاصية animation لاحقًا.

تمرين

هل يمكنك التفكير في طرق لاستخدام التحريكات في صفحات الويب الخاصة بك؟ حاول أن تنتبه للتحريكات التي تحدث على المواقع التي تتصفحها. ابحث عن الأشياء التي تتحرك بطريقة مُلفتة. فعلى الأرجح أنها تحريكات.

إذا قمت بتنزيل ملفي HTML و CSS الابتدائيَين، فقم بإلقاء نظرة على الخاصية 'animation'. على عكس الانتقالات، تحتاج التحريكات إلى جزء ثانٍ يسمى الإطارات المفتاحية (keyframes). حاول تغيير بعض القيم وشاهد ما يحدث.

المصادر

• ترجمة وبتصرف للفصل animations من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: تطبيق عملي: الانتقالات
• المقال السابقة: مدخل إلى الانتقالات: التنقل بين الحالات
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

سنلقي في هذه الفقرة نظرة على خاصية الانتقال transition.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

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

التحريك (Animation) في المتصفحات ليس جديدًا. فقد وفرت لنا بعض مكتبات JavaScript مثل Flash و Canvas وغيرها طرقًا للتحريك، ولكن صارت CSS، في الآونة الأخيرة، خيارًا إضافيًا.

الانتقالات

إحدى الطرق التي تتيحها CSS للتحكم في التحريك في المتصفح هي باستخدام الخاصية 'transition'. بلغة المتصفحات، فإنّ الانتقال (transition) يعني حركة من حالة إلى أخرى.

عندما نطبق عملية الانتقال على عنصر ما، فإننا نخبر المتصفح بأننا نريده أن ينقل، أو يحسب تلقائيًا، التغيير بين الحالات.

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

خصائص الانتقال

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

مثال آخر على الانتقالات المركبة:

سنناقش قريبًا كيفية استخدام الانتقالات للقيام بمثل هذه التحريكات.

مختصر القول

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

تمرين

كيف تبدو بيئة العمل خاصتك؟ قم بإلقاء نظرة على الشيفرة، وابحث عن الخاصية 'transition' في شيفرة CSS. هل يمكنك تخمين ما تفعله؟

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

سنلقي في المقالة التالية نظرة عامة على الخاصية 'animation'، وكيف تختلف عن الخاصية 'transition'.

المصادر

• ترجمة وبتصرف للفصل transitions من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: مدخل إلى الحركات: مفهوم الحركة
• المقالة السابقة: تجهيز بيئة العمل لإنشاء الحركات
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

اقتباس

"الناس لا يتعلمون المشي باتباع القواعد. بل يتعلمونه بالممارسة، والسقوط ثم النهوض". ريتشارد برانسون

سنتعلم في هذه الفقرة كيفية إنشاء تحريكات CSS ‏(CSS animations) ومشاهدتها في المتصفح. ولكن قبل البدء في كتابة الشيفرة، من الجيد أن نحدد سير العمل.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

هناك طريقتان للتطوير: التطوير في المتصفح، والتطوير المحلي (offline).

التطوير في المتصفح

إنّ أبسط طريقة للقيام بالتجارب الصغيرة هي التطوير عبر الإنترنت. الموقع الذي أستخدمه غالبًا هو CodePen. موقع JS Fiddle يُعد خيارًا ممتازًا أيضًا.

في بقية هذا الدرس، سأستخدم CodePen لكتابة الأمثلة، لذا فمن المهم أن تكون على دراية بطريقة عمله.

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

التطوير المحلي

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

الخيار الأبسط: إنشاء ملفّي HTML و CSS

الخيار الأبسط هو إنشاء ملف HTML ‏(filename.html) وربطه بملف CSS ‏(filename.css) . هذه طريقة مقبولة، لكن يمكن أن تكون بطيئة، حيث سيكون عليك التنقل كثيرًا بين المتصفح والمحرر.

لقد قمت بإنشاء مجموعة من ملفات HTML و CSS، يمكنك نسخها واستخدامها لبدء العمل. قم بتنزيلها من هنا.

Dreamweaver / Macaw / Muse / Coda / Sublime

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

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

أداة البناء Gulp

إذا كنت معتادًا على Github و Node ومعالجة الشيفرات، فقد ترغب في إعداد بيئة تطوير على جهازك.

أنا أحب أداة Gulp. فكونُها تعتمد على Node، يجعلها سريعة جدًا. يمكن تجميع الوحدات لتحويل Sass إلى CSS والإصلاح التلقائي لدعم المتصفح، والمزامنة مع المتصفحات بحيث لا تحتاج إلى تحديث المتصفح في كل مرة تحدّث الشيفرة.

إذا سبق واستخدمت Grunt، أو أدوات البناء الأخرى، فسيكون سير العمل مألوفًا.

لقد قمت بإنشاء مستودع Github لجعل التطوير المحلي أسرع. إذا كنت متعودًا استخدامَ Git، فزُر صفحة المستودع، وطالع الملف readme الذي يحتوي إرشادات الإعداد.

يمكنك تحسينه ومشاركته إذا رغبت في ذلك.

مختصر القول

أثناء تعلُّمك للتحريك في CSS، لا تتردد في التعديل على الشيفرة وتجربة أمور جديدة. قد ترغب في استضافة الشيفرة بنفسك، أو قد تُفضِّل استخدام CodePen، الأمر يعود لك. تأكد من أنه يمكنك تحويل الأفكار إلى شيفرة بسلاسة.

تمرين

سجّل في CodePen. أضف بعض شيفرات HTML و CSS، وانظر بنفسك كيف تتغير النتائج على الفور. من الجيد أيضًا مطالعة بعض أمثلة CodePen على الصفحة الرئيسية، وتعلم كيفية عملها.

اختياري: إذا كنت ترغب في تجربة التطوير المحلي، فقم بتنزيل ملفات البدء المحلية:

• الخيار الأساسي: ملفات HTML و CSS لبدء المشروع
• متقدم: ملفات البدء Gulp & Sass

المصادر

• ترجمة وبتصرف للفصل creative-environments من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: مدخل إلى الانتقالات: التنقل بين الحالات
• المقالة السابقة: ما هي استخدامات الحركات؟
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

اقتباس

"يتمحور التحريك إلى خلق شعور بالحياة". براد بيرد

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

قبل الدخول في الجانب الفني من التحريك (Animation) في CSS، سنناقش سبب القيام بالتحريك في المقام الأول.

أبلغُ من الكلمات

التحريك يمكن أن يوصل المعلومات بكفاءة، ويمكن استخدامه لجذب الانتباه، ولكن في جميع الحالات، فالهدف النهائي هو التواصل.

إدراج الحركة في التصميمات يجعلها أكثر كفاءة في إيصال المعلومة. الصور المتحركة أبلغ من الكلمات الملفوظة أو المكتوبة.

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

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

ما المقصود بالتحريك في مجال تطوير المواقع؟

للتحريك فائدتان رئيسيتان: توصيل المعلومات، وجذب الانتباه. يمكننا إيجاد عدة طرق لاستخدام هاتين الميزتين أثناء تصميم المواقع.

يمكن أن يكون التحريك معبرًا، كما يحدث عندما يتململ زر الحفظ في CodePen ليذكرنا بضرورة حفظ عملنا:

نحن ماهرون في رصد الحركة. لذلك، فإنّ إضافة القليل من الحركة إلى عناصر الصفحة يمكن أن يضفي على الصفحة الحيوية.

يمكننا أيضًا استخدام التحريك لتقديم المحتوى على الصفحة:

يمكننا عن طريق تحريك المعلومات على الصفحة أن نعرض للقُرَّاء معلومة إضافية قد لا يمكن إيصالها بالمحتوى الساكن. يلفت التحريك الانتباه إلى المحتوى الجديد المُضاف، ويرسم سياق تلك المعلومة الجديدة. فسيظهر المحتوى الجديد فجأة بدون تقنية التحريك، وقد يظنّ القارئ أنه كان هناك طوال الوقت.

يمكننا استخدام التحريك لرواية قصة:

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

مع القوة العظيمة تأتي المسؤولية

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

قد يعني هذا الاكتفاء بتحريك عنصر صغير فقط على صفحتك. فالأفضل ما قل ودل كما قيل.

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

مصدر إلهام

التحريك له تاريخ طويل وغني. كتبت مؤخرًا منشورًا حول مبادئ التحريك على الويب بعنوان مبادئ التحريك في صفحات الويب باستخدام CSS. المبادئ مستمدة من كتاب ديزني (1981) Illusion of Life: Disney Animation.

إذا كنت ترغب في التعمق في موضوع التحريك، فابحث عن مقاطع الفيديو التي تخص Animator’s Survival Kit videos. يوتيوب مليء بمصادر الإلهام والأفكار.

للحصول على أمثلة متميزة وإبداعية، خصص بعض الوقت لتصفح Hover States. يعرض هذا الموقع جميع أنواع الأمثلة المبدعة للتحريك على الشبكة. موقع Dribbble.com مفيد أيضًا.

على سبيل المثال، إليك مثالًا رائعًا من Dribbble يعرض مبادئ التصميم الخاصة بجوجل (Google’s Material Design principles. البحث عن "animation" هو أحد الطرق الجيدة للعثور على أفكار ملهمة.

أتحقق كذلك بانتظام من مستجدات موقع CodePen. فهو مصدر رائع لصور وأمثلة التحريك.

ملخص

• التحريك تقنية نافعة ومفيدة للغاية
• إذا استُخدِم بشكل صحيح، يمكن أن يكون أداةً مفيدةً في التصميم
• استخدمه لجذب الانتباه أو توصيل المعلومات
• لا تبالغ فيه
• إذا كنت تريد أن تتميز، فالتحريك قد يساعدك على ذلك

تمرين

فكّر في عملك ومشاريعك، وكيف يمكن أن يساعدك التحريك.

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

أخيرًا، ألق نظرة على مواقع مثل Hover States و Little Big Details و Dribbble. هذه المواقع ستساعدك كلما تحيّرت وأُغلِق عليك.

المصادر

• ترجمة وبتصرف للفصل why animate من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: تجهيز بيئة العمل لإنشاء الحركات
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

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

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

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

Hexa

تعتبر Hexa مكتبة مذهلة للتحريك، بسيطة وخفيفة الحجم. يمكن استخدام مؤثرات التحريك التي تقدمها لإحياء عناصر صفحة الويب من نصوص، صور، أيقونات وبقية العناصر الأخرى.

Vivify

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

Tachyons-animate

تعتبر Tachyons-animate مجموعة من صفوف CSS ذات الهدف المحدد وهو تنسيق الحركة باستخدام CSS.

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

‏Infinite – useful CSS animations

تعتبر Infinite-useful CSS animations مجموعة صغيرة من عناصر التحريك المفيدة للغاية والتي يمكن استخدامها لتوليد عناصر نابضة بطريقة التحكم بشفافية ومقدار التوسع  في العناصر، إنشاء رسوم متحركة للتنبيه، تدوير العناصر وغيرها.

Motion UI

تعتبر Motion UI مكتبة Sass قوية تفيد في إنشاء التحريكات والانتقالات، وقد أوجدت هذه المكتبة بالأساس كمكون ضمني في Foundation لتصميم البرامج، ولكن يمكن استخدامها كمكتبة منفصلة الآن، حيث يمكن استخدامها في إضافة تأثيرات السرعة، الانزلاق، تغيير الحجم وغيرها..

DynCSS

إن DynCSS هي مكتبة عظيمة تستخدم في التحريك والتي تقوم بتفسير الـ CSS الخاص بك من أجل إنشاء قواعد dyn بسيطة وديناميكية تبث الحياة في موقعك.

All animation

تعتبر All animation.css أداة تحوي العديد من عناصر التحريك الممتعة لجعل مشروعك أكثر تفاعلية وجاذبية بالنسبة للمستخدم، وهي عبارة عن عدة مؤثرات وعناصر تحريك ممكن استخدامها لإضافة تأثيرات ‏‎3D‎‏ وغيرها.

Animate.CSS

إن Animate.CSS هي مكتبة تحريك أخرى تعمل على جميع المتصفحات وتُستخدم لإضافة مؤثرات مثل الاهتزاز، ‏الاضطراب، النبض، التأرجح، التمايل..‏

Hover.CSS

تعتبر Hover.CSS مجموعة CSS3 خاصة بتأثيرات التأرجح hover effects وتُستخدم على الروابط ، الأزرار، الشعارات، SVG، الصور وغيرها من العناصر. كما أنها متوفرة كـ CSS، Sass، و LESS.

Effect.CSS

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

‎Magic CSS

تحوي Magic CSS على عناصر تحريك CSS3 بمؤثرات خاصة تضفي روحًا خاصة للموقع مثل المؤثرات السحرية، المؤثؤات الساكنة، المناظير، الدوران، التحجيم، الانزلاق..

CSSHAKE

إن CSSHAKE هي مجموعة من صفوف CSS لتحريك عناصر الصفحة DOM، وتثبيت هذه المكتبة سهل للغاية حيث يمكن تنزيل ملفات منفصلة لكل تأثير تحريك، توسيع، أو تصغير.

Repaintless CSS

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

Tuesday

إن Tuesday هي مكتبة CSS منفصلة تستخدم لإضافة تأثيرات الدخول والخروج مثل التمدد والتقلص، الهبوط، نزول المطر، المفصلات.

Obnoxious

تحوي Obnoxious تأثيرات ممتعة ولكن قد لاتناسب جميع المواقع ولكن بالتأكيد في حال استخدامها ستجعل موقعك يبرز بين المواقع الأخرى.

من هذه المؤثرات الاهتزاز، زيادة الحجم، الطي، الالتواء...

Flutter – CSS Image Hover Effects & Lightbox

تحوي مكتبة Flutter على 12 مؤثر تحريك خاص بالتأرجح hover فوق الصور، أنظمة الأعمدة الثنائية أو الثلاثية، بالإضافة إلى 4 أنواع من الإضاءة وغيرها.

Skloading – CSS3 Animations

تعتبر Skloading مكتبة تحريك CSS3 بتصميم قابل للتخصيص بشكل كامل حيث يمكنك تحميل واستخدام هذه التحريكات الخاصة بهذه المجموعة ضمن مشروعك.

Viavi CSS3 Scroll Effects

يمكنك من خلال Viaviتجربة مجموعة المغازل ‏spinners‏ والمحملات ‏loaders‏ التي يمكن استخدامها لجذب انتباه ‏المستخدم، وهي تصميمات مُتجاوبة بشكل كامل كما أنها تتكيف بشكل رائع مع أي حجم للشاشة.

CSS Bubbles and Tooltips

إن هذه المكتبة ( يمكن الإطلاع على المزيد من خلال CSS Bubbles and Tooltips) تقدم لك التلميحات والفقاعات في CSS والتي ستساعدك في حفظ الوقت، حيث ستجد مجموعة من أشكال الملاحظات جاهزة على شكل مربع أو غيوم أو فقاعات على شكل قلب وكذلك تلمحيات للموقع، النصوص، الواجهات، الشرائط والأزرار.

‎ Animatia – CSS Image Hover Effects

إن Animatia هي مكتبة خاصة بتأثيرات التأرجح hover التي تحدث للصور أو عناصر CSS أخرى مثل الأزرار وغيرها.

CSS Box and Text Shadows

يمكنك تنزيل صناديق CSS و ظلال النصوص (للإطلاع CSS Box and Text Shadows) واستخدامها مباشرة في موقعك وهي عبارة عن مجموعة فيها 40 تأثير ظلال يمكن تطبيقها على النصوص، الأزرار، الصور وغيرها.

HoverMe

تعد HoverMe مجموعة رائعة من عناصر تحريك CSS3 التي تحوي 4 صور أزرار، 10 أزرار تحميل، و 8 تحريكات متقدمة وغيرها.

‎Wickedcss

إن Wickedcss هي مكتبة تحريك CSS3 تمنحك المتعة في التعامل معها فهي تحوي العديد من المؤثرات مثل التقافز pound، الانزلاق، النبض، دقات القلب، الدوران

Woah

إن مكتبة Woah هي لمطوري الويب غريبي الأطوار، حيث يمكن استخدامها لإضافة تحريكات مميزة لأي عنصر من عناصر صفحة الويب.

Motion CSS

تعتبر Motion CSS مكتبة تحريك ممتعة وسهلة التثبيت فلا تحتاج لاستخدامها سوى إلى ربطها مع ملف CSS ثم يمكنك استخدام صفوف محددة لأي عنصر من عناصر الصفحة لتحريكه.

ترجمة -وبتصرّف- للمقال  25 Best CSS Animation Libraries لصاحبه Iggy مصمم موقع Line25

تحدثنا في الدرس السابق عن انتقال وتحول العناصر باستخدام CSS3، وفي هذا الدرس سنتحدث عن التّحريك:

التحريك Animation

تقوم خاصية الانتقالات transition في CSS3 بعمل عظيم من خلال بناء التفاعلات البصرية عند الانتقال من حالة إلى أخرى وهي مثالية من أجل هذا النوع من التّغييرات المبنية على تغيّر وحيد، ولكن عند الحاجة إلى مزيد من التّحكم مثل الحاجة إلى الانتقال بين عدة حالات عندها يتم استخدام التحريك animation.

تحديد إطارات العمل الرئيسية Keyframes

للبدء بعملية التحريك باستخدام CSS3 يجب أولًا تحديد عدة نقاط أساسية يمر بها العنصر بشكل إجباري، ولتنفيذ ذلك نستخدم القاعدة @keyframes والتي تتضمن اسم التحريك animation name ونقاط التحريك الأساسية وخصائصهم المساهمة في تحريك العنصر.

@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 244px;
    top: 100px;
  }
  100% {
    left: 488px;
    top: 0;
  }
}

ملاحظة: لابد من استخدام البادئات التي تدعم المتصفحات vendor prefixing مع القاعدة keyframe، كما هو الحال في جميع خصائص الانتقالات والتحريك، حيث سيكون شكل البادئات بالشكل التالي:

• @-moz-keyframes
• @-webkit-keyframes
• @-o-keyframes

نلاحظ أنه تمّ تعريف عنصر الحركة animation بالإسم slide وذكر اسمه مباشرة بعد اسم القاعدة keyframes@ كما تم تحديد الإطارات المختلفة لهذا التحريك من خلال تحديد عدة نقاط أساسية ضمن الإطار هي النسب المئوية ابتداءًا بالقيمة 0% إلى القيمة 100% مع ذكر 50% كقيمة وسطية، أما الكلمات المفتاحية From وto فتُستخدم للتبديل بين مكاني الـ %0 و %100 كما نريد. كما أنه يمكن استخدام نقاط متوسطة إلى جانب النقطة الموجودة عند الـ %50. وقد تم إدراج خصائص العنصر الذي نقوم بتحريكه كقائمة داخل كل نقطة من نقاط التحريك كما فعلنا في المثال السابق حيث اعتبرنا أن left و top هي الخصائص.

وتتم عملية التحريك animation من خلال تطبيق الانتقال transition بين النقاط الأساسية التي حددنا في الأعلى من خلال النسب المئيوة ولكن لأكثر من مرة (في هذه الحالة نطبق انتقال أول بين 0% و50% ثم آخر إلى 100%)

سنقوم بتطبيق التحريك على الكرة الخضراء والتي يتم بناؤها في html:

<div class="stage">
  <figure class="ball"></figure>
</div>

والنّتيجة كما في الشّكل التّالي:

وسنشرح الآن بالتفصل طريقة إضافة خصائص العناصر للوصول إلى عملية التحريك السابقة.

خاصية الاسم Animation Name

الآن بعد أن حددنا الإطار الأساسي للتحريك، نحتاج إلى إسناد هذا التّحريك المعرف للعنصر، ولفعل ذلك نستخدم الخّاصية animation-name التي تقوم على تعريف القاعدة keyframe@ كقيمة لهذه الخاصية، مع العلم أن هذا التّعريف يتم على العنصر الذي نريد تطبيق الحركة عليه.

.stage:hover .ball {
  animation-name: slide;
}

نلاحظ أننا أسندنا الإطار الرّئيسي لعملية التّحريك slide الّذي عرفنّاه في الأعلى إلى كلا الصّفّين المحددين لرسم الكرة stage و ball
ولكن تحديد قيمة animation-name فقط ليس كافٍ بل يجب تحديد خاصية animation-duration مع قيمتها لإخبار المتصفح الوقت الذي يحتاجه لإنهاء الحركة animation.

مدة التحريك animation duration، تابع التوقيت Timing Function والتأخير Delay

عندما نقوم بالتصريح عن الخاصية animation-name لعنصر ما فإن طريقة التّحريك ستكون مشابهة بشكل كبير للانتقال transition، حيث يحتاج لإكمال تعريفه إلى خصائص تحديد الفترة الزّمنية، تابع التوقيت، والتأخر الممكن أن يحصل.

لبدء عملية التّحريك نحتاج إلى تعريف الخاصية  animation-duration والّتي تشبه خاصية الفترة الزّمنية المستخدمة في الانتقالات transition حيث نحدد هذه الفترة باستخدام الثّانية او أجزاء الثّانية.

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
}

كما يمكن تحديد تابع التّوقيت animation-timing-function وقيمة التّأخير animation-delay  على التّتالي. وتشبه هذه الخصائص مثيلاتها من الخصائص المستخدمة في الانتقالات، إن قيمة هذه الخّاصيات تعمل بشكل مشابه لعملها في الانتقالات transitions.

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
}

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

<div class="stage">
  <figure class="ball"></figure>
</div>

أما تعليمات التحريك في CSS3 فهي:

@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 244px;
    top: 100px;
  }
  100% {
    left: 488px;
    top: 0;
  }
}
.stage {
  height: 150px;
  position: relative;
}
.ball {
    height: 50px;
    position: absolute;
    width: 50px;
}
.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
}

ونتيجة هذه التعليمات تظهر حركة الكرة بالشكل

تخصيص التحريك:

يتيح التّحريك إمكانية تخصيص الطّريقة التي يتصرف فيها العنصر، مثلًا، عدد مرات تكرار التّحريك والجّهة التي ينتهي إليها التحريك.

تكرار التحريك:

افتراضيًا يتم تنفيذ التحريك المعرّف مرة واحدة فقط من بدايته لنهايته، ولجعل هذا التّحريك يعيد نفسه عددًا من المرات نستخدم خاصية animation-iteration-count، حيث أن القيمة المعطاة لهذه الخّاصية ممكن أن تكون عدد صحيح محدد أو infinite والتي تعني استمرار التنفيذ عدد لانهائي من المرات.

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
  animation-iteration-count: infinite;
}

نلاحظ أننا وضعنا قيمة التّكرار لانهاية وبالتّالي سيتم التّكرار بشكل دائم.

اتجاه التحريك:

بالإضافة إلى امكانية تحديد عدد مرات تكرار تحريك العنصر، يمكن أيضًا تحديد اتجاه الحركة الكلي باستخدام خاصية animation-direction والتي تأخذ القيم:

• Normal: والتي تقوم بتشغيل التحريك كما هو محدد من البداية للنهاية
• Reverse: وتقوم بتشغيل التحريك عكس المعرف من خلال القاعدة @keyframes أي ستكون البداية من 100% ثم تعمل بالعكس وصولًا إلى نقطة التعريف 0%
• Alternate: وتقوم بتشغيل التحريك نحو الأمام أي من النقطة 0% إلى النقطة 100% ثم العودة إلى الخلف من النقطة 100% إلى 0% ويمكن تحديد عدد مرات تكرار هذه الطريقة من خلال الخاصية animation-iteration-count التي يمكن أن تكون عدد صحيح من المرّات ويبدأ العد من الرقم 1.
  ولكن هذه الخاصية ستعمل بالعكس عند تشغيل أي تابع في خاصية animation-timing-function أي في حال استخدمنا ease-in فسيكون اتجاه الحركة من 0% إلى 100% أمّا إذا استخدمنا ease-out فعندها سيكون التحريك من 100% إلى 0%.
• Alternate-reverse: تجمع بين alternate و reverse حيث يكون اتجاه الحركة عند تنفيذ التحريك هي بالعكس أي من 100% إلى 0% ثم العودة مرة أخرى 100%.

  .stage:hover .ball {
    animation-name: slide;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: .5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  بناءً على التعليمات السابقة سيتم التحريك من البداية نحو النهاية بحسب قيمة خاصية الاتجاه alternate وسيتم التكرار عدد لانهائي من المرات، أما شكل تابع الحركة فهو ease-in-out
  

حالة تحريك العنصر:

إن خاصية animation-play-state تتيح تشغيل وإيقاف التّحريك باستخدام القيم running وpaused بالتتالي، حيث أن طريقة عمل هذه الخاصية أنه عندما نشغل عنصر حركة وهو بحالة ايقاف paused، فإنه سيستمر من الحالة الحالية بدلًا من أن يبدأ من البداية من جديد.
في هذا المثال، خاصية animation-play-state ستضبط عند paused، عند تفعيل حالة الحركة لدى الدائرة بالضغط عليها سنلاحظ كيف يتوقف عنصر التحريك حتى نقوم بتحرير المؤشر.

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.stage:active .ball {
  animation-play-state: paused;
}

وتظهر النتيجة كما في الشكل:

خاصية Fill Mode:

تحدد خاصية animation-fill-mode هيئة العنصر قبل وبعد تشغيل التحريك.إن هذه الخاصية تقبل القيم:

• none أي لا يتم تطبيق أي تغيير على العنصر قبل أو بعد تشغيل التحريك.
• forwards ستحتفظ بالهيئة المحددة للعنصر بآخر إطار keyframe كان داخله العنصر وبالتالي سنلاحظ أن هذه الحالة تتأثر بقيم خصائص أخرى، هي خاصية اتجاه الحركة animation-direction وعدد مرات التكرار animation-iteration-count.
• backwards ستطبق الهيئات عند أول إطار رئيسي مباشرة عند تعريف هذه الخاصية قبل بدء تنفيذ التحريك. وهذا يتضمن تطبيق هذا الشكل في أي وقت قد يكون تم ضبطه من خلال خاصية التأخير. مع العلم أن هذه القيمة تتأثر بخاصية الاتجاه animation-direction.
• both تجمع بين القيمتين forwards و backwards معًا.

  .stage:hover .ball {
    animation-name: slide;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: .5s;
    animation-fill-mode: forwards;
  }
  .stage:active .ball {
    animation-play-state: paused;
  }

  وسيظهر شكل حركة الدّائرة هكذا:

اختزال تعليمات التحريك:

لحسن الحظ يمكن تحديد صيغة مختصرة لعناصر التحريك، كما هو في الانتقالات. ويتم ذلك باستخدام الخاصية animation حيث يمكن ترتيب القيم التابعة للخصائص الأخرى داخل الخاصية animation بالشكل التالي:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

حيث يمكن اختزال التعليمات في الأمثلة السابقة إلى الشكل:

.stage:hover .ball {
  animation: slide 2s ease-in-out .5s infinite alternate;
}
.stage:active .ball {
  animation-play-state: paused;
}

وكما نلاحظ أنه لايتم الفصل بين قيم الخصائص بفاصلة أبدًا.

ترجمة-بتصرف- لمقال: Transition & Animation

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

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

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

الانتقالات Transition:

كما ذكرنا سابقًا يتم تنفيذ عملية الانتقال للعنصر من خلال تغيير حالة العنصر، حيث يجب تعريف كل حالة والتصميم style الذي سيُطبق على العنصر في هذه الحالة، وأسهل طريقة لتحديد الحالة التي يقع فيها العنصر الآن والتصميم الذي يجب أن يأخذه من خلال استخدام صفوف اللاحقة pseudo-classes وهي :target - :active - :focus - :hover ويوجد أربع خصائص مرتبطة بالانتقال transition بشكل عام وهي transition-property، transition-duration، transition-timing-function و transition-delay مع ملاحظة أنه يمكن استخدام البعض منها فقط لبناء عملية الانتقال.

سنستعرض في المثال التالي طريقة الانتقال الّتي ستتم لمدة ثانية واحدة من خلال تغيير لون خلفية المربع المرسوم عند تمرير المؤشر فوقه:

نبني المربع ككتلة div من خلال تعليمة html

<div class="box">Box</div>

و لتنفيذ الانتقال على المربع المرسوم يتم ذلك من خلال تعليمات CSS فقط وهي:

.box {
  background: #2db34a;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}
.box:hover {
  background: #ff7b29;
}

حيث يظهر المربع باللون الأخضر وعند تمرير المؤشر فوقه يتغير لون خلفية المربع وتم تحديد ذلك من خلال الخاصية transition-property لمدة ثانية واحدة فقط وتم تخصيص الزمن من خلال الخاصية transition-duration

ويمكن معاينة المثال بشكل مباشر من الرابط.

ومن الأفضل كتابة التعليمات من خلال إضافة  vendor prefixes والتي تعمل على تأمين دعم كافة المتصفحات

.box {
    background: #2db34a;
    -webkit-transition-property: background;
       -moz-transition-property: background;
         -o-transition-property: background;
            transition-property: background;
    -webkit-transition-duration: 1s;
       -moz-transition-duration: 1s;
         -o-transition-duration: 1s;
            transition-duration: 1s;
    -webkit-transition-timing-function: linear;
       -moz-transition-timing-function: linear;
         -o-transition-timing-function: linear;
            transition-timing-function: linear;
}
.box:hover {
  background: #ff7b29;
}

خاصية transition-property

تحدد خاصية transition-property خصائص العنصر التي سوف يتم تعديلها تزامنًا مع تنفيذ خصائص الانتقال الأخرى، ولايتم تغييير قيمة أي خاصية أخرى للعنصر غير مذكورة ضمن هذه الخاصية.

في المثال السابق تم تغير قيمة background التابعة للعنصر لأنها ذكرت كقيمة للـ transition-property خلال زمن قدرة ثانية واحدة، في حين أن الخصائص الأخرى للعنصر ستبقى محافظة على قيمتها ولن تتأثر بالقيم المعطاة للـ transition-duration وtransition-timing-functionفي حال كنا نريد تغيير قيمة أكثر من خاصية عند تطبيق الانتقال يمكن إدراجها في الخاصية نفسها transition-property مع وضع فواصل فيما بينها.

.box {
    background: #2db34a;
    border-radius: 6px
    transition-property: background, border-radius;
    transition-duration: 1s;
    transition-timing-function: linear;
     }
  .box:hover {
    background: #ff7b29;
    border-radius: 50%;
     }

نلاحظ أن الخصائص التي نريد تغييرها عند الانتقال هيَّ background و border-radius وتم تحديد الانتقال بـ .box:hover حيث يتم تنفيذها كما في الّشكل:

خصائص العنصر القابلة للانتقال

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

أهم الخصائص التي يمكن تطبيق الانتقال عليها:

خاصية transition-duration

يتم تعيين المدة الزمنية التي تتم فيها عملية الانتقال باستخدام خاصية transition-duration وتحديد قيمتها من خلال استخدام وحدات الزمن العامة بما في ذلك الثانية (s) والميلي ثانية (ms) كما يمكن أن تكون القيمة عبارة عن كسور مثل أجزاء من الثانية (0.2s).

عندما يُطبق الانتقال على أكثر من خاصية للعنصر يمكن أن يتم تطبيق قيمة فترة زمنية محددة لكل خاصية، أي كما تحتوي خاصية transition-property على أكثر من قيمة يمكن أن تحتوي خاصية transition-duration أيضًا على أكثر من قيمة، وكل خاصية تأخذ المدة الزمنية حسب ترتيب قيم الخصائص (في المثال الذي سنستعرضه ستكون الفترة الزمنية 0.2s تابعة لخاصية background، أما خاصية border-radius فستكون لمدة ثانية واحدة) ويمكن أيضًا أن نُعطي مدة زمنية واحدة لجميع الخصائص المراد تغييرها.

.box {
  background: #2db34a;
  border-radius: 6px;
  transition-property: background, border-radius;
  transition-duration: .2s, 1s;
  transition-timing-function: linear;
}
.box:hover {
  background: #ff7b29;
  border-radius: 50%;
}

والنتيجة تكون واضحة كما في الصورة:

خاصية سرعة الانتقال Transition Timing

تُستخدم خاصية transition-timing-function لضبط سرعة الانتقال. حيث يمكننا تحديد المدة الزمنية من خلال الخاصية transition-duration. ويمكن إعطاء خاصية transition-timing-function عدة قيم هي:

• liner: عند إعطاء الخاصية المذكورة هذه القيمة فإن الانتقال بسرعة ثابتة خلال المدة الزمنية المحددة.
• ease-in: تعني هذه القيمة أن الانتقال يبدأ ببطئ ويستمر بالتسارع طول فترة الانتقال.
• ease-out: تعني أن الانتقال يبدأ بسرعة ويستمر بالتباطؤ طوال فترة الانتقال.
• ease-in-out: الانتقال يبدأ ببطئ ويستمر بالتسارع حتى يصل إلى الوسط عندها يبدأ بالتباطؤ مرة أخرى حتى انتهاء المدة المحددة للانتقال.

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

عندما يمتلك الانتقال عدة خصائص فإنه يتم تحديد عدة توابع لطريقة الانتقال، ففي مثالنا خاصية background كان تابعها هو linear أما خاصية border-radius فإن تابع الانتقال الخاص بها هو ease-in

.box {
  background: #2db34a;
  border-radius: 6px;
  transition-property: background, border-radius;
  transition-duration: .2s, 1s;
  transition-timing-function: linear, ease-in;
}
.box:hover {
  background: #ff7b29;
  border-radius: 50%;
}

كما هو واضح في الصورة، أو يمكن رؤية المعاينة المباشرة من هنا.

التأخير في الانتقال Transition Delay

يمكن أيضًا تعريف خاصية transition-delay بأنها تتحكم بتأخير تحول العنصر، فمن خلالها يتم تحديد الزمن الذي سيتم تأخير تحول العنصر بمقداره، ويحدد بالثواني أو الملي.

وكما هو الحال في جميع الخصائص الأخرى يمكن تحديد أكثر من قيمة منفصلة خاصة بالتأخير من خلال الفصل بينها بالفاصلة فقط.

.box {
  background: #2db34a;
  border-radius: 6px
  transition-property: background, border-radius;
  transition-duration: .2s, 1s;
  transition-timing-function: linear, ease-in;
  transition-delay: 0s, 1s;
}
.box:hover {
  background: #ff7b29;
  border-radius: 50%;
}

نلاحظ عند تنفيذ التعليمات السابقة أن لون الخلفية تغير مباشرة بدون أي تأخير زمني، وأن قيمة التأخير الأولى المقابلة للخلفية هي 0 ثانية، بينما شكل الحدود وانحنائها تغير بعد ثانية واحدة.

اختزال تعليمات الانتقال

من الممكن أن يصبح ملف التعليمات كبيرًا جدًا في حال أضفنا تعليمات الانتقال بشكل فردي، وسيكون الوضع أسوأ لو أضفنا البادئات الخاصة بدعم المتصفحات vendor prefixes.

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

ويتم ذلك من خلال استخدام الخاصية transition فقط ونكتب فيها قيم الخصائص بالتّرتيب التّالي:

1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay

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

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

.box {
  background: #2db34a;
  border-radius: 6px;
  transition: background .2s linear, border-radius 1s ease-in 1s;
}
.box:hover {
  color: #ff7b29;
  border-radius: 50%;
}

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

أولًا نبني الزر من خلال html

<button>Awesome Button</button>

ومن ثم نضيف تعليمات الانتقال على الزر من خلال CSS

button {
  border: 0;
  background: #0087cc;
  border-radius: 4px;
  box-shadow: 0 5px 0 #006599;
  color: #fff;
  cursor: pointer;
  font: inherit;
  margin: 0;
  outline: 0;
  padding: 12px 20px;
  transition: all .1s linear;
}
button:active {
  box-shadow: 0 2px 0 #006599;
  transform: translateY(3px);
}

وتظهر المعاينة كمافي الصورة:

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

أولًا نكتب تعليمات بناء بطاقة الصورة من خلال html

<div class="card-container">
  <div class="card">
    <div class="side"><img src="https://academy.hsoub.com/uploads/monthly_2016_01/SiteLogo-346x108.png.dd3bdd5dfa0e4a7099ebc51f8484032e.png" alt="أكاديمية حسوب"></div>
    <div class="side back">أكاديمية حسوب</div>
  </div>
</div>

ثم نبدأ بكتابة تعليمات تحريك البطاقة وقلبها إلى الجزء الآخر من خلال CSS3

.card-container {
  height: 108px;
  perspective: 600;
  position: relative;
  width: 346px;
  background: #444;
}
.card {
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  width: 100%;
}
.card .back {
  transform: rotateY(180deg);
}

حيث تُقلب البطاقة إلى الوجه الآخر عند مرور المؤشر فوقها، ويمكن رؤية المعاينة من الرابط المباشر

ترجمة-بتصرف- لمقال: Transition & Animation

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

دعم المتصفحات

إن المتصفحات التي تدعم الأشكال CSS Shapes Module 1 بالنسبة لنسخة الحاسب حتى نهاية عام 2017 كانت Chrome، Firefox، Opera و (Safari(WebKit، بينما لايقدم متصفح Internet Explorer هذا الدعم. ويختلف الأمر بالنسبة لنسخة المتصفحات الخاصة بالموبايل حيث أن متصفح Safari هو فقط من يدعم خاصية الأشكال. ومع ذلك فقد وصلت تقنية الأشكال في CSS المرحلة الأولى منها إلى أن جميع المتصفحات تتعرف على طريقة كتابة تعريف الأشكال Syntax الخاصة بها وتخصيصها وبالتالي تعتبر برمجة الأشكال مستقرة جدًا ولن يكون الوقت طويلًا حتى يتم تنفيذها بشكل كامل على جميع المتصفحات.
إن المرحلة الأولى من تطوير الأشكال في CSS يركز على الخصائص التي تغير من طريقة انسياب المحتوى حول الشكل أي أنها تركز على خاصية shape-outside بالإضافة إلى الخصائص الأخرى المتعلقة بها. ومن المتوقع أن استخدام هذه الميزة الجديدة في الأشكال عند CSS ودمجها مع الميزات الأخرى المتطورة مثل الإخفاء والقص Clipping and Masking، طريقة معالجة العنصر قبل عرضه CSS Filters، و مزج وتركيب العناصر معًا Compositing and Blending سيسمح لنا ببناء الأشكال وتصميمها بشكل احترافي متطور من دون الحاجة إلى المحررات المستخدمة في التصميم كالفوتوشوب و InDesign.
سيركّز بناء الأشكال في CSS مستقبلًا على طريقة التفاف المحتوى داخل الشكل نفسه أيضًا. فعلى سبيل المثال، من السهل اليوم بناء المعين باستخدام CSS حيث يتوجب علينا فقط تدوير العنصر بزاوية 24 درجة ثم تدوير المحتوى داخله وبالتالي يعود المحتوى ليتوضع أفقيًا ضمن الصفحة. ولكن المعين لن يكون هو الأب الحاوي container للمحتوى، وبالتالي سيبقى المحتوى مستطيل الشكل. ولحل هذه المشكلة يمكن استخدام الخاصية shape-inside والتي تقوم بجعل المحتوى يأخذ شكل معين داخل التصميم أيضًا.

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

يمكن تطبيق شكل على أي عنصر element من خلال استخدام خاصية الأشكال shape property. حيث نمرر خاصية الشكل كتابع shape function يمرر مجموعة من المعاملات parameters التي تعرف الشكل الذي نريد تطبيقه مثل نقطة المركز ونصف القطر إذا كان الشكل دائرة أو مجموعة من النقاط على المحيط إذا كان الشكل مضلعًا.

من الأشكال التي يمكن بناؤها باستخدام التوابع التالية

• ()circle
• ()ellipse
• ()inset
• ()polygon

حيث يعرف كل شكل من خلال مجموعة من النقاط. فبعض التوابع تمرر هذه النقاط كمعاملات، وبعضها الآخر يمرر نقطة واحدة ومقدار الإزاحات ولكن في النهاية جميعها ترسم الأشكال من خلال مجموعة من النقاط. حيث سنقوم بتعريف هذه المتحولات الممررة عند بنائنا للأشكال في المثال القادم من خلال هذه التوابع. كما يمكن تعريف الشكل من خلال استخراجه من صوة باستخدام قناة ألفا وذلك عند تمرير الصورة لخاصية الشكل حيث سيقوم المتصفح باستخراج الشكل بالاعتماد على shape-image-threshold. يُعرف أي شكل من خلال البكسلات التي تحوي قيمة ألفا أكبر من القيمة البدائية كما أن الصورة يجب أن تكون متوافقة مع شروط CORS وبالتالي في هذه الحالة إذا لم يتم إظهار الصورة في الصفحة لأي سبب (مثل أن تكون غير موجودة أو محذوفة) عندها ستيم إظهار شكل الإطار الخاص بها.
خصائص الشكل shape proprties التي تقبل أن تمرر التوابع التي ذُكرت في الأعلى كقيمة لها هي:

• shape-outside: تقوم هذه الخاصية بتخصيص طريقة التفاف المحتوى حول الشكل من الخارج.
• shape-inside: تقوم هذه الخاصية بتخصيص طريقة التفاف المحتوى داخل الشكل.

كما يمكن استخدام خاصية shape-outside بالتزامن مع استخدام خاصية shape-margin من أجل إضافة هامش حول الشكل الذي نخصص طريقة انسياب المحتوى حوله وبالتالي بناء فراغ صغير بين المحتوى والشكل. وبنفس الطريقة يمكن استخدام خاصية shape-padding مع خاصية shape-inside من أجل إضافة هامش داخلي بين المحتوى داخل الشكل وحدود الشكل. باستخدام خصائص الشكل وتوابعه يمكن تعريف الشكل كعنصر element من خلال إضافة سطر واحد من تعليمات CSS.

.element {
	shape-outside: circle(); /* content will flow around the circle defined on the element */
}

أو من خلال التعليمة التالية حيث ندخل لها رابط الوصول إلى الشكل الذي ستستخرج منه الشكل المطلوب.

.element {
	shape-outside: url(path/to/image-with-shape.png);
}

ولكن عند تطبيق هذا السطر من تعليمات CSS على الشكل لن يظهر الشكل المطلوب إلا إذا تحقق الشرطين التاليين:

1. يجب أن يكون العنصر element عائمًا floated حيث أنه من الممكن مستقبلًا أن نحدد الأشكال على العناصر غير العائمة ولكن ليس الآن.
2. يجب أن يكون العنصر لديه أبعاد واضحة لأنه سيتم استخدام الارتفاع والعرض لبناء العنصر ضمن نظام الإحداثيات.

يتم تعريف الأشكال من خلال مجموعة من النقاط لأنها تملك إحداثيات ديكارتية حيث أن نظام الإحداثيات الديكارتية هو الذي يُعرف من خلاله مواقع العناصر ضمن المتصفح لذلك عند تعريف العنصر element في المثال في الأعلى يتوجب علينا إضافة الارتفاع والعرض بشكل محدد.

.element {
	float: left;
	height: 10em;
	width: 15em;
	shape-outside: circle();
}

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

المربع المرجعي للأشكال

يتم تعريف وبناء أي شكل يُرسم باستخدام CSS داخل ما يسمى بالمربع المرجعي الذي يستعمل لرسم الشكل على العنصر. يمتلك أي عنصر ارتفاع وعرض بالإضافة إلى مربع هامش الذي يحدد المسافة بين العنصر وباقي العناصر في الصفحة margin-box، مربع المحتوى content-box، مربع الهامش الداخلي الذي يحدد المسافة بين المحتوى وحدود الشكل padding-box، مربع الحدود border-box.

حيث تُستخدم إحدى هذه المربعات كمرجع لرسم الشكل على العنصر. افتراضيًا يُستخدم مربع الهامش margin-box كنقطة البداية الأساسية لأي عنصر وبالتالي إذا أردنا تطبيق الشكل على العنصر سيتم أولًا إزاحة الشكل إلى الأسفل ثم تمديده من أسفل زاوية الهامش إلى باقي مربع الهامش margin-box. كما يمكن استخدام قيمة مربع أخرى كمرجع بالإضافة إلى مربع الهامش ويتم ذلك من خلال تمرير اسم المربع بجانب تابع الشكل ()circle إلى خاصية الشكل المُستخدمة shape-outside.

shape-outside: circle(250px at 50% 50%) padding-box;

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

تعريف الأشكال باستخدام التوابع

سنبدأ بمثال عن طريقة التفاف النص حول صورة شخصية لمستخدم دائرية الشكل مثل تلك الصور المستخدمة في الصفحات التعريفية عن الأشخاص

حيث ستكون التعليمات في ملف HTML لبناء الصورة وكتابة المحتوى

<img src="http://api.randomuser.me/0.3.2/portraits/men/7.jpg" alt="profile image" />

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?</p>

<p>Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.</p>

أما ضمن ملف CSS فسنستخدم تابع ()circle من أجل تطبيق الشكل الدائري على الصورة الشخصية التي وضعناها في ملف HTML. سنستخدم من أجل تدوير الصورة الخاصية border-radius حيث لا تمتلك هذه الخاصية أي تأثير على طريقة انسياب المحتوى داخل أو حول الصورة التي نطبق عليها الشكل. وبمعنى آخر لا تمتلك هذه الخاصية التأثير على منطقة المحتوى content area المتواجدة داخل العنصر element الذي قمنا ببنائه ولا على المحتوى الخارجي حول العنصر، وإنما يكون تأثيرها فقط على شكل الحدود الخاصة بالعنصر وخلفيته إن وُجدت. أي سيبقى المحتوى داخل العنصر مستطيل الشكل والمحتوى الموجود خارج العنصر سينظر ويتعامل مع العنصر نفسه كما لوكان مستطيل الشكل. أي أننا نقوم باستخدام الخاصية border-radius من أجل جعل الصورة فقط دائرية الشكل.

img {
	float: left;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	margin-right: 15px;
}

تبين الصورة السابقة الشكل الذي سيظهر به المحتوى حول الصور الدائرية في المتصفحات القديمة التي التدعم الأشكال في CSS، ولتغيير هذا الشكل المربع في الانسياب حول الصورة الدائرية سنقوم بتعديل التعليمات بما يتوافق مع الشكل الذي أضفناه من خلال استخدام خصائص الشكل

img {
	float: left;
	width: 150px;
	height: 150px;
	border-radius: 50%;

	shape-outside: circle();
	shape-margin: 15px;
}

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

circle() = circle( [<shape-radius>]? [at <position>]? )

إن علامة الاستفهام ? في التعليمة السابقة تشير إلى أن هذه المعاملات الممررة اختيارية ولكن في حال عدم تمريرها سيأخذ التابع القيمة الافتراضية الموجودة في المتصفح وهي رسم الشكل ابتدءًا من مركز العنصر الذي نطبق عليه الشكل. يتم تحديد طول نصف قطر الدائرة بأحد وحدات الطول (البكسل px، النقطة pt…) ويقوم المتصفح برسمه ابتداءً من نقطة المركز وصولًا إلى إحدى أضلاع المستطيل المرجع ويحدد ذلك الخاصية

• خاصية closest-side: وهي الخاصية الافتراضية وتعني رسم نصف القطر وصولًا إلى أقرب ضلع من أضلاع المستطيل.
• خاصية furthest-side: وتعني أن المتصفح سيرسم نصف القطر وصولًا إلى أبعد ضلع من أضلاع المستطيل

يمكن تحديد هذه الخاصية وتمريرها كمعامل لتابع رسم الدائرة عند خاصية shape-outside

shape-outside: circle(farthest-side at 25% 25%); /* defines a circle whose radius is half the length of the longest side, positioned at the point of coordinates 25% 25% on the element’s coordinate system*/

shape-inside: circle(250px at 500px 300px); /* defines a circle whose center is positioned at 500px horizontally and 300px vertically, with a radius of 250px */

يعمل تابع رسم الإهليلج (القطع الناقص) ()ellipse فهو يعمل بنفس الطريقة التي يعمل فيها تابع ()circle وبنفس القيم ماعدا أنه بدلًا من تمرير تابع واحد لنصف القطر يجب تمرير اثنين أحدهما من أجل طول نصف القطر على محور الإحداثيات X والآخر لنصف القطر على محور الإحداثيات Y

ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )

في حيث أن تابع ()inset يُستخدم لرسم شكل مستطيل مدور الزوايا ويمكن أن نجعل المحتوى ينساب حول هذه الزوايا بشكل دائري أيضًا.

ونمرر لتابع ()inset:

• أربع قيم إزاحة تحدد قيمة إزاحة الحواف بالنسبة لصندوق المرجع نحو داخل العنصر.
• معامل اختياري وهو قيمة تدوير الزوايا round حيث يتم تحديد القيمة من خلال border-radius بنفس طريقة استخدامها في تدوير الدائرة التي شرحناها سابقًا، ولكن هنا يجب تمرير أربع قيم.

inset() = inset( offset{1,4} [round <border-radius>]? )

من خلال التعليمات التالية سنقوم برسم مستطيل دائري الزاويا على عنصر عائم floated element

.element {
	float: left;
	width: 250px;
	height: 150px;
	shape-outside: inset(0px round 100px) border-box;
}

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

تعليمات CSS التي ستقوم بهذه العملية هي

img.right {
	float: right;
	height: 100vh;
	width: calc(100vh + 100vh/4);
	shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
}

يمكن تعيين إحداثيات النقط التي تعرف الشكل من خلال وحدات الطول أو من خلال النسب المئوية التي استخدمتها. ستُنتج التعليمات السابقة الشكل الذي شاهدناه في الأعلى حيث أنها لا تؤثر على باقي أجزاء الصورة الموجودة خارج الشكل المرسوم كما نلاحظ، لأن تطبيق شكل العنصر فقط يؤثر على منطقة تدفق المحتوى من دون أن يغيّر أي شيء في الخلفيات والحدود.
ومن أجل إظهار شكل المضلع الذي رسمناه فإننا بحاجة إلى قص أجزاء من الصورة خارج الشكل وذلك من خلال استخدام خاصية clip-path الموجودة في نموذج الإخفاء CSS Masking Module. تقوم خاصية clip-path على أخذ نفس شكل التابع المستخدم والقيم الممررة له. وبالتالي إذا استخدامنا نفس الشكل المضلع الذي مررناه للخاصية shape-outside فإن هذه الخاصية ستعمل على قص كل أجزاء الصورة خارج الشكل المحدد

img.right {
	float: right;
	height: 100vh;
	width: calc(100vh + 100vh/4);
	shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
	/* clip the image to the defined shape */
	clip-path: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
}

وستكون النتيجة النهائية لهذه التعليمات كما في صورة

في الوقت الحالي يتم دعم خاصية clip-path من خلال إضافة بادئة إليها أولًا، مثلًا ستعمل هذه الخاصية مع Chrome إذا أضفنا لها -webkit-. إن خاصية clip-path هي أفضل إضافة مع خصائص الأشكال الأخرى لأنها تساعد في إظهار الأشكال المُنشأة من خلال قص أي جز من العناصر خارج الشكل. تابع()polygon يأخذ أيضًا خيارًا آخر هو إما nonzero أو evenodd والتي تحدد كيفية التعامل مع المناطق داخل الشكل المضلع التي تتقاطع مع نفسها ولمعرفة المزيد عن هذه الخصائص يمكن الإطلاع على SVG fill-rule

تعريف شكل باستخدام صورة

لتعريف شكل باستخدام صورة نحتاج إلى صورة من نمط ألفا والتي يمكن للمتصفح أن يحللها. يُعرّف الشكل بأنه مجموعة من البكسلات التي تمتلك قيمة ألفا أكبر من القيمة الحدّية والتي هي افتراضيًا القيمة 0 (أي شفافة تمامًا) أو يمكن تحديد قيمتها صراحة من خلال الخاصية shape-image-threshold.وبالتالي سيتم استخدام أي بكسل ليس شفافًا كجزء من الشكل المُعرّف من قبل الصورة. في مراحل قادمة من تعريف أشكال CSS قد يتم استخدام بيانات الإضاءة من الصورة بدلًا من استخدام بيانات ألفا. وفي حال حدوث هذا فإن خاصية shape-imgae-threshold سيتم توسيعها لتستخدم مع الإضاءة أو ألفا. الآن سنقوم باستخدام الصورة التالية من أجل تعريف شكل على عنصر ومن ثم تحديد طريقة التفاف النص حول الشكل:

باستخدام الخاصية shape-outside قيمة()url التي تشير إلى الصورة نستطيع جعل المحتوى ينساب حول العنصر الذي يحمل شكل الورقة.

.leaf-shaped-element {
	float: left;
	width: 400px;
	height: 400px;
	shape-outside: url(leaf.png);
	shape-margin: 15px;
	shape-image-threshold: 0.5;
	background: #009966 url(path/to/background-image.jpg);
	mask-image: url(leaf.png);
}

وبالطبع في حال أردنا تطبيق الصورة كخلفية في العنصر فإنه يجب قص الصورة الموجودة خارج الشكل من خلال الخاصية mask-image حيث أنه لايمكن استخدام خاصية clip-path مع الصور صاحبة القيمة ألفا، والنتيجة ستكون بالشكل التالي

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

تفاعل الأشكال في CSS مع التصميم المُتجاوب

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

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

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

مستقبل الحالات المبعدة من المعالجة في CSS

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

ترجمة –وبتصرّف- للمقال CSS Shapes 101 لصاحبته Sara soueidan

قمنا مؤخرًا بتحديث تصميم صفحة "?Why Should You Attend" التي كانت ماتزال تحتفظ بالتصميم القديم للموقع وقد احتجنا إلى أن نوائمها مع باقي الموقع. وعندما بدأنا العمل عليها قررنا أن نحسّن تصميم هذه الصفحة بأحدث التقنيات المستخدمة في التصميم حاليًا ألا وهي: الأشكال العائمة غير المستطيلة non-rectangular float shapes وميزة الكشف المباشر من قبل المتصفح عن قدرته على تطبيق تعليمات css وهذا مايعرف بـ feature queries. ولكن ليكن واضحًا بأننا لم نقم ببناء هذا المثال المتطور من دون أن يزودنا Mike Pick صاحب Monkey Do بالتصميم حيث أدركنا بأن رؤيته تتوافق بشكل جميل مع ميزات CSS الحديثة وقد كنا سعداء جدًا بالنتائج التي حصلنا عليها من خلال هذه التقنيات الحديثة لذلك أردنا مشاركتها معكم.

تصميم الفقاعات styling bubbles

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

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

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

 و Sliced Sandbags التي تقوم على مبدأ بسيط هو بناء مجموعة من div التي تتوضع فوق الصورة الأساسية وبالتالي هذه الأقسام لاتكون الصورة الحقيقية التي سيتوضع النص حولها وإنما عبارة عن مجموعة من تعليمات php. الآن نمتلك الأشكال العائمة float shapes حيث يمكننا أن نعرّف دائرة أو مضلع ثم نقوم بتوصيف كيفية انسياب النص حول الشكل. أعلم ستقول بأنك لم تسمع أبدًا عن دعم هذه الأشكال في المتصفحات، بالتأكيد هذا صحيح حيث أن المتصفحات التي تدعمها إلى الآن هي WebKit/Blink family—Chrome, Safari, and Opera ولكن ذلك لايشكل عائقًا أمام هذه التقنية لأن المتصفحات التي لاتدعم الأشكال العائمة float shapes ستنفذ الطريقة القديمة boxy float في التعامل مع هذه الأشكال وذلك من خلال عرضها كألبوم صور.

من أجل إضافة فقاعة سيكون الشكل الأساسي لتعليمات CSS هو:

img.bubble.left {
    float: left; margin: 0 40px 0 0 ;
    shape-outside: circle(150px at 130px 130px);
    }
img.bubble.right {
    float: right; margin: 0 0 0 40px;
    shape-outside: circle(150px at 170px 130px);
    }

وبالمناسبة هذه الصور الفقاعة هي عبارة عن صور مربعة أبعادها 260px سوف يتم عرضها على سطح المكتب بهذا الحجم ولكن عند تصغير العرض إلى مساحات أصغر سيتم تحجيمها بنسبة 30% لتتناسب مع العرض الجديد.

طريقة توضع الشكل

لنفهم طريقة إعداد شكل الفقاعة النهائي سنقوم بحساب عدد بكسلات توضع الصورة، أولًا أبعاد الصورة الفقاعة هو 260×260 بكسل ونقوم بإضافة 40 بكسل عند الهامش الأيمن للصورة وبالتالي يتشكل لدينا مربع يحوي الصورة وأبعاده هي 300 بكسل بالعرض و 260 بكسل بالطول وتشغل الصورة الأساسية القسم اليساري من هذا المربع. إذًا وعند القيام بحساب بسيط نجد مركز الدائرة هو عند النقطة 130px 130px ونصف قطر الصورة الدائرية الفقاعة هو 130 بكسل ونمدد المحيط الخارجي للفقاعة 20 بكسل فيصبح نصف قطر الدائرة النهائي هو 150 بكسل.

 وبنفس الطريقة نبني الفقاعات الموجودة على الجانب الأيمن، حيث تنزاح نقطة المركز إلى 170px 130px لأننا أضفنا 40 بكسل كهامش أيسر للصورة، وستشرح الصورة كيفية توضع مركز كل دائرة

من أجل كل صورة سنلاحظ مايلي:

• الصندوق الأزرق الفاتح يُظهِر العنصر نفسه المعرف بالصف img.
• المربع البرتقالي الفاتح هو منطقة الهامش الأساسية وعرضها 40 بكسل.
• الدائرة البنفسجية والتي تمّ تعريفها في تعليمات css بالمعرف shape-outside.
• بالإمكان ملاحظة كيفية انسياب النص إلى المنطقة البرتقالية حيث يصل إلى أعلى الدائرة البنفسجية وهذا هو تأثير خاصية shape-outside.
• المناطق خارج هامش الشكل يكون طريقة عرض النص فيها عادي.
• نلاحظ أن الدائرة البنفسجية تمتد خارج منطقة الهامش وذلك لأنه باستخدام خاصية shape-outside يتم قص الدائرة بحسب الأبعاد المعطاة بغض النظر عن مربع الهامش، لذلك فإنه إذا قمنا بزيادة نصف قطر الدائرة مثلًا 400 بكسل فهذا يعني أن الصورة ستغطي نصف الصفحة مع أن التصميم الأساسي للنص سيبقى حول حواف هامش الصورة العائمة كما لو أنه لايوجد أي شكل على الإطلاق.

استجابة الأشكال Being Responsive

حتى الآن طريقة التصميم جيدة فالنص ينساب حول الشكل العائم بطريقة سلسلة في  متصفحات chrome /safari / opera ويتعامل مع الأشكال كما لو أنها مربع شكل عادي في Firefox /Edge وستبقى هذه طريقة تعامل المتصفحات مع الأشكال جيدة طالما أنه لم يتم تصغيير نافذة المتصفح وتتسبب في التفاف النص بين الفقاعات ولكن بالطبع يمكن حدوث ذلك

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

.complex-content div:nth-child(even):not(:last-child) p {
    margin-right: 20%;
}
.complex-content div:nth-child(odd):not(:last-child) p {
    margin-left: 20%;
}

أي أنه من كل الكتل div الأبناء زوجية الأرقام (وليست الابن الأخير) نضيف 20% كهامش على المحتوى ونقوم بنفس الأمر من أجل الكتل الأبناء أصحاب الأرقام الفردية. بإضافة هذه التعليمات الجديدة سيظهر شكل النصوص عند تصغيير نافذة المتصفح بشكل جيد في Chrome حيث سيتم التفاف النص على طول الفقاعة وسيتم إدخال النصوص إلى داخل هوامش الصورة بقيم معقولة

ولكن في متصفح firefox الذي لايزال يمتلك النظام القديم boxy float في التعامل مع الصور لن يكون هناك التفاف في النص ودفع إلى الداخل وإنما سيتم إظهار شريط التمرير على طول الصفحة

ومن جهة أخرى فإن زيادة قيمة الهامش من أجل اصطفاف السطور كما في firefox (الهامش كان بنسبة 33%) لامعنى له في الأشكال العائمة float shape في chrome وذلك لأن النص لن يصل أبداً حتى النصف السفلي من الدوائر.

دعم ميزة Querying feature

تشغيل ميزة feature query يتم من خلال إضافة سطر supports@ إلى التعليمات حيث نستطيع من خلال هذه الطريقة معرفة المتصفحات التي لاتدعم الأشكال العائمة التي أضفناها فتقوم تعليمة support@ بتعديل الهوامش إلى 33% كما أنها تقلل هذه الهوامش في حال كانت المتصفحات تستطيع التعامل مع هذه الأشكال، ويتم هذا من خلال إضافة تعليمات:

.complex-content div:nth-child(even):not(:last-child) p {
    margin-right: 33%;
}
.complex-content div:nth-child(odd):not(:last-child) p {
    margin-left: 33%;
}

@supports (shape-outside: circle()) {
    .complex-content div:nth-child(even):not(:last-child) p {
        margin-right: 20%;
    }
    .complex-content div:nth-child(odd):not(:last-child) p {
        margin-left: 20%;
    }
}

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

في الفيديو الأول طريقة العرض في متصفح chrome

تحميل الفيديو الأول

والفيديو الثاني يظهر طريقة العرض في متصفح firefox الذي لايدعم الأشكال العائمة

تحميل الفيديو الثاني

بالأخير إنها نعمة وجود ميزة مثل feature queries تسمح للمتصفحات مثل firefox و MS Edge الحصول على دعم لإظهار الأشكال العائمة. ومع أنه لايوجد تحسينات قريبة للمتصفحات ولكن يتم العمل بشكل دائم على إدخال التحسينات على CSS نفسها بحيث سيصبح شعارها قريبًا "صمم وانسى"، كما يمكن القول بأن التعديل الأساسي في CSS هو طريقة التعامل مع الأشكال وتحسين عمليه استجابتها من دول وجود الدعم الكافي في المتصفحات لها.

ترجمة –وبتصرّف- للمقال A Redesign with CSS Shapes لصاحبه Eric Meyer

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

سنبدأ أولًا بتطبيق مثال نقوم فيه ببناء ثلاثة أعمدة ضمن الشبكة، من خلال بناء div يحمل اسم الصف example ونضيف فيه قائمة غير مرقمة ul اسم الصف الخاص بها cards ونضيف بداخلها عناصر من خلال الوسم li كل عنصر هو عبارة عن بطاقة card من البطاقات التي سننظم عرضها بمخطط شبكي grid layout على الشاشة

(كود المثال على GitHub)

لوضع البطاقات الخمسة ضمن الشبكة السابقة سنضيف مجموعة من تعليمات css للصف cards الذي يحوي البطاقات الخمسة:

• نضيف خاصية الشبكة لطريقة عرض الحاوية container من خلال التعليمة display:grid.
• لبناء ثلاثة أعمدة متساوية في العرض نضيف الخاصية grid-template-columns، وهنا سنستعرض وحدة جديدة يمكن استخدامها عند إنشاء الشبكة تسمى وحدة الطول المرن flexible-length unit ونشير إليها بـ fr حيث تمثل أجزاء الفراغ الموجود في الحاوية.

في هذا المثال سنقسم الفراغ إلى ثلاثة أعمدة متساوية لذلك نضع 3 أجزاء fr قيمة كل واحد منها 1 والتي تعني تقسيم الفراغ إلى ثلاثة أجزاء متساوية.

.cards {
	margin: 0 -10px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

(كود المثال على GitHub)

وهذا كل مانحتاجه للحصول على ابن للحاوية يظهر بشكل شبكي، فعلى عكس طريقة بناء flexbox لانحتاج هنا إلى أي قواعد أخرى لإضافتها لخلايا الأبناء المكونة للشبكة حيث تقوم جميع الخلايا بوراثة كل خصائص الأب مباشرة. كما نرى فالعناصر ضمن الشبكة تشكل تصميم متماسك لايحتاج إلى أي تعديلات في عرضهم وبذلك نكون قد وجدنا حلًا لأحد المشاكل التي كانت تظهر لدينا في تصميم flexbox grid باستخدام الخصائص المعرفة للشبكة. الآن في حال أردنا إضافة فجوات بين العناصر المرنة داخل الشبكة في المثال السابق يمكن إضافة هوامش بين العناصر ولكن نحتاج أيضا لإضافة هوامش سلبية لحاوية الشبكة من أجل تصحيح الهوامش على اليمين واليسار غير المرغوب بها. في التصميم الشبكي لـ CSS يوجد خاصية تسمى grid-gap يمكن إضافتها من أجل إعطاء هوامش للعناصر داخل الشبكة. وهي تعبر عن خاصيتين في داخلها هما grid-columns-gap و grid-row-gap التي يمكن أيضًا إعطاؤهما قيم بشكل فردي في حال أردنا الهوامش بين الأعمدة والأسطر مختلفة.

لنطبق هذه الخصائص عمليًا ونكتشف طريقة عملها معًا، سأقوم بحذف الهوامش المعطاة للعناصر وستحصل على نفس التصميم الذي أظهرناه في الأعلى، ولكن من دون الفوضى التي تحدثها الهوامش والهوامش السلبية

.cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
}

ملاحظة: بمجرد  طباعة الكتاب الذي تم اقتباس هذا المقال منه، قامت إحدى مجموعات العمل على CSS بتغيير اسم الخصائص المتعلقة بـ grid-gap حيث سيتم تغيير اسم خاصية grid-column-gap إلى column-gap وخاصية grid-row-gap  إلى row-gap أما خاصية grid-gap التي تجمع بين الخاصيتين السابقتين ستتغير إلى gap.

بالإضافة إلى أنه سيتم تغيير تعريف الخصائص التي تحدد  أبعاد مخطط المربع الإظهار box alignment وبالتالي يمكن دعم وجود فجوات داخل flexbox كما في الشبكة. ولأن المتصفحات قد تم تحميلها بهذه الخصائص، لذلك سيتم تغيير اسم الخصائص ذات الشكل grid-* إلى الشكل الجديد بالمستقبل القريب.

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

.cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	gap: 20px;
}

طريقة توضع العناصر حول الشبكة

نستطيع الوصول إلى مستويات أكثر تطورًا في طريقة توزيع العناصر ضمن الشبكة مما كان مسموحًا في flexbox من خلال الاستفادة من ميزات الشبكة ثنائية الأبعاد وطريقة توضع العناصر داخلها. الطريقة الأكثر الأساسية هي استخدام أرقام الأسطر.  حيث أنه تم ترقيم أسطر وأعمدة الشبكة ورقم البداية هو 1، حيث أن بداية الترقيم تكون حسب اتجاه الكتابة في المستند فعندما يكون العمل داخل الصفحة باللغة الانجلزية مثلًا أي توضع الكتابة من اليسار إلى اليمين LTR عندها العمود رقم 1 هو العمود الموجود في الجهة اليسرى والسطر رقم 1 هو السطر الموجود في الأعلى. أما عندما تكون الكتابة من اليمين إلى اليسار RTL كما في اللغة العربية عندها سيكون العمود رقم 1 هو العمود الموجود في يمين الشبكة. كما ستكون أقصى زاوية في الشبكة (الزاوية اليمينة في اللغات التي يكون اتجاه الكتابة فيها LTR والزاوية اليسارية في اللغات التي اتجاهها RTL) ممثلة بالرقم 1- .

لتوضيح هذه الطريقة سنقوم إضافة اسم صف إلى كل عنصر li داخل مستند Html يمثل رقم البطاقة card1, card2… ثم داخل ملف css سنغير خصائص كل صف لتصبح بالشكل.

.cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
}
.card1 {
	grid-column: 1 / 3;
	grid-row: 1;
}
.card2 {
	grid-column: 3;
	grid-row: 1;
}
.card3 {
	grid-column: 1;
	grid-row: 2 / 4;
}
.card4 {
	grid-column: 2 / 4;
	grid-row: 2;
}
.card5 {
	grid-column: 2 / 4;
	grid-row: 3;
}

(كود المثال على GitHub)

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

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

.card1 { grid-area: a; }
.card2 { grid-area: b; }
.card3 { grid-area: c; }
.card4 { grid-area: d; }
.card5 { grid-area: e; }

ثم نضيف الخاصية grid-template-areas إلى الحاوية للشبكة cards بحيث توصف القيمة المعطاة لهذه الخاصية كيفية توضع العناصر ضمن المخطط فمثلا في حال وصفنا التوضع بالشكل.

.cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	grid-template-areas:
		"a a b"
		"c d d"
		"c e e";
}

(كود المثال على GitHub)

سيظهر لدينا ترتيب البطاقات ضمن الشبكة بالشكل.

ولكن هناك بعض الملاحظات من المهم تذكرها حول خاصية grid-template-areas وهي:

• في حال أردنا أن نمدد البطاقة على مساحة أكثر من خلية نقوم بتكرار اسم المنطقة، مثلًا تمتد البطاقة الأولى card1 على مساحة عمودين لذلك قمنا بتكرار المنطقة a مرتين حيث أن شكل المنطقة هو مستطيل (لا نستطيع إلى الآن بناء منطقة على شكل حرف L).
• لترك مساحات فارغة يتوجب علينا ترك مكان الخلية فارغًا، ويتم ذلك من خلال استخدام محرف النقطة "." مثلًا إذا استبدلنا أول c بنقطة عندها ستبقى خلية فارغة في المخطط.

.cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	grid-template-areas:
		"a a b"
		". d d"
		"c e e";
}

يمكنك تسمية المناطق بأكثر من محرف في حال كان عدد الأسطر كبير مثلًا كما أنه يمكن أن تمثل الخلية الفارغة بأكثر من نقطة ".." بشرط ألا يفصل بين المحارف أي فراغ. 

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

 وبهذه الأمثلة التي طرحناها اليوم، تكون قد اكتسبت معرفة كافية تسمح لك باستخدام التصميم الشبكي grid layout لتقرر طريقة عرضك للمحتويات، ولكن تذكر هناك الكثير من الطريق لتخصيص العمل الذي تقوم به حيث يمكنك القيام بالكثير من خلال استخدام CSS.

ترجمة للمقال The New CSS Layout, An Excerpt  للكاتبة Rachel Andrew

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

Grid و flexbox

الفرق الأساسي بين خطاطة CSS الشّبكيّة وخطاطة CSS flexbox هي أنّ flexbox تمّ تصميمه لأجل الخطاطات أحادية البعد، بمعنى خطاطة يُمكن أن تُسلك في صفّ أو عمود. أمّا الشّبكةGrid فقد تمّ تصميمها لأجل الخطاطات ثنائيّة الأبعاد، بمعنى خطاطة تَسري في الصّفوف والأعمدة في نفس الوقت. كلا المواصفتين القياسيتينspecifications تتشاركان في بعض السّمات، وإن كنت قد تعلّمت من قبل كيفيّة استخدام flexbox فسترى بعض أوجه التشابه التي ستساعدك في تعلّم مفهوم الشّبكة بسرعة.

الخطاطة أحاديّة البعد vs الخطاطة ثنائية البعد

سنستخدم مثال بسيط يمكن أن يُوضّح الفرق بين الخطاطة أحادية البعد أو ثنائية الأبعاد.
في المثال الأول، سنستخدم flexbox لنَظم مجموعة من المربّعات. سيكون لدينا خمسة أبناء في الوعاء container، وسنُعيّن للخاصيّةflex قيمًا بحيث يمكنها أن تنبسط وتنقبض في حدود هامش 200 بكسل. كما سنحدّد للخاصّية flex-wrap القيمةwrap ، بحيث إذا صارت المساحة في الوعاء أضيق من أن تستوعب المرونة الأساسيّة flex basis، فسيتمّ وضع العناصر في صفّ جديد.

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.wrapper > div {
  flex: 1 1 200px;
}

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

نفس الخطاطة لكن مع شبكات CSS

في هذا المثال، سنُنشئ نفس الخطاطة باستخدام الشّبكة. هذه المرة لدينا ثلاثة مدارج للأعمدة column tracks. لسنا بحاجة لوضع أي شيء للعناصر نفسها. حيث سينتظمون تلقائيا واحد في كل خلية من الشّبكة التي تم إنشاؤها. وكما هو واضح فقد بقيت في شبكة صارمة strict grid، حيث يصطفّون في صفوف وأعمدة. ومع وجود خمسة عناصر، فستكون هناك فجوة في نهاية الصف 2.

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3، 1fr);
}

سؤال بسيط يجب أن تسأله عند المفاضلة بين الشّبكة و flexbox وهو:

• هل أنا بحاجة فقط لضبط الخطاطة على صعيد الصّفوف وحدها أو الأعمدة وحدها – استخدم إذًا flexbox
• هل أحتاج لضبط الخطاطة على صعيد الصفوف والأعمدة معًا – استخدم إذًا الشّبكة

محتوى خارجيّ أم خطاطة داخليّة؟

بالإضافة إلى مسألة التفريق بين البعد الواحد والأبعاد الثّنائية، هناك طريقة أخرى لتقرّر ما إذا كان عليك استخدام flexbox أو الشّبكة لأجل التخطيط. يتكيّف flexbox مع حجم المحتوى. فمن الحالات المثالية لاستخدام flexbox هي عندما يكون لديك مجموعة من العناصر التي تريد توزيعها بالتساوي في الوعاء. بحيث يتمّ تحديد المساحة التي سيشغلها كل عنصر على حسب حجم المحتوى. وإذا انتظمت العناصر في سطر جديد، فستتوزع على أساس أحجامها والمساحة المتاحة في ذلك السّطر.
الشّبكة تعمل في الاتجاه الداخلي للخطاطة layout in، فعند استخدام خطاطة CSS الشّبكيّة يتمّ إنشاء خطاطة ثم توضع العناصر فيها، وفي حال استخدام قواعد auto-placement ستوضع العناصر في خلايا الشّبكة وفقا للشّبكة الصارمة strict grid. هناك إمكانيّة لإنشاء مدارج tracks تتكيّف مع حجم المحتوى، ولكنّها ستغيّر أيضا كامل المدرج.
إذا كنت تستخدم flexbox وتشعر أنّك تفتقد بعض المرونة، فربّما عليك استخدام خطاطة CSS الشّبكيّة. على سبيل المثال إذا حدّدت عرض width عنصر مرن (flex item) بنسبة مئوية لجعله يصطف مع العناصر الأخرى في الصّف الأعلى. في هذه الحالة، فمن المحتمل أن يكون استخدام الشّبكة خيارًا أفضل لك.

محاذاة المربّع Box alignment

لعلّ من أكثر سمات flexbox إثارة هي أنه مكّننا لأول مرة من التحكم في المحاذاة بشكل صحيح. فقد جعل من السهل توسيط مربع على الصفحة. ويمكن للعناصر المرنة الامتداد على كامل ارتفاع الوعاء، وهذا يعني أنّه صار من الممكن الحصول على أعمدة متساوية الارتفاع. وهي أشياء كنّا نريد القيام به منذ فترة طويلة جدا، كما أنها جاءت مرفقة بجميع أنواع الحيل لمساعدتنا على خلق التأثير البصري الذي نريد.
خصائص المحاذاة المحدّدة في المواصفات القياسيّة specification لـ flexbox قد تمّ إضافتها إلى مواصفات قياسيّة جديدة تسمّى Box Alignment Level 3 . وهذا يعني أنّه يمكن استخدامها في مواصفات قياسيّة أخرى، بما في ذلك الخُطاطة الشّبكيّة. وفي المستقبل، قد تنطبق أيضًا على أساليب التخطيط الأخرى. إليك الآن مثالًا بسيطًا لمقارنة flexbox والشّبكة.
في المثال الأول، والذي يستخدم flexbox، لدينا وعاء يحتوي ثلاثة عناصر. تمّ تعيين خاصيّة min-height للغلافwrapper ، لتحديد ارتفاع الوعاء المرن flex container. سنعطي أيضا للخاصيّة align-items الخاصّة بالوعاء المرن القيمة flex-end، وبالتالي فإن العناصر سوف تصطفّ في نهاية الوعاء. كما أنّنا أيضا سنحدد الخاصية align-self لـ box1 حتّى تستبدل السّلوك الافتراضي وتمتد على كامل ارتفاع الوعاء وعلى box2 حتّى يصطفّ في بداية الوعاء المرن.

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>

.wrapper {
  display: flex;
  align-items: flex-end;
  min-height: 200px; 
}
.box1 {
  align-self: stretch;
}
.box2 {
  align-self: flex-start;
}

المحاذاة في شبكات CSS

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

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3،1fr);
  align-items: end;
  grid-auto-rows: 200px;
}
.box1 {
  align-self: stretch;
}
.box2 {
  align-self: start;
}

الوحدة fr و flex-basis

لقد رأينا سابقا كيف نستخدم الوحدةfr لأجل تخصيص نسبة من المساحة المتوفرة في وعاء الشّبكة لأجل مدرج الشّبكة grid tracks. عندما تُستخدم الوحدة fr مع الدالّة ()minmax  فيمكن أن تعطينا سلوكًا مشابهًا جدًا للخاصيةflex في flexbox وفي الوقت نفسه تُمكّننا من إنشاء خطاطة في بعدين.
لو عدنا إلى المثال الذي أوضحنا فيه الفرق بين الخطاطات أحادية وثنائيّة الأبعاد، فيمكنك أن ترى أن هناك فرقا في الطريقة التي تتكيّف وتتجاوب بها الخطاطتان. فمع الخطاطة المرنة، إذا غيّرنا حجم النافذة توسيعًا وتصغيرًا، سيتكيّف flexbox بشكل جيد بتعديل عدد العناصر في كل صف وفقا للمساحة المتاحة. إن كان لدينا ما يكفي من المساحة فكل العناصر الخمسة ستنتظم في صف واحد، أمّا إن كان الوعاء ضيّقًا فقد لا نجد مساحة لأكثر من واحد.
على سبيل المقارنة، النسخة الشبكيّة دائما ما يكون لديها ثلاثة مدارج للأعمدة column tracks. والمدارج نفسها سوف تنبسط وتنقبض، ولكن ستكون هناك دائما ثلاثة أعمدة كما طلبنا عند تعريف الشّبكة.

الملء التلقائي لمدارج الشّبكة Auto-filling grid tracks

يمكننا خلق تأثير مماثل لـ flexbox، دون التفريط في إمكانيّة الحفاظ على المحتوى مرتبًا في صفوف وأعمدة صارمة، من خلال إنشاء تسلسل المدارج track listing باستخدام العبارةrepeat وخاصّيتي auto-fill و auto-fit.
في المثال التالي، سنستخدم auto-fill بدلًا من استخدام الأعداد الصحيحة في العبارة repeat وسنحدّد تسلسل المدارج track listing بـ 200 بكسل. وهذا يعني أن الشّبكة سوف تنشئ أكبر عدد من مدارج الأعمدة ذات 200 بكسل التي يمكن احتواؤها في الوعاء.

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill، 200px);
}

عدد مرن من المدارج

الأمر هنا مختلف بعض الشيء عن flexbox. ففي مثال flexbox، كانت العناصر أكبر من 200 بكسل قبل التغليف wrapping. يمكننا تحقيق نفس الشّيء في الشّبكة من خلال الجمع بين auto-fill و ()minmax . في المثال التالي، سنُنشئ مدارج تُملأ تلقائيا بواسطة minmax. هدفنا أن نجعل الحدّ الأدنى لحجم المدارج لا يقلّ عن 200 بكسل، سنعيّن الحد الأقصى عند1fr . وبمجرّد أن يخمّن المتصفح كم “200 بكسل” سوف يتّسع لها الوعاء، مع احتساب فجوات الشبكة، فسوف يعتبر الحدّ الأقصى المحدّد 1fr كتعليمات لتوزيع المساحة المتبقية بين العناصر.

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill، minmax(200px، 1fr));
}

لدينا الآن القدرة على إنشاء شبكة بعدد مرن من المدارج المرنة (flexible number of flexible tracks)، ولكن مع محاذاة العناصر التي وُضعت في الشّبكة في الصفوف والأعمدة.

الشّبكة والعناصر مُطلقة التموضِع Grid and absolutely positioned elements

تتفاعل الشّبكة مع العناصر مطلقة التّموضع، وهو أمر يمكن أن يكون مفيدًا إذا كنّا نرغب في وضع عنصر داخل شبكة أو حيّز من الشبكة. تحدد المواصفات القياسيّة السلوك الافتراضي عندما يكون وعاء الشّبكة كتلة احتواء containing block وحيث يكون وعاء الشّبكة أبًا للعنصر مطلق التّمَوضُع absolutely positioned.

وعاء الشبكة ككتلة احتواء

لجعل وعاء الشّبكة كتلة احتواء نحتاج إلى إعطاء القيمة relative للخاصيةposition الخاصّة بالوعاء، بالضّبط كما تفعل عادة لصنع كتلة احتواء لأيّ من العناصر الأخرى مُطلقة التموضع absolutely positioned. بعد فعل ذلك، إن حدّدنا لعنصر من الِشبكة position: absolute فإنه سيأخذ نفس الحجم الذي تأخذه كتلة الاحتواء الخاصّة بوعاء الشّبكة، أمّا في حال كان لهذا العنصر الخاصيّة grid position، فسيأخذ حيّز الشّبكة التي وُضع فيها.
في المثال أدناه لدينا غلاف يحتوي أربعة عناصر. العنصر الثالث مطلق التموضع وأيضا موضوع على الشّبكة باستخدامline-based placement. وعاء الشّبكة لديه position: relative وكذلك سياق التموضع positioning context لذلك العنصر.

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">
   This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into.
  </div>
  <div class="box4">Four</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(4،1fr);
  grid-auto-rows: 200px;
  grid-gap: 20px;
  position: relative;
}
.box3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  position: absolute;
  top: 40px;
  left: 40px;
}

يمكنك أن ترى أن العنصر قد أخذ حيّزًا من الصّف الثاني وحتى الرابع، ثمّ بدأ بعد السّطر 1. مع تحديد احداثيّته باستخدام الخصائصtop و left. كما تمّ إخراجه من الانسيابflow كما هي عادة العناصر مطلقة التموضع كما تضعهم قواعدautoplacement في نفس المساحة. كما لم يتمّ إنشاء صفّ جديد حتّى يمتد العنصر إلى سطر الصّف 3. إن أزلت position: absolute من قواعد .box3 يمكنك أن ترى كيف سيُعرض بدون تحديد الموضع.

وعاء الشّبكة كأبٍ A grid container as parent

إذا كان لدى الابن مُطلَق التّموضع وعاء شبكيّ grid container كأبٍ ولكنّ ذلك الوعاء لا يخلق سياق تموضع positioning context جديد، فهذا يعني أنه قد أُخرج من الانسيابflow كما في المثال السابق. سياق التموضع positioning context سيكون كالسياق الذي أنشأه العنصر كما هو شائع في أساليب التخطيط الأخرى. في حالتنا، إذا أزلنا position: relative من الغلاف أعلاه، سياق التموضع سيكون من viewport ، كما هو موضح في هذه الصورة.

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

مع حيّز الشّبكة كأب With a grid area as the parent

إذا وٌضع العنصر مطلق التموضع داخل حيّز الشّبكة فيمكنك حينها إنشاء سياق تموضع على الحيّز. في المثال أدناه لدينا شبكة كما قبل ولكن هذه المرة سنُدرج عنصرا داخل .box3 في الشّبكة. سنعيَن القيمةrelative للخاصيّةposition الخاصة بـ .box3 ثم سنحدّد موضع العنصر الفرعي بواسطة خصائص الإزاحة offset properties. في هذه الحالة، سياق التّموضع سيكون هو حيّز الشّبكة.

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three
    <div class="abspos">
     This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area.
    </div>
  </div>
  <div class="box4">Four</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(4،1fr);
  grid-auto-rows: 200px;
  grid-gap: 20px;
}
.box3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  position: relative;
}
.abspos {
  position: absolute;
  top: 40px;
  left: 40px;
  background-color: rgba(255،255،255،.5);
  border: 1px solid rgba(0،0،0،0.5);
  color: #000;
  padding: 10px;
}

الشّبكة و display: contents

سنقوم بإطلالة أخيرة على إحدى المواصفات القياسيّة للتّخطيط والتي تستحقّ التنويه وهي التفاعل بين خطاطة CSS الشّبكيّة وdisplay: contents. قيمةcontents للخاصيةdisplay هي قيمة جديدة موضّحة في المواصفات القياسيّة (Display specification ) كما يلي:
"إنّ العنصر نفسه لا يولّد أية مربّعات، ولكنّ بإمكان أبنائه وأشباه العناصر pseudo-elements توليد المربّعات كالمعتاد. ولغرض توليد المربعات والتخطيط، يجب أن يعامل العنصر كما لو أنه قد تم استبداله بأبنائه وبأشباه العناصر في شجرة وثيقة"
إذا حدّدت لعنصر ما display: contents فإنّ المربع الذي سينشئه سيختفي، أمّا مربّعات الأبناء فستظهر كما لو أنها قد ارتفعت لمستوى أعلى. وهذا يعني أن أبناء عناصر الشّبكة يمكن أن يصبحوا بدورهم عناصر للشّبكة. إن بدا هذا غريبا فإليك مثالًا بسيطًا. في الوسوم التالية، لدينا شبكة بحيث سيشمل أوّل عناصرها جميع مدارج الأعمدة الثلاث. كما تحتوي ثلاثة عناصر متداخلة. وبما أنّ هؤلاء العناصر ليسوا أبناءً مباشرين، فإنهم لن يصبحوا جزءا من الخطاطة الشّبكيّة لذك فالخاصّيةdisplay ستكون خطاطة عادية regular block layout.

<div class="wrapper">
  <div class="box box1">
    <div class="nested">a</div>
    <div class="nested">b</div>
    <div class="nested">c</div>
  </div>
  <div class="box box2">Two</div>
  <div class="box box3">Three</div>
  <div class="box box4">Four</div>
  <div class="box box5">Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3، 1fr);
  grid-auto-rows: minmax(100px، auto);
}
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
}

إذا أضفنا display: contents إلى قواعدbox1، فإنّ المربع الخاصّ بذلك العنصر سيختفي والعناصر الفرعية ستصبح الآن عناصر للشّبكة وستنساب وفق قواعدauto-placement .

<div class="wrapper">
  <div class="box box1">
    <div class="nested">a</div>
    <div class="nested">b</div>
    <div class="nested">c</div>
  </div>
  <div class="box box2">Two</div>
  <div class="box box3">Three</div>
  <div class="box box4">Four</div>
  <div class="box box5">Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3، 1fr);
  grid-auto-rows: minmax(100px، auto);
}
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  display: contents;
}

يمكن أن تكون هذه طريقة لجعل العناصر الفرعيّة في الشّبكة تتصرّف كأنها جزء من الشّبكة، وهذا قد يساعدنا على الالتفاف على بعض المشاكل والتي سيتم حلها بواسطة subgrids بمُجرّد تقديمها. يمكنك أيضا استخدام display: contents بطريقة مماثلة مع flexbox لتمكين العناصر الفرعيّة من أن تصبح عناصر مرنة.
كما رأينا خلال هذا الدليل، خطاطة CSS الشّبكيّة هي مجرّد أداة واحدة من الأدوات المتاحة لك. لا تتردّد في دمجها مع الطرق الأخرى للتّخطيط لتحصل على التأثيرات التي تصبو إليها.
ترجمة -وبتصرّف- للمقال Relationship of grid layout to other layout methods لأصحابه المساهمين (kan199041, VladPavel15, mfluehr, NouranMahmoud, bgates, Pickles-Spill, jarrodn, AleshaOleg, teoli, rachelandrew)

حقوق الصورة البارزة محفوظة لـ Freepik

جميعنا – نحن مصمّمي المواقع –تعلّمنا أن نبقى بعيدًا عن الخُطاطات layouts المستندة على الجداول. لهذا غالبًا ما ننساها ونهملها إلى أن نجد أنفسنا محتاجين إليها. هذا الدرس سيأخذك خطوة بخطوة لإنشاء جدول بيانات أنيق وسلس يحتوي مقارنة بين مميّزات عدة درّاجات نارية من طرازHarley Davidson . سنقوم ببناء الجدول حصرًا بـ HTML ثمّ سنصقله بـ CSS لإنشاء جدول HTML جميل وواضح.
الجدول سيقارن ميزات ثلاثة نماذج من الدراجات النارية من طراز Harley Davidson Sportster. سيتمّ بناء الجدول بـ HTML ثمّ سنُنسّقه بـ CSS لجعل البيانات واضحة.

مشاهدة الجدول النّهائي

سنحتاج إلى عدّة ملفات لأجل تصميم هذا المشروع التّعليمي. وهي: صورة PNG سنستخدمها كخلفية، وصورة كبيرة بالأبيض والأسود لملء الخلفيّة، وشعار Harley Davidson إضافة إلى صور نماذج الدرّاجات النارية الثلاث التي سنقارنها.

الملفّ عبارة عن HTML عاديّ. حيث يبدأ بـ DOCTYPE، عنوان الصفحة ورابط لـ CSS. يبدأ محتوى الصفحة بـ <H1>، والذي سيتم لاحقا تحويله إلى شعار HD، بعد ذلك سنضيف وعاء div لمساعدتنا على توسيط المحتوى.

بعد ذلك سندرج <table> متبوعًا بـ <THEAD> لتحديد العناوين والتّرويسات headings في جدولنا. يحتوي <THEAD> على صفّين، أحدهما يتضمّن صور الدرّاجات والآخر يتضمّن عناوين كل نموذج في وسم <H2>. الجدول يحتوي ثلاثة أعمدة، ولكن الخلايا الأولى في الترويسة فارغة لذلك سنضيف الحرف الرّابط  . لمساعدتنا على تنسيق الجدول وتحسين مقروئية البيانات وفي نفس الوقت سنضيف في الكود أصنافًا classes إلى الخلايا.

بعد إغلاق <THEAD> يبدأ <TBODY>. وبينما تُستخدم <th> داخل <THEAD>، فإنّ <td> تستخدم داخل <TBODY>. كل سلسة من الخلايا مُتضمَّنة داخل صفّ واحد، وصفوفنا تساعدنا في تحديد الأعمدة. كما ستتم إضافة كافّة صفوف البيانات لإنهاء HTML.

HTML النّهائي

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Harley Davidson Sportster Motorcycle Model Comparison</title>

<link href="style.css" rel="stylesheet" />

</head>

<body>

<h1>Harley Davidson Motorcycles</h1>

<div id="container">
    
    <table>
        <thead>
            <tr>
                <th> </th>
                <th class="iron"><img src="images/iron.jpg" alt="Harley Davidson Iron 883" /></th>
                <th class="nightster"><img src="images/nightster.jpg" alt="Harley Davidson Nightster" /></th>
                <th class="fortyeight"><img src="images/forty-eight.jpg" alt="Harley Davidson Forty-Eight" /></th>
            </tr>
            <tr>
                <th> </th>
                <th class="iron"><h2>Iron 883</h2></th>
                <th class="nightster"><h2>Nightster</h2></th>
                <th class="fortyeight"><h2>Forty-Eight</h2></th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td class="feature">Engine</td>
                <td class="iron">883cc</td>
                <td class="nightster">1202cc</td>
                <td class="fortyeight">1202cc</td>
            </tr>
            
            <tr>
                <td class="feature">Torque</td>
                <td class="iron">70Nm</td>
                <td class="nightster">98Nm</td>
                <td class="fortyeight">98Nm</td>
            </tr>
            
            <tr>
                <td class="feature">Exhaust</td>
                <td class="iron">Chrome, staggered shorty exhaust with dual mufflers</td>
                <td class="nightster">Chrome, slash-cut ex-haust with dual mufflers</td>
                <td class="fortyeight">Chrome, staggered shorty exhaust with dual slash-cut mufflers</td>
            </tr>
            
            <tr>
                <td class="feature">Wheels</td>
                <td class="iron">Black, 13-Spoke Cast Alumi-num</td>
                <td class="nightster">Black, Laced Steel</td>
                <td class="fortyeight">Black, Laced Steel</td>
            </tr>
            
            <tr>
                <td class="feature">Ground Clearance</td>
                <td class="iron">120mm</td>
                <td class="nightster">130mm</td>
                <td class="fortyeight">100mm</td>
            </tr>
            
            <tr>
                <td class="feature">Price</td>
                <td class="iron">£6,699</td>
                <td class="nightster">£8,099</td>
                <td class="fortyeight">£8,849</td>
            </tr>
        </tbody>
    
    </table>

</div>

</body>
</html>

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

بعد ذلك سيتمّ تحويل <H1> إلى شعار Harley Davidson باستخدام تقنية استبدال الصورة، ثم سنضع الوعاء div في وسط الصفحة. تُستخدم صورة الخلفية النّمطية للملء. وبعدها سنحدّد قيم الخاصّية box-shadow لـ CSS3 لمحاكاة تأثير الظّل المُنسدل في فوتوشوب.

افتراضيًا سيعرض الجدول فجوات صغيرة بين خلايا الجدول. التصميم الذي نبتغي يتطلّب هامشًا بين الأعمدة ولكن دون ثغرات بين الصّفوف. تسمح لنا الخاصيّة border-spacing بضبط التباعد على المحورين Y و X. ستتمّ إضافة الهامش الداخلي Padding, كما سيتمّ توسيط النص في جميع العناصر <th> و <td>، ثم سنستثني الخلايا ذات الصّنف “feature”، حيث سنحاذي النصّوص فيها إلى اليسار. كما ستُمنح هذه الخلايا عرضًاwidth محدّدًا لتغيير تناسب الجدول لجعل ذلك العمود الأكبر من بين بقيّة الأعمدة.

أعطينا لكلّ الأصناف “iron”، “nightster” و “fortyeight” خلفيّة بيضاء شفّافة باستخدام RGBa. كان بإمكاننا أن نستخدم صنفًا واحدًا لجميع هذه الخلايا، ولكنّ الأصناف المعيّنة ستساعدنا على التنقل في بيانات الجدول في الكود البرمجي. لأجل إضافة لمسة أخيرة على الجدول، سنضيف نفس الملء الشفّاف إلى صفوف الجدول، ولكن فقط عندما يطوف عليها مؤشّر الفأرة. هذا التأثير البسيط يعزّز سهولة استخدام الجدول، ممّا يساعد المستخدم على مطالعة ومقارنة البيانات.

CSS الكامل

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote, table, tr, td, th {
    margin: 0; padding: 0; border: 0;
}

body {
    background: #000 url(images/bg.jpg) center top fixed no-repeat;
    font: 16px Georgia, Serif; color: #ccc;
}

h1 {
    width: 168px; height: 130px; margin: 30px auto; position: relative;
    background: url(images/harley-davidson.png); text-indent: -9999px;
}

#container {
    width: 940px; margin: -115px auto; padding: 110px 10px 50px 10px;
    background: url(images/bg-pattern.png);
    box-shadow: 0px 0px 15px #000;
}

table {
    border-spacing: 10px 0px;
}

th, td {
    text-align: center; padding: 10px;
}

.feature {
    width: 183px; text-align: right;
    font-size: 24px; font-weight: normal; color: #fff; 
}

.iron, .nightster, .fortyeight {
    background: rgba(255,255,255,0.05);
}

h2 {
    font-size: 24px; font-weight: normal; color: #fff; 
}

tr:hover {
    background: rgba(255,255,255,0.05);
}
    thead tr:hover {
        background: none;
    }

جدول HTML / CSS النهائي

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

ترجمة -وبتصرّف- للمقال How To Create a Slick Features Table in HTML & CSS لصاحبه iggy

تقدّم المواصفات الجديدة في CSS3 محدّدين Selector مفيدين للغاية هما :valid و :invalid وهي أصناف زائفة pseudo-class يمكن استخدامها مع عناصر الإدخال الخاصة بالاستمارات. لنفترض أن لديك عنصر إدخال تتحقّق من خلاله فيما إذا كان ما أدخله المستخدم صحيحًا أم خاطئًا. لإجراء عملية التحقق ستحتاج إلى إضافة خاصية HTML5 required إلى الوسم الخاص بعنصر الإدخال، وبهذا يمكن الاستفادة من المحدّدين :valid/:invalid لتغيير لون حقل الإدخال ليعرف المستخدم من خلال ذلك أنّ ما أدخله صحيح أو خاطئ. فعلى سبيل المثال يتحول مربع الإدخال إلى اللون الأخضر عندما تكون العبارة صحيحة، وكما يلي:

input:required {
    background: #AAA;
}
input:valid {
    background: #0A0;
}
input:invalid {
    background: #A00;
}

سننشئ في هذا الدرس استمارة بنمط Material وسننبّه المستخدم على صحة البيانات المدخلة في الاستمارة من خلال الصنفين الزائفين :valid و :invalid. تتألف الاستمارة من مربع نصّي وحيد وقد أحطنا عنصري input[type="text"] وlabel بعنصر div يحمل المحدّد .form-control من إطار عمل Bootstrap. لدينا أيضًا شريط سيتغير لونه بين الأخضر والأحمر للدلالة على صحة المعلومات المدخلة من عدمها.

<div class="form-control">
    <input type="text" required />
    <span class="bar"></span>
    <label for="First Name">First Name</label>
</div>

في البداية سنزيل جميع الحدود المحيطة بمربّع النص باستثناء الحدّ السفلي وسنلوّنه باللون الأزرق ليكون متناسقًا مع نمط التصميم Material.

.form-control {
  position:relative;
  margin-top:40px;
  width:400px;
}
input {
  border:none;
  border-bottom:3px solid #34495e;
  padding:10px 0;
  width:400px;
  display:block;
  font-size:16px;
}

سيؤدي العنصر label دور ماسك مكان placeholder، لذا سنجعل موقعه مطلقًا مع تعيين المسافة اليسرى والعلوية المناسبة، ليبدو العنصر بهيئة ماسك مكان اعتيادي.

label {
  position:absolute;
  top:8px;
  left:5px;
  font-size:16px;
  color:#333;
  transistion: 0.3s ease all;
  -webkit-transition:0.3s ease all;
}

والآن عندما يضغط المستخدم أو يجعل التركيز على مربّع النص سنقوم بإلغاء الحدّ السفلي، وسنغير موقع ماسك المكان ليصبح فوق مربع النص ليبدو كـ label.

input:focus{
  border:none;
  outline:none;
}

سيبقى الـ label فوق مربع النص إلى أن يجعل المستخدم التركيز على مربّع النص ويضيف إليه أي معلومات صحيحة.

input:focus ~ label, .form-control input:valid ~ label  {
  top:-10px;
  font-size:12px;
  left:2px;
  color:#111;
}

لن يظهر المحدّد .bar بصورة تلقائية، بمعنى أن عرضه سيكون صفرًا، وإن قمنا بالتركيز على مربع النص فإن عرض المحدّد .bar سيزداد. كما ستلاحظ فقد حدّدنا العرض ضمن الصنفين الكاذبين (:after و :before) حيث سيزداد العرض 50% لكل عنصر زائف، بمعنى أن الزيادة الكلية ستكون 100%، وهكذا سنحصل على تأثير توسّع جميل.

.bar:before, .bar:after     {
  content:'';
  height:3px; 
  width:0;
  bottom:1px; 
  position:absolute;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

.bar:before {
  left:50%;
}

.bar:after {
  right:50%; 
}


input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

سنغيّر الآن لون خلفية الشريط حسب صحة أو عدم صحة البيانات المدخلة، وذلك باستخدام الصنفين الزائفين :valid و :invalid.

input:valid ~ .bar:before, input:valid ~ .bar:after{
  background:#2ecc71;
}

input:invalid ~ .bar:before, input:invalid ~ .bar:after{
  background:#e74c3c;
}

تعمل هذه الطريقة على متصفحات (+Chrome(10 و (+Firefox(4 و (+Safari(5 و (+Opera(10 و (+IE(10، ولكن لا تعمل على الإصدار التاسع وما دونه من متصفح IE. وجدير بالذكر أنّه لن يتم التحقّق من صحة البيانات بأي شكل من الأشكال، ويمكن استخدام هذه الطريقة في مجال تجربة المستخدم فقط.

ترجمة - وبتصرّف - للمقال Form validation in pure css لصاحبه Arkaprava Majumder.

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

1. التعليقات.
2. المحددات.
3. الخصائص.
4. طريقة استخدام CSS في الصفحة.
5. الأولوية أم التتالي.
6. استعلامات الميديا.
7. التوافقية.

التعليقات

توجد طريقة واحدة لكتابة التعليقات في ملف CSS وهي كتابة التعليقات بين الرمزين /* */.

/* التعليقات تُتكتب هنا
ولا يوجد نمط لكتابة التعليق في سطر واحد سوى هذه الطريقة */

المحددات

يُستخدم المحدد في استهداف عنصر في صفحة، ويُكتَب بالطريقة التالية:

selector { property: value; 
/*  خصائص أخرى*/ }

لنفترض وجود العنصر التالي من نوع div في صحة ويب:

<div class='class1 class2' id='anID' attr='value' otherAttr='en-us foo bar' />

تستطيع تطبيق قاعدة CSS على هذا العنصر باستخدام أحد أسماء الأصناف Classes التي ينتمي إليها في الصفحة:

.class1 { }

أو باستخدام جميع أسماء الأصناف المطبَّقة عليه:

.class1.class2 { }

أو باستخدام نوع العنصر:

div { }

أو باستخدام الرقم الخاص بالعنصر:

#anID { }

نستطيع تحدد العنصر من الصفحة في حال وجود صفة Attribute باسم معين:

[attr] { font-size:smaller; }

أو في حالة وجود صفة بقيمة معينة:

[attr='value'] { font-size:smaller; }

في حالة وجود صفة معينة في عنصر، ونريد تطبيق قاعدة على هذا العنصر بشرط وجود قيمة تبدأ منها الصفة نستخدم الطريقة التالية:

[attr^='val'] { font-size:smaller; }

أما إن كان الشرط يتعلّق بقيمة معينة تنتهي بها الصفة:

[attr$='ue'] { font-size:smaller; }

نستطيع تحديد العنصر في حالة احتواء الصفة على قيمة معينة ضمن قائمة قيم منفصلة عن بعضها بمسافة فارغة (يوافق الشرط أدناه العناصر التي لديها صفة otherAttr تساوي “foo” أو “foo bar” أو “foo bar far” …إلخ):

[otherAttr~='foo'] { }

أو تحديد العنصر في حالة احتواء الصفة على قيمة معينة ضمن قائمة قيم منفصلة عن بعضها برمز – كما في المثال التالي:

[otherAttr|='en'] { font-size:smaller; }

نستطيع جمع أكثر من مُحدد ببعضها للحصول على مُحدد مُركز كما في المثال التالي:

div.some-class[attr$='ue'] { }

من الممكن أيضا أن تقوم بتحديد عنصر يكون تابعا (ابن) لعنصر آخر:

div.some-parent > .class-name { }

في المثال السابق، يكون العنصر الابن على مستوى واحد أسفل من العنصر الأب. تستطيع أن تُحدد عنصر من سلالة عنصرآأخر (الأب)، وهذا يعني من أي مستوى أسفل من مستوى العنصر الأب (ليس شرطا أن يكون مستوى واحد أقل):

div.some-parent .class-name { }

يختلف المُحدد التالي عن المُحدد السابق لوجود مسافة فاصلة بين الأسماء:

div.some-parent.class-name { }

نستطيع تحديد العنصر بناءً على عنصر آخر مجاور له باستخدام الطريقة التالية:

.i-am-just-before + .this-element { }

أو بناءً على أي عنصر يسبق العنصر الذي نريده:

.i-am-any-element-before ~ .this-element { }

توجد بعض المُحددات تسمى الأصناف الزائفة pseudo classes تطبَّق على العنصر عندما يكون بحالة محددة، فمثلا، نستطيع تحديد عنصر عندما يمر عليه المؤشر:

selector:hover { }

أو رابط تمت زيارته:

selector:visited { }

أو لم تتم زيارته:

selected:link { }

أو عنصر في حالة التركيز:

selected:focus { }

لتحديد أول عنصر تابع لعنصر:

selector:first-child {}

لتحديد آخر عنصر تابع لعنصر:

selector:last-child {}

نستطيع تنسيق أجزاء محددة من العنصر باستخدام العناصر الزائدة Pseudo elements، فمثلا، نستخدم before لإضافة محتوى قبل محتوى عنصر معين:

selector::before {}

وafter لإضافة محتوى بعد محتوى عنصر معين:

selector::after {}

في أماكن معينة، يُستخدم رمز * كحرف “بدل” لاختيار كافة العناصر.

* { } /* كل العناصر */
.parent * { } /* كل التابعين */
.parent > * { } /* كل الأبناء */

الخصائص

selector {

وحدات الطول إما مطلقة أو نسبية.
الوحدات النسبية:

    width: 50%;     /* نسبة من عرض العنصر الأب */
    font-size: 2em;   /* مضاعفة حجم الخط الخاص بالعنصر نفسه*/
    font-size: 2rem;  /* مضاعفة حجم الخط حسب حجم الخط الخاص بالعنصر الأب */
    font-size: 2vw;       /* مضاعفة حجم الخط بالنسبة ل 1% من عرض المساحة المرئية للمستخدم*/
    font-size: 2vh;   /* من الارتفاع*/
    font-size: 2vmin; /* مضاعفة حجم الخط لأصغر قيمة من الارتفاع أو العرض*/
    font-size: 2vmax; /* لاكبر قيمة */