الخدع المغلق

حيل CSS: الدليل النهائي لاختراقات CSS المتقدمة

إذا كنت قد فكرت يومًا في تعلم بعض حيل CSS المتقدمة ، فإن هذا الدليل يعد بداية رائعة. يغطي مواضيع CSS التالية ؛

  • تحريك المغلق
  • إعادة هيكلة كود CSS
  • الرسوم المتحركة الأصلية CSS3
  • استخدام التدرجات اللونية في CSS3
  • نظرة عامة على CSS Positioning
  • نظرة عامة على محددات CSS
  • فهم الخصوصية في CSS
  • استخدام WOW.js و Animate.css للرسوم المتحركة المشغلة بالتمرير
  • مقدمة إلى CSS flexbox ومحددات CSS المتقدمة

ما هو Animate.CSS [دروس]

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

الرسوم المتحركة لـ CSS هي امتداد لـ Cascading Style Sheets (CSS) مع ميزات رسوم متحركة مختلفة. تتضمن الوحدة مكتبة من التصميمات لمواقع الويب وتقدم للمستخدمين الراحة والإبداع وتطبيقات الويب الاحترافية. مطورو الويب بدء استخدام Animate.css [البرنامج التعليمي] يطبقون تصميمات الرسوم المتحركة ، ويعدلون تسلسلات CSS ، ويحسنون تصميم موقع الويب من خلال ملحق ورقة الأنماط المتتالية. يبسط الامتداد تفاعل المطور عند تنفيذ تصميمات الرسوم المتحركة مع تكوينات مباشرة لعناصر HTML محددة تتطلب معالجة واستخدام أقل للذاكرة من Flash أو JavaScript.

المزايا

لا شك أن Animate.CSS تكتسب شعبية من مجتمع المطورين من أجل البساطة والتوافق. في المقام الأول ، يحتوي Animate.CSS على نصوص برمجية بسيطة وجاهزة لاستخدام أوراق الأنماط التي تنسخ وتلصق في مستندات موقع الويب للمطورين لراحة مطور عالية. أيضًا ، تم تصميم الوحدة لمنع المستخدمين من الاستقرار على صور GIFS أو Flash العامة التي تحد من إبداع المطور وتتطلب خطوات إضافية تعمل على إبطاء أوقات اكتمال تطوير المشروع. بالإضافة إلى ذلك ، هناك الكثير من البرامج النصية لأسلوب تصميم الرسوم المتحركة المختصرة لخصائص الرسوم المتحركة عند بدء استخدام Animate.css. الأهم من ذلك ، يتضمن برنامج Animate.CSS ورقة الأنماط المتتالية (CSS) امتدادات الإطارات الرئيسية المتقدمة التي تزود المطورين بشكل أفضل بأدوات مطور تخصيص التصميم اللازمة للتصميمات المتحركة الإبداعية والوظيفية. إلى جانب سهولة استخدام الوحدة النمطية ، يثبت Animate أيضًا أنه متوافق مع ترقيات أو تحسينات إضافية مع Javascript.

كيف تعمل الرسوم المتحركة في Animate.CSS

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

الشروع في Animate.css [تعليمي]

خلق الرسوم المتحركة

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

إطارات مفتاحية

من خلال امتداد CSS Animate ، يعمل المستخدمون مع "keyframes" لإنشاء رسوم متحركة بعناصر مكونة. لصالح المستخدمين ، يتم إعداد "الإطارات الرئيسية" من خلال Cascading Style Sheets لتزويد المستخدمين بإمكانات التحرير التدريجية لمجموعات أنماط CSS مع السماح لمطوري الويب بالتركيز على ميزات الرسوم المتحركة المهمة. للتوضيح ، تساعد "أحجار الأساس" المستخدمين على إجراء التكوينات ضمن التوقيت والمدة والعناصر التفصيلية المتعمقة ضمن تسلسل تصميم مختلف.

الإطارات الرئيسية في القاعدة

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

Annimate.CSS تحويل

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

حجم

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

انحرف

للمتابعة ، تتكون أدوات التحويل في Animate.CSS من وظيفة انحراف لمطوري الويب. يتماشى تصميم خصائص العنصر مع المحور الأفقي والعمودي في تطبيقات الويب التي قد تكون منحرفة. عادةً ما تتضمن وظائف الانحراف قيم "x" و "y" لمساعدة المطورين على تشويه العناصر الموجودة على المحور.

اللغة

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

زاوية

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

مصفوفة

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

الشروع في Animate.css [تعليمي]
فقط أضف الماء الرسوم المتحركة CSS

يشير نظام Animate.CSS إلى "Just-Add-Water". تصنف الوحدة كمصدر للرسوم المتحركة "عبر المتصفح" مما يشير إلى سهولة استخدامها وتصميمها البسيط لمطوري الويب الجدد أو الراسخين.

تجهيز و تركيب

للبدء ، يطلب المسؤولون تثبيت برنامج Just Add Water Cascading Style Sheets Animation. أولاً ، يتم التثبيت عبر NPM. للتعريف ، يتعاون مدير حزمة Node مع جافا سكريبت النصي ، الذي يشترك في تصميم Animate.CSS. بشكل افتراضي ، تعمل لغة البرمجة مع Node.JS كمقدمة مستقرة لتطوير الويب. بعد ذلك ، يستخدم المستخدمون هذا الرمز "$ Node Package Manager install animate.css –save" لتثبيت البرنامج.

بدلاً من ذلك ، يتبع التسلسل "$ yarn add animate.css." لمزيد من التوضيح ، يساعد تركيب الغزل أيضًا المسؤولين في عمليات تثبيت المشروع. عادة ، يربط "Yarn" التركيبات بالتبعية التي تستخدم أكواد أو حشمة أخرى للتثبيت. على عكس طريقة تثبيت Node Packaging Manager (npm) ، فإن بديل "yarn" لا يطبق "–save" أو "–sav-dev" عند إضافة برامج جديدة. في العمق ، لا يمكن أن تعمل التبعية إلا بدعم من برنامج آخر أكثر بروزًا. يتعاون الجمع بين الوحدة النمطية وملحقات التثبيت مع نماذج المكتبة الجديدة المبتكرة.

استخدام Animate.CSS [دروس]

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

الشروع في Animate.CSS على مواقع الويب

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

الشروع في Animate.css [تعليمي]

الرسوم المتحركة على Animate.CSS

يقدّر مصممو الويب الذين بدأوا استخدام Animate.css الرسوم المتحركة البسيطة والجودة التي تميز المحتوى على تطبيقات الويب. تتضمن أوراق أنماط الرسوم المتحركة المتوفرة في Animate.CSS عددًا كبيرًا من أنماط الرسوم المتحركة لورقة الأنماط المتتالية (CSS) التي تخصص عناصر المستند. علاوة على ذلك ، لإنشاء تصميم متحرك لعنصر ما ، يجب على المطور إدخال العلامة "animated". يتم تضمين الفئة داخل عنصر مستند وتتطلب تعليمات إضافية لتحديد سمات المحتوى بشكل أفضل. بشكل عام ، يعتمد المطورون على عنصر نشط مع تعيين ميزة على "لانهائي" لتمكين دورات متعددة من تصميمات الرسوم المتحركة داخل موقع ويب. تحظى أيضًا قيود المدة على الرسوم المتحركة بتقدير كبير ، إلى جانب التأخيرات وتفاعل الرسوم المتحركة للمستخدم ضمن قائمة أوراق أنماط Animate.CSS.

يظهر أدناه فئات الرسوم المتحركة لمطوري الويب الذين يبدأون في Animate.css [البرنامج التعليمي] لتطبيقها في مستندات تطبيق الويب.

بدء توقيت الرسوم المتحركة

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

تأخير

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

سرعة

بالإضافة إلى ذلك ، تحتوي تصميمات العناصر في Annimate.CSS على قيم وقت السرعة. قد يصحح المطور سرعة الرسوم المتحركة باستخدام ورقة أنماط محددة للفصل. على سبيل المثال ، قد يبدو التسلسل الزمني للرسوم المتحركة كما يلي: مثال . " علاوة على ذلك ، يتيح المطور إمكانية ارتداد العنصر المتحرك وإنشاء وظيفة سرعة "أسرع". بالإضافة إلى ذلك ، قد تشير أسماء الفئات إلى "بطيء" و "أبطأ" و "سريع" و "أسرع". إلى جانب أسماء الفئات ، تتناول أوقات السرعة مثل "ثانيتان" و "2 ثوان" و "3 مللي ثانية" و "800 مللي ثانية" معدل وظيفة العناصر. بشكل افتراضي ، يتم تعيين معدلات العناصر على قيمة قياسية ثانية واحدة. يمكن للمستخدمين ، مع امتدادات إضافية ، تغيير التوقيتات عن طريق التحرير اليدوي للنص ضمن أوراق الأنماط المتتالية (CSS) Annimate.CSS.

بدء إنشاءات مخصصة

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

على سبيل المثال ، تستدعي المرحلة الأولية المطورين لإدخال نص ورقة الأنماط "$ cd path / to / animate.css /." مرة أخرى ، يخاطب المسؤول المستند بـ "$ npm install." بعد ذلك ، سينضم مطورو الويب إلى البنيات في برنامج التعبئة والتغليف "NPX Gulp". بالإضافة إلى ذلك ، يمكن تعديل العبوة داخل Gulp لتشمل أنماط تصميم متحركة لتناسب محتوى الويب. يمكن للمستخدمين تحرير هذه الحزمة باستخدام برنامج نصي "animate-config.json" لتحديد واختيار البنيات المناسبة. التحديد من خلال خيارات الإنشاء بقيم "صواب" و "خطأ" يحدد البنيات التي تمت إضافتها أو إزالتها من قائمة NPX Gulp.

Animate.CSS مع Javascript

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

الملخص

باختصار ، Animate.css عبارة عن وحدة مكتبة عبر مستعرضات مع برمجة بسيطة وفعالة لورقة الأنماط المتتالية (CSS). يشجع التصميم إبداع المطور مع التوافق مع التبعيات البديلة ويتضمن العديد من ميزات التصميم المتحركة. إلى جانب الإصدارات المختلفة من أوراق أنماط التصميم ، يتغير سلوك الرسوم المتحركة أيضًا من خلال تفاعل نص المبرمج. ينشئ مطورو تطبيقات الويب ، بدعم من Annimate.CSS ، المزيد المواقع المستجيبة برسوم متحركة عالية الجودة يسهل صيانتها وتوفر تفاعلًا فريدًا مع موقع الويب.

إعادة هيكلة كود CSS

إعادة هيكلة كود CSS

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

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

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

قم بإزالة طلبات HTTP غير الضرورية

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

إذا أضفت مجموعة من ملفات الخطوط الخارجية إلى مشروعك ، لكنك تشير حاليًا فقط إلى 1 أو 2 في ملف CSS ، فانتقل إلى أي من هذه التبعيات المرتبطة وأزلها من <head> من مستند HTML الخاص بك.

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

تبسيط قواعد CSS وتوحيدها

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

على سبيل المثال ، بدلاً من الكتابة:

ع {حجم الخط: 14 بكسل ؛ الهامش: 0 تلقائي ؛ عرض: مضمنة كتلة ؛ } h1 {margin: 0 auto؛ } img {display: inline-block؛ الهامش: 0 تلقائي ؛ }

 

ضع في اعتبارك كتابة:

p، h1، img {margin: 0 auto؛ } p {font-size: 14px؛ } p، img {display: inline-block؛ }

 

أو حتى أفضل:

/ * يتم تطبيقه على عناصر p و h1 و img * / .def-margin {margin: 0 auto؛ } / * يتم تطبيقه على عنصر p * / .def-fs {font-size: 14px؛ } / * يتم تطبيقه على عناصر p و img * / .d-ib {display: inline-block؛ }

 

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

إعادة هيكلة كود CSS

 يعيد تقييم الهوية وقيم الفئة

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

هذه رساله خاطئه

 

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

هذه رساله خاطئه

 

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

يعيد تقييم اختيارات المحدد

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

تحقق من وجود زيادات عن الحاجة

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

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

تصغير ملفات CSS الخاصة بك

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

هناك العديد من الأدوات المجانية لتصغير ملفات CSS (وملفات JS). خيار واحد هو cssminifier.com.

ادمج ملفات CSS الخاصة بك

كما تم التطرق إليه بإيجاز في المنشور الأخير ، من الجيد دمج مواردك قدر الإمكان. في حين أن هناك حجة جيدة للاحتفاظ بنمط CSS المعياري أثناء مرحلة التطوير (مثل الاحتفاظ بقواعد التخطيط في ملف CSS ، وخيارات الألوان في ملف آخر ، وما إلى ذلك) - في النهاية ستحتاج إلى دمج كل قواعد CSS هذه في ملف واحد لـ أفضل أداء.

الرسوم المتحركة الأصلية CSS3

الرسوم المتحركة الأصلية CSS3

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

إضافة الرسوم المتحركة إلى عنصر

لإعطاء رسم متحرك لعنصر HTML ، فإن أول خطوتين هما إعلان اسم للحركة ومدة. يتم ذلك مع animation-name و animation-duration الخصائص:

# انمي {
    اسم الرسوم المتحركة: تغيير اللون;
    مدة الرسوم المتحركة: 5s;
}

 

animation-duration يمكن قبول أي قيمة بالثواني أو بالمللي ثانية (تم التصريح باستخدام s or ms بعد عدد صحيح).

إنشاء الرسوم المتحركة

بمجرد إعلان الاسم والمدة ، حان الوقت لإنشاء الرسوم المتحركة. يتم ذلك باستخدام ملف @keyframes القاعدة ، متبوعة باسم الحركة:

تضمين التغريدة تغيير اللون {
    
}

 

داخل ال @keyframes ستكون القاعدة قاعدة لكل "إطار" للرسوم المتحركة ، يتم تحديدها بواسطة قيمة النسبة المئوية من 0% إلى 100%. 0% هي بداية الرسوم المتحركة ، 100% كونها النهاية ، مع أي قيم نسبة ممكنة بينهما. يمكن التفكير في هذا إلى حد كبير مثل الفيديو أو دفتر الصور المتحركة ، حيث تكون كل صفحة من الكتاب إطارًا فريدًا عند دمجها ، يخلق حركة:

تضمين التغريدة تغيير اللون {
    0% {
        لون الخلفية: أسود;
    }  
    50% {
        لون الخلفية: اللون الرمادي;
    }
    100% {
        لون الخلفية: أبيض;
    }
}

 

في المثال أعلاه ، color-change الرسوم المتحركة ستغير background-color ل #myAnimation عنصر من black at 0%، إلى gray at 50% ثم أخيرا white at 100%.

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

زر:تحوم {
    اسم الرسوم المتحركة: زر الرسوم المتحركة;
    مدة الرسوم المتحركة: 5s;
    وضع تعبئة الرسوم المتحركة: إلى الأمام;
}
تضمين التغريدة زر الرسوم المتحركة {
    0% {
        لون الخلفية: أزرق;
    }
    50% {
        تحول: مقياس(2.1);
        لون الخلفية: المراوغ الأزرق;
    }
    75% {
        تحول: مقياس(2.5);
        لون الخلفية: أبيض;
    }
    100% {
        تحول: مقياس(1.5);
        لون الخلفية: أزرق;
    }
}

 

في المثال أعلاه button-anim تأثيرات الرسوم المتحركة أي button العنصر عندما يتم تحريكه فوقه. انها background-color يتغير في أربع خطوات متساوية على مدار 5 ثوانٍ ، مع تغيير حجم العنصر نفسه بخطوات سرية وفريدة أيضًا (الأصلي ، إلى 2.1x ، إلى 2.5x ، ثم 1.5x الأصلي).

أحد الخصائص الإضافية المضمنة في المثال أعلاه هو animation-fill-mode خاصية. يمكن استخدام هذه الخاصية للإشارة إلى كيفية تطبيق الأنماط قبل (وبعد) اكتمال مدة الرسم المتحرك. باستخدام animation-fill-mode: forwards يشير إلى أن الأنماط في الإطار الأخير من الرسوم المتحركة (تلك الموجودة في 100% القاعدة) ستظل مطبقة. بدون إضافة animation-fill-mode الملكية ، وأنماط button سيعود إلى حالته الأصلية بعد اكتمال الرسوم المتحركة.

خلاصة

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

استخدام التدرجات اللونية في CSS3

استخدام التدرجات اللونية في CSS3

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

التدرجات الخطية الأساسية

لتعيين خلفية عنصر ما (سواء كان ملف body و / أو div، أو عنصر آخر) ، فإن background يتم استخدام الخاصية ، عادةً مع قيمة اللون:

الجسم {background: #fffbed؛ }

 

لاستخدام تدرج خطي بدلاً من لون خالص ، قم بتضمين لونين على الأقل (باستخدام إما قيم الألوان السداسية ، أو RGB ، أو hsl ، أو الألوان المسماة) ، مفصولة بفواصل ، داخل linear-gradient() القيمة:

جسم {خلفية: تدرج خطي (#fffbed، # 45add3)؛ }

التدرجات الخطية الأساسية

بادئات البائع

نظرًا لأن المتصفحات المختلفة تتعامل مع ملف linear-gradient القيمة بشكل مختلف ، يوصى بشدة باستخدام بادئات البائع معها. سيضمن ذلك فهم القيمة بواسطة Safari و Firefox و Chrome و Opera. لاستخدام بادئات البائع ، ما عليك سوى إضافة 2 إضافيين background القواعد مع linear-gradient القيمة مسبوقة بـ -webkit- و -moz-. يجب أن تظهر أيضًا قبل القاعدة العادية بدون أي بادئة للبائع:

الجسم {background: -webkit-linear-gradient (#fffbed، # 45add3)؛ الخلفية: -moz-linear-gradient (#fffbed، # 45add3)؛ الخلفية: التدرج الخطي (#fffbed ، # 45add3) ؛ }

 

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

السيطرة على الاتجاه

بشكل افتراضي ، ستنتقل التدرجات اللونية من أعلى إلى أسفل ، مع تضمين اللون الأول في linear-gradient قيمة كونه اللون العلوي.

يمكنك تغيير اتجاه التدرج ، على الرغم من ذلك ، عن طريق إضافة بعض الكلمات الأساسية للاتجاه قبل الألوان (على سبيل المثال to top, to bottom, to right, to left, to right top، وما إلى ذلك)

الجسم {الخلفية: التدرج الخطي (إلى أسفل اليمين ، #fffbed ، # 45add3) ؛ }

 

عند ضبط الاتجاه على الزاوية ، يمكن تحديد المحور x أو المحور y أولاً (على سبيل المثال to right bottom و to bottom right هي نفسها).

ألوان متعددة

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

الجسم {background: linear-gradient (#eaecee، # abebc6، # 45add3)؛ }

or

الجسم {background: linear-gradient (#eaecee، # ebdef0، # f4f6f7، # abebc6، # 4eb39d، # 45add3)؛ }

 

توقف اللون

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

الجسم {background: linear-gradient (#eaecee، # abebc6 30٪، # 45add3٪ 80)؛ }

 

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

التدرجات الشعاعية

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

الجسم {background: radial-gradient (#eaecee، # 45add3)؛ }

تدرجات ألوان CSS3

 

نظرة عامة على CSS Positioning

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

موقف ثابت

static هي القيمة الافتراضية لـ position، مما يعني أنك لم تحدد بوضوح أي قيمة لأي عنصر position، سيكون ذلك static بشكل افتراضي. العناصر ذات أ position of static لن يقبل أي خصائص box offset ، مثل margin or padding .

في المثال أدناه ، كل div سيتم تكديسها فوق بعضها البعض ، لأن كل منها عبارة عن عنصر على مستوى الكتلة:

وحدة 1 الوحدة 1 الوحدة 2 الوحدة 2

 

الجسم {font-family: Helvetica؛ اللون الابيض؛ } .container {background-color: #fffbed؛ }. الوحدة {background-color: # 337e7e؛ الارتفاع: 80 بكسل ؛ العرض: 80 بكسل ؛ محاذاة النص: مركز ؛ ارتفاع الخط: 80 بكسل ؛ الحدود: # 696969 2 بكسل صلبة ؛ }

 

تحديد المواقع CSS

الموقف النسبي

العناصر ذات أ position of relative تشبه إلى حد كبير قيمة static، على الرغم من وجود اختلاف رئيسي واحد: يمكنهم قبول خصائص box offset top, right, bottomو left.

في حالة وجود عنصر بامتداد position of relative، تحدد خصائص الإزاحة هذه المسافة من الموضع الطبيعي للعناصر. بمعنى آخر ، إذا كنت تريد تعيين عنصر بامتداد position of relative لديك top قيمة 10px، سيظهر العنصر 10px أقل من المكان الذي سيظهر فيه عادةً إذا كان position كان static.

العناصر ذات أ position of relative البقاء ضمن "التدفق" الطبيعي للعناصر ، فإن خصائص إزاحة الصندوق تقوم ببساطة بتحويل العناصر من التدفق الطبيعي:

وحدة 1 الوحدة 1 الوحدة 2 الوحدة 2

 

الجسم {font-family: Helvetica؛ اللون الابيض؛ } .container {background-color: #fffbed؛ }. الوحدة {background-color: # 337e7e؛ الارتفاع: 80 بكسل ؛ العرض: 80 بكسل ؛ محاذاة النص: مركز ؛ ارتفاع الخط: 80 بكسل ؛ الحدود: # 696969 2 بكسل صلبة ؛ الموقف: نسبي ؛ } .unit-1 {top: 10px؛ } .unit-2 {right: 30px؛ } .unit-3 {left: 20px؛ } .unit-4 {bottom: -30px؛ اليمين: 40 بكسل ؛ }

 

نظرة عامة على CSS Positioning

الموقف المطلق

العناصر ذات أ position of absolute تقبل أيضًا خصائص box offset ، على الرغم من إزالتها من التدفق الطبيعي للعناصر. استخدام خصائص إزاحة الصندوق في ملف absolute سيضع العنصر الموضع هذا العنصر في علاقة مباشرة بالعنصر الأصلي.

أخذ نفس CSS بالضبط مثل ملف position: relative; المثال أعلاه ، ولكن ببساطة تغيير position إلى absolute سيؤدي إلى وضع مختلف تمامًا للعناصر الفردية:

وحدة 1 الوحدة 1 الوحدة 2 الوحدة 2

 

الجسم {font-family: Helvetica؛ اللون الابيض؛ } .container {background-color: #fffbed؛ }. الوحدة {background-color: # 337e7e؛ الارتفاع: 80 بكسل ؛ العرض: 80 بكسل ؛ محاذاة النص: مركز ؛ ارتفاع الخط: 80 بكسل ؛ الحدود: # 696969 2 بكسل صلبة ؛ الموقف: مطلق ؛ } .unit-1 {top: 10px؛ } .unit-2 {right: 30px؛ } .unit-3 {left: 20px؛ } .unit-4 {bottom: -30px؛ اليمين: 40 بكسل ؛ }

 

تحديد المواقع CSS

موقف ثابت

عنصر بامتداد position of fixed هي مشابهة جدا ل position: relative;، على الرغم من أن الموضع يتعلق بإطار عرض المتصفح ، وليس أي عنصر أصلي. بالإضافة إلى ذلك ، لن يتم تمرير العنصر مع الصفحة ، ويبقى "ثابتًا" ومرئيًا دائمًا ، بغض النظر عن مكان المستخدم في الصفحة. غالبًا ما يستخدم هذا "لإصلاح" رؤوس الصفحات وتذييلاتها في الصفحة ، حتى تظل مرئية دائمًا.

نظرة عامة على محددات CSS

نظرة عامة على محددات CSS

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

اكتب المحددات

لكل عنصر HTML ، يوجد محدد مناظر لنوع العنصر هذا. سواء كان ملف div, p, img أو أي عنصر HTML آخر ، يكون محدد CSS المقابل هو نفسه تمامًا ، باستثناء أقواس الزاوية المستخدمة في العلامة:

ع {اللون: أسود ؛ } div {display: inline: block؛ } img {width: 200px؛ }

 

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

محددات الفئة

تستخدم محددات الفئة اسم فئة مرتبطًا بعناصر محددة. يعد هذا المحدد مثاليًا عندما تريد تطبيق أنماط معينة على مجموعة متنوعة من العناصر المختلفة ، بغض النظر عن نوع العنصر. على سبيل المثال ، قد يكون لديك فئة من .responsive تنطبق على أ p, div و img جزء:

هذه الفقرة مستجيبة A div مستجيب

 

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

.Responsive {العرض: 80٪؛ الهامش: 0 تلقائي ؛ }

 

يتم دائمًا تعيين محددات الفئة في ورقة أنماط باستخدام فترة (.) قبل اسم الفصل.

محددات الهوية

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

هذه فقرة ذات أنماط فريدة
#myParagraph {color: green: width: 200px؛ تعويم: اليسار؛ عرض: مضمنة كتلة ؛ }

 

يتم دائمًا تحديد محددات المعرفات في ورقة أنماط باستخدام علامة الجنيه أو علامة التجزئة (#) قبل اسم المعرف.

محدد عالمي

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

* {الهامش: 0 ؛ حشوة: 0 ؛ }

 

تم تحديد المحدِّد العام باستخدام علامة النجمة (*).

:hover

محدد آخر مشترك (وواحد من العديد من "الفئات الزائفة" في CSS) هو :hover. ستؤدي إضافة هذه الفئة الزائفة إلى أي محدد إلى استهداف حالة تحويم العنصر. هذا يعني أن هذه الأنماط سوف فقط يتم تطبيقها عندما يقوم المستخدم بتمرير الماوس فوق هذا العنصر باستخدام الماوس:

a: تحوم {text-decoration: underline؛ اللون البنفسجي؛ }

 

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

فهم الخصوصية في CSS

فهم الخصوصية في CSS

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

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

 

ع {اللون: أزرق ؛ } ع {اللون: أخضر؛ }

 

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

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

العناصر والعناصر الزائفة

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

 

p {border: 1px أسود خالص ؛ }

 

الفئات والسمات والفئات الزائفة

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

 

ع {اللون: أخضر ؛ } p.alert {color: red؛ }

 

معرفات

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

 

p # myParagraph {color: black؛ } p.alert {color: red؛ } ع {اللون: أخضر؛ }

 

على الرغم من وجود إعلانين إضافيين للفقرات الموجودة أسفل p#myParagraph إعلان ، معرف #myParagraph سيكون دائما أسود.

أنماط مضمنة

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

فقرتي الحمراء

 

سيكون النمط المضمن أعلاه باللون الأحمر دائمًا ، بغض النظر عن الأنماط المطبقة في أي مكان آخر. *

!important

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

 

ص {اللون: أزرق! مهم ؛ }

 

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

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

استخدام WOW.js و Animate.css للرسوم المتحركة المشغلة بالتمرير

WOW.js و Animate.css

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

يمكن تحقيق ذلك بالطبع عبر jQuery ، لكن استخدام مكتبة JavaScript لهذه الوظيفة وحدها يضيف حجمًا غير ضروري لوظيفة يمكن إنجازها بواسطة نص برمجي بسيط. يحل WOW.js هذه المشكلة ، ويقدم مكتبة سهلة الاستخدام لإضافة الرسوم المتحركة التي يتم تشغيلها عن طريق التمرير ، دون الحاجة إلى jQuery ، بحجم 3 كيلوبايت فقط.

سيوفر هذا المنشور دليلًا حول استخدام WOW.js و animate.css لمشاريع الويب الخاصة بك ، بما في ذلك الخيارات المختلفة المتاحة لتثبيته.انقر فوق إلى تويت

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

حول animate.css

استخدام WOW.js و Animate.css لتحديث Scroll-Triggered Animations 2019

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

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

  • الرسوم المتحركة الثابتة: تظهر هذه الأنواع من الرسوم المتحركة مباشرةً عند تحميل صفحة ويب وفتحها. بمعنى آخر ، لم يتم التمرير (WOW.js)!
  • التمرير للرسوم المتحركة: تظهر هذه الأنواع من الرسوم المتحركة عندما يقوم المستخدم بالتمرير إلى عرض العنصر على صفحة ويب. هذا هو نوع الرسوم المتحركة الذي سنركز عليه مع WOW.js. يمكن أيضًا إنشاء هذه الرسوم المتحركة باستخدام jQuery.
  • انقر فوق الرسوم المتحركة: باستخدام مزيج من برمجة jQuery و Javascript ، يمكنك إنشاء رسوم متحركة على موقع الويب الخاص بك يتم تشغيلها عندما ينقر المستخدم على عنصر معين.
  • الرسوم المتحركة "الخاصة": يمكن استخدام هذه الرسوم المتحركة الأكثر غرابة في العناصر عندما تريد حقًا جذب انتباه المستخدم على الفور باستخدام رسوم متحركة لافتة للنظر.

حول WOW.js

WOW.js هو ملف Javascript والذي ، عند إضافته إلى مستند HTML الخاص بك ، يمكنه إنشاء تأثيرات جذابة وديناميكية على الموقع. يعد تأثير التمرير هذا أحد أكثر الخيارات شيوعًا لمصممي الويب ، حيث تم ترخيصه كرمز مفتوح المصدر بموجب MIT. عندما تكون على موقع ويب يقوم بتنفيذ WOW.js ، ستظهر العناصر المتحركة بطريقة سحرية أثناء التمرير لأسفل الموقع. للحصول على مثال لهذا التأثير ، قم بزيارة الموقع الرسمي لـ WOW.js. إنها أداة تصميم رائعة لاستخدامها مع animate.css.

بالمقارنة مع خيارات الرسوم المتحركة الأخرى باستخدام Javascript ، فإن WOW.js مشهور للغاية بسبب شفرته البسيطة والخالية من السائبة. لاحظ أنه يمكنك استخدام مكتبات الرسوم المتحركة الأخرى في CSS لتنشيط WOW.js ؛ يتعامل WOW.js مع animate.css كمكتبة افتراضية. يتضمن ذلك مكتبات مثل CSShake أو DynCSS. WOW.js مجاني للاستخدام في مشروع مفتوح المصدر ، على الرغم من أنه يتطلب شراء ترخيص لأي مشروع تجاري.

إضافة animate.css و WOW.js إلى مشروعك

لبدء تنشيط موقع الويب الخاص بك ، فإن الخطوة الأولى هي إضافة animate.css و WOW.js إلى مستند HTML الخاص بك. هناك عدة طرق يمكنك اتباعها لإضافة الملفات إلى مشروع HTML الخاص بك. يمكنك تنزيل توزيع animate.css و WOW.js من كل موقع من مواقعهم الرسمية ، أو ببساطة قم بالارتباط بالملفات المتاحة من كندي. يستضيف CDN مجموعة كبيرة من المكتبات لـ Javascript و CSS.

من الفوائد الرئيسية لاستخدام animate.css لموقعك الإلكتروني أن كود CSS محفوظ في ملف واحد فقط ، مما يبسط مشروعك جدا. بمجرد إضافة ملف CSS إلى مشروعك ، كل ما عليك فعله هو ربطه بـ HTML في رأس المستند. بدلاً من ذلك ، يمكنك ببساطة ربط ملف CDN بمستند HTML الخاص بك. اعتمادًا على ما إذا كنت تضيف ملف animate.css مباشرةً أو تقوم ببساطة بالارتباط بملف CDN ، فإن href فقط سيختلف قليلاً:

قم بتثبيت animate.css و WOW.js

انقر فوق الروابط أدناه لعرض ملفات animate.css و WOW.js على شبكة CDN:

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

استخدام npm لتثبيت animate.css و WOW.js

بدلاً من ذلك ، يمكنك استخدام مدير الحزم مثل npm (مدير حزم Javascript) لتثبيت كل من animate.css و WOW.js بمجرد كتابة بعض الكلمات الرئيسية في سطر الأوامر. من جذر دليل المشروع ، قم بتشغيل الأمر التالي من سطر الأوامر:

npm تثبيت wowjs

تتمثل إحدى فوائد تثبيت WOW.js عبر npm في أنه يقوم تلقائيًا أيضًا بتثبيت animate.css كعنصر تبعية. بهذه الطريقة ، لا داعي للقلق بشأن اتباع تعليمات تنزيل animate.css بأحد الخيارات التي تمت مناقشتها أعلاه. على غرار إضافة الملف مباشرةً أو باستخدام CDN ، سيتم ربط animate.css في المستند (سيختلف مسار href اعتمادًا على موقع الملف):

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

جديد WOW (). init ()؛

إضافة الرسوم المتحركة إلى العناصر

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

أضف فئة من .wow إلى أي عنصر HTML تريد تحريكه باستخدام WOW.js ، مثل عنصر h1:

مرحبا بكم في موقعي!

يحتوي Animate.css على 75 نمطًا مختلفًا للرسوم المتحركة للاختيار من بينها ، ويمكن عرضها جميعًا على الموقع الرسمي (انظر أعلاه). بمجرد تحديد الرسوم المتحركة التي ترغب في استخدامها ، أضف اسمها كفئة CSS على العنصر المراد تحريكه ، جنبًا إلى جنب مع الفئة "wow". فيما يلي بعض الأمثلة على animate.css و WOW.js في العمل على مستند HTML الخاص بك:

مرحبا بكم في موقعي!

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

انقر هنا

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

تعديلات على الرسوم المتحركة WOW.js

هناك تعديلات طفيفة يمكن إجراؤها على الرسوم المتحركة لـ CSS من خلال بعض التحرير المباشر في مستند HTML الخاص بك. يمكنك إضافة هذه الخصائص الأربع بعد فئة = "واو" بل ويمكنك دمجها في أي علامة HTML. بشكل أساسي ، تعد هذه الخصائص ببساطة طريقة رائعة وسهلة للمستخدمين لإضافة تنوع في الرسوم المتحركة للتمرير. فيما يلي أوصاف للخصائص الأربع التي يمكنك تغييرها عند تحريك عنصر HTML باستخدام WOW.js:

  • data-wow-delay = "_ s": عادةً ما يظهر العنصر تلقائيًا عندما يقوم المستخدم بالتمرير إلى موقعه. باستخدام هذه الخاصية ، يمكنك تأخير الحركة لمدة _ ثانية.
  • data-wow-duration = "_ s": يمكنك جعل الرسوم المتحركة تدوم _ ثانية ، وهذا مفيد لتسريع أو إبطاء ظهور العنصر.
  • data-wow-iteration = "_": باستخدام هذه الخاصية ، يمكنك تكرار الرسوم المتحركة ، أو تكرارها ، _ مرات قبل أن تصبح ثابتة على صفحتك.
  • data-wow-offset = "_": تسمح هذه الخاصية للرسوم المتحركة ببدء _ بكسل من حافة المتصفح قبل الرسوم المتحركة.

مكتبات الرسوم المتحركة البديلة لـ animate.css و WOW.js

Bounce.js

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

لمعرفة المزيد حول إنشاء الرسوم المتحركة باستخدام Javascript وتثبيت مكتبة Bounce.js في مشروعك ، يمكنك اتباع الإرشادات الخاصة بتثبيت مكتبة Bounce.js عليها موقع جيثب.

Anime.js

Anime.js ، التي تستخدم خصائص CSS وكائنات Javascript و SVG وخصائص DOM لإنشاء رسوم متحركة رائعةمكتبة الرسوم المتحركة الشهيرة الأخرى هي Anime.js ، والتي تستخدم خصائص CSS ، وكائنات Javascript ، و SVG ، وخصائص DOM لإنشاء رسوم متحركة رائعة. تتميز مجموعة Julian Garnier بالعشرات من الرسوم المتحركة السلسة التي يمكنك إضافتها مباشرة إلى موقعك الخاص. يمكنك عرض الرسوم المتحركة المختلفة التي تم إنشاؤها باستخدام Anime.js في مجموعة Anime.js Codepen. على عكس WOW.js ، لا تُستخدم مكتبة الرسوم المتحركة هذه بالضرورة لتحريك عناصر HTML على الموقع. بدلاً من ذلك ، يتم استخدام Anime.js لإنشاء "رسوم توضيحية" متحركة منفصلة لموقع الويب الخاص بك تمامًا لإضافة المزيد من المظهر المرئي. بعض من مفضلاتي تشمل Garnier رسم خط للرسوم المتحركة و مظاهرة طبقات الرسوم المتحركة. لإضافة مكتبة Anime.js إلى مشروعك ، يمكنك التثبيت عبر npm.

عرض التوجيهات والوثائق الخاصة باستخدام Anime.js على ملف موقع جيثب.

Hover.css

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

لعرض الإرشادات والوثائق المحددة لتثبيت Hover.css واستخدامه ، انتقل إلى المسؤول موقع جيثب.

من النوع Type.js

استخدام منشور مدونة WOW.js و Animate.css: نظرة عامة على Typed.jsلإنشاء الآلة الكاتبة الأيقونية أو تأثير الكتابة ، فإن الخيار الشائع لمطوري الويب هو استخدام Typed.js. تستخدم العديد من مواقع الويب مكتبة الرسوم المتحركة هذه لإنشاء تأثيرات كتابة السلاسل على الصفحات ، بما في ذلك منصة مساحة العمل الجماعية الشهيرة ، Slack. ما عليك سوى تثبيت مكتبة Hover.css عبر npm أو ربط ملف CDN بمستند HTML الخاص بك. مع واحد في الأساس علامة ، يمكنك تحريك علامة نصية بتنسيق HTML باستخدام تأثير الآلة الكاتبة. مع التغيير والتبديل الكافي ، يمكنك إنشاء تأثيرات كتابة أكثر تقدمًا على موقع الويب الخاص بك للحصول على تأثير أكثر إثارة. على سبيل المثال ، يمكنك إنشاء تأثير توقف الكمبيوتر مؤقتًا أثناء كتابته أو تأثير حذف الأحرف في الكلمة.

المسؤول موقع جيثب يتضمن كل التعليمات البرمجية المصدر والوثائق التفصيلية حول كيفية تخصيص الرسوم المتحركة للكتابة لتلبية تفضيلاتك الشخصية.

CSShake

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

عندما تكون جاهزًا لتثبيت CSShake على مشروعك الخاص ، اتبع التعليمات الخاصة بالتثبيت على ملف موقع جيثب.

مقدمة إلى CSS flexbox ومحددات CSS المتقدمة

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

display: flex

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

بينما تتطلب معظم التخطيطات استخدام خصائص إضافية. يمكن إنشاء تخطيط بسيط من عمودين باستخدام هذه الخاصية وحدها.

على سبيل المثال ، يمكننا أن نأخذ حاوية بها 2 div مكدسة فوق بعضها البعض ، وتحويلها إلى تخطيط من عمودين مع إضافة display: flex خاصية:

الكود الأصلي:

HTML


    
    

 

CSS:

#حاوية {
    الطول: 600px؛
    عرض: 800px؛
}
# عمود 1 {
    لون الخلفية: أزرق ؛
    الطول: 300px؛
    عرض: 400px؛
}
# عمود 2 {
    لون الخلفية: أخضر ؛
    عرض: 400px؛
    الطول: 300px؛
}

 

مقدمة إلى CSS flexbox

CSS مع Flexbox:

#حاوية {
    الطول: 600px؛
    عرض: 800px؛
    عرض: المرن.
}
# عمود 1 {
    لون الخلفية: أزرق ؛
    الطول: 300px؛
    عرض: 400px؛
}
# عمود 2 {
    لون الخلفية: أخضر ؛
    عرض: 400px؛
    الطول: 300px؛
}

 

مقدمة إلى CSS flexbox

flex-direction

يمكننا إضافة تحكم إضافي في تدفق العناصر في الحاوية المرنة عبر flex-direction خاصية. بشكل افتراضي ، ستتدفق جميع العناصر داخل الحاوية المرنة في ملف row من اليسار إلى اليمين ، على الرغم من أنه يمكننا أيضًا تعيين هذه الخاصية لتكون لها قيم column, row-reverse or column-reverse.

ضبط التباعد والمحاذاة مع justify-content

في كثير من الأحيان سيكون هناك مساحة أكبر في الحاوية مما تستهلكه العناصر الموجودة فيه ، لذلك من المحتمل أنك تريد تبرير تباعد العناصر بطريقة معينة. بشكل افتراضي ، ستتم محاذاة جميع العناصر داخل حاوية مرنة مع بداية الحاوية (يشار إليها باسم flex-start) ولكن هناك مجموعة متنوعة من الخيارات الأخرى. لاحظ أن الموضع الفعلي سيختلف اعتمادًا على إعداد flex-direction: إذا تم تعيين الاتجاه على أنه row then flex-start سيشير إلى أقصى يسار الحاوية ، بينما يشير اتجاه column سيشير إلى الجزء العلوي من الحاوية لـ flex-start.

بالعودة إلى مثال الكود الأصلي ، سنزيد من width من حاويتنا قليلاً لإظهار الاختلاف بشكل أفضل justify-content الإعدادات.

justify-content: center سيضع جميع العناصر مباشرة في وسط العمود:


    
    

 

#حاوية {
    الطول: 600px؛
    عرض: 1000px؛
    عرض: المرن.
    تبرير المحتوى: المركز ؛
}
# عمود 1 {
    لون الخلفية: أزرق ؛
    الطول: 300px؛
    عرض: 400px؛
}
# عمود 2 {
    لون الخلفية: أخضر ؛
    عرض: 400px؛
    الطول: 300px؛
}

 

مقدمة إلى CSS flexbox

justify-content: flex-end هو عكس justify-content: flex-start، بوضع العناصر في نهاية الحاوية:

نصائح CSS flexbox

justify-content: space-between سيضع جميع العناصر في كل طرف من أطراف الحاوية ، تاركًا أي مساحة متبقية في وسط الحاوية ، وكذلك حول أي عناصر إضافية بالداخل (في حالات الحاوية التي تحتوي على 3 عناصر أو أكثر):

اختراق CSS flexbox

justify-content: space-around يشبه تمامًا spae-between، على الرغم من وجود مساحة إضافية في نهايات الحاوية:

نصائح وحيل CSS flexbox

محددات CSS3 المتقدمة

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

محددات الأطفال

تُستخدم المحددات الفرعية لاستهداف العناصر المتداخلة في بعضها البعض. يوجد نوعان مختلفان من المحددات الفرعية ، المحددات الفرعية والمحددات الفرعية المباشرة.

محددات النسب

تُستخدم محددات السليل لاستهداف عنصر معين (أو مجموعة من العناصر) ، بغض النظر عن مكان تداخلها في العنصر الأصلي. فمثلا:

.container p

 

من شأنه أن يستهدف كلا الحالتين من p عنصر في HTML التالي:

هذه فقرة هذه فقرة أخرى متداخلة لأسفل.

 

محددات الأطفال المباشرة

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

.container> p

 

سيختار فقط الأول p عنصر في HTML التالي:

هذه فقرة مستهدفة بواسطة محدد Direct Child هذه فقرة أخرى ، لا يستهدفها محدد Direct Child

 

محددات الأشقاء

محددات الأشقاء العامة

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

h1 ~ div

 

سوف تستهدف 2 لاحظ div العناصر التي تظهر بعد h1، ولكن ليس الذي سبقه ، أو أي من المستويات الأخرى التي قد تكون متداخلة:

فقرة العنوان سيتم استهداف div فقرة أخرى سيتم أيضًا استهداف div هذا

 

محددات الأخوة المجاورة

محدد الأخوة المجاور يستخدم لاستهداف العناصر التي تظهر مباشرة بعد عنصر معين. فمثلا:

h1 + ص

 

سيستهدف فقط p العنصر مباشرة بعد h1:

... ... سيتم استهداف هذه الفقرة ... ...

 

الطبقات الزائفة

في منشور محددات CSS السابق ، تطرقنا إلى الفئات الزائفة عبر ملف :hover محدد. ومع ذلك ، هناك العديد من الفئات الزائفة الأخرى ، مثل :link, :visited, :active وأكثر من ذلك.

لأسلوب a الرابط الذي لم تتم زيارته بعد ، استخدم ملف :link المحدد:

أ: رابط {color: green؛ }

 

ل stlye a الرابط الذي تمت زيارته ، استخدم :visited المحدد:

a: زار {color: blue؛ }

 

أفضل :active يمكن استخدام المحدد عندما يتفاعل المستخدم مع عنصر ، مثل النقر فوقه:

.click-me: active {border-radius: 50٪؛ }

 

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

أ: التركيز {الارتفاع: 120٪ ؛ }

خلاصة

هل تجد حيل CSS مفيدة في هذا المنشور؟ يرجى مشاركة تعليقاتك أدناه.

 

كاتب السيرة الذاتية

شارك Angelo في عالم تكنولوجيا المعلومات الإبداعي لأكثر من 20 عامًا. قام بإنشاء أول موقع ويب له في عام 1998 باستخدام Dreamweaver و Flash و Photoshop. وسع معرفته وخبرته من خلال تعلم مجموعة واسعة من مهارات البرمجة ، مثل HTML / CSS و Flash ActionScript و XML.

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

بصرف النظر عن تشغيل Sunlight Media ، يستمتع Angelo بكتابة محتوى إعلامي يتعلق بتطوير الويب والتطبيقات والتسويق الرقمي والمواضيع الأخرى المتعلقة بالتكنولوجيا.

أضف تعليق

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