دورة لغة CSS للمبتدئين: تصميم واجهات الويب

أهلًا بك في أولى حلقات كورس CSS!

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

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

قبل أن نبدأ، سأسألك: لماذا تريد تعلم CSS؟ هل هو للدخول في مجال تصميم الويب (Web Design) أم لتصبح مطور واجهات مستخدم (UI Developer)؟ سأناقش معك أهمية هذه اللغة في هذه المجالات وسأعطيك بعض النصائح قبل أن تبدأ، مثل ضرورة الإلمام بأساسيات HTML وأهمية امتلاكك محرر أكواد مناسب ومعرفة كيفية التعامل مع نظام التشغيل الذي تستخدمه.

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

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

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

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

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

في الجزء الأخير من الحلقة، سأوضح لك كيفية استدعاء ملف CSS وكتابة التنسيقات داخله، وسنناقش الفرق بين طرق الاستدعاء المختلفة:

1. التنسيق الداخلي (Internal Style) باستخدام style داخل ملف HTML.
2. التنسيق الخارجي (External Style) عبر ربط ملف CSS بملف HTML باستخدام link.
3. التنسيق المضمن (Inline Style) وهو أقوى الأنواع، حيث يتم تحديد التنسيق مباشرة داخل العنصر نفسه.

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

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

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

في الجزء الأخير من الحلقة، سأشرح لك أنماط التسمية المقبولة، وسأعرض عليك الأنواع المختلفة مثل:

# Camel Case → مثل: myElementName
# Snake Case → مثل: my_element_name
# Pascal Case → مثل: MyElementName
# Kebab Case → مثل: my-element-name
# Upper Capital Case → مثل: MYELEMENTNAME

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

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

سنبدأ بأبسط طريقة لتغيير الخلفية، وهي استخدام خاصية background-color لتحديد لون الخلفية مباشرة. بعد ذلك، سأنتقل إلى الطريقة الثانية، وهي استخدام RGB، حيث يتم تحديد الألوان من خلال قيم تتراوح بين 0 و 255، وسأوضح لك كيف تؤثر هذه القيم على اللون، فمثلًا 0 يعطي اللون الأسود و255 يعطي أقصى درجة من الألوان الأخرى، وسنتعلم أيضًا كيفية التحكم في شفافية الألوان باستخدام RGBA.

ثم سنتعرف على الطريقة الثالثة، وهي استخدام الأكواد الست عشرية (Hex Code)، والتي تعتمد على نطاق يمتد من 00 إلى FF لكل لون، وسأوضح لك كيف تعمل هذه الطريقة وكيفية استخدامها لتحديد الألوان بدقة.

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

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

سنبدأ بشرح خاصية background-attachment، والتي تحدد ما إذا كانت الخلفية ثابتة أثناء التمرير أو تتحرك مع المحتوى. سنتعرف على كيفية استخدام scroll لجعل الخلفية تتحرك مع الصفحة، أو fixed لجعلها ثابتة، وسأوضح متى يكون لكل خيار تأثير مناسب على التصميم.

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

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

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

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

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

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

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

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

بعد ذلك، سنتناول العوامل الأساسية التي تحتاج إلى ضبطها عند استخدام border:

1. حجم الحدود (border-size): يحدد سماكة الإطار.
ن2. وع الحدود (border-style): يحدد شكل الإطار، مثل مستقيم، منقط، متقطع، مزدوج، وغيرها.
3. لون الحدود (border-color): يسمح لك باختيار أي لون للإطار.

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

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

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

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

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

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

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

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

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

في هذه الحلقة، سنتعرف على خاصية display في CSS، وهي من أهم الخصائص التي تحدد كيفية عرض العناصر داخل الصفحة، سواء كانت عناصر خطية (Inline) أو عناصر كتلية (Block).

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

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

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

بعد ذلك، سنتعرف على الطريقة الثانية وهي خاصية visibility، والتي تتيح لك إخفاء العنصر دون إزالته من التدفق الطبيعي، أي أن العنصر يظل يحتفظ بمساحته ولكن يكون غير مرئي. سأوضح لك متى يكون استخدام visibility: hidden; أكثر فائدة من display: none; في تصميمك.

خلال التطبيق العملي، سنرى كيف يمكن استخدام هذه الخاصية مع خصائص أخرى مثل margin لضبط التباعد بعد إخفاء العناصر.

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

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

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

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

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

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

سنبدأ بشرح الفرق بين العناصر inline والعناصر block، وكيف يؤثر كل منهما على أبعاد العنصر في الصفحة. ثم سنتعلم كيفية استخدام min-width و max-width لتحديد أقل وأكبر عرض ممكن للعنصر، مما يساعد في إنشاء تصميمات متجاوبة تتكيف مع مختلف أحجام الشاشات.

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

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

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

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

1. visible: يسمح للمحتوى بالخروج من حدود العنصر.
2. hidden: يخفي أي محتوى زائد خارج العنصر.
3. scroll: يضيف أشرطة تمرير عند الحاجة، مما يسمح للمستخدم بتصفح المحتوى المخفي.
4. auto: يضيف أشرطة تمرير تلقائيًا فقط عند الحاجة.

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

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

في هذه الحلقة، سنتعرف على خاصية text-shadow في CSS، وهي الخاصية التي تتيح لك إضافة ظل للنصوص لمنحها تأثيرًا أكثر وضوحًا وجاذبية في التصميم.

سنبدأ بالتطبيق العملي، حيث سنستخدم عنصر

في هذه الحلقة، سنتعرف على خاصية alignment في CSS، وهي الخاصية المسؤولة عن محاذاة النصوص والعناصر داخل الصفحة، مما يساعد في التحكم في مواضع المحتوى وتحسين تنسيقه.

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

بعد ذلك، سنتعرف على خاصية direction، التي تتحكم في اتجاه النصوص، مثل:

- LTR (Left to Right): لعرض النصوص من اليسار إلى اليمين.
- RTL (Right to Left): لعرض النصوص من اليمين إلى اليسار، مثل النصوص العربية.
- center: لمحاذاة النصوص في المنتصف.

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

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

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

سنبدأ بالتطبيق العملي، حيث سنتعرف على أهم الخصائص المتعلقة بـ spacing:

- letter-spacing: المسؤولة عن ضبط التباعد بين الحروف داخل النص.
- text-indent: المسؤولة عن تحديد المسافة البادئة لأول سطر في الفقرة.
- word-spacing: التي تتحكم في المسافة بين الكلمات داخل النص، مما يسمح بزيادة أو تقليل التباعد بينها.
- line-height: التي تحدد المسافة بين الأسطر عموديًا، مما يساعد في تحسين تنسيق النصوص الطويلة.

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

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

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

سنبدأ بشرح خاصية white-space، والتي تحدد كيفية التعامل مع المسافات الفارغة داخل النصوص. ثم سنركز على خاصية text-overflow، والتي تتيح لك إخفاء النص الزائد داخل العنصر مع الإشارة إلى وجود المزيد من المحتوى، مثل إضافة علامة الحذف (...) عند تجاوز النص للطول المحدد.

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

في هذه الحلقة، سنتعرف على خاصية font-family في CSS، والتي تتيح لك تحديد نوع الخطوط المستخدمة في النصوص داخل الصفحة، مما يمنحك مرونة في تحسين المظهر العام للمحتوى.

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

بعد ذلك، سنتعرف على الفرق بين خطوط Serif وخطوط Sans-Serif، حيث أن:

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

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

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

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

سنبدأ بشرح خاصية font-style، وهي المسؤولة عن تغيير شكل الخط، مثل جعله مائلًا (italic) أو عاديًا (normal).

بعد ذلك، سنتعرف على خاصية font-variant، والتي تتيح لك التحكم في طريقة عرض الحروف، مثل تحويل النصوص إلى حروف كبيرة (small-caps) بطريقة احترافية.

ثم سننتقل إلى خاصية font-weight، والتي تتحكم في سمك الخط، حيث يمكن استخدام القيم مثل bold لزيادة سماكة الخط، أو normal لإعادته إلى حالته الأصلية.

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

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

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

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

بعد ذلك، سنتعرف على بعض الأشكال الشائعة للمؤشر، مثل:

1. default: الشكل الافتراضي للمؤشر.
2. pointer: يستخدم للإشارة إلى الروابط والعناصر القابلة للنقر.
3. grab: يظهر عند التعامل مع عناصر قابلة للسحب.
4. help: يظهر عند الحاجة إلى معلومات إضافية.

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

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

في هذه الحلقة، سنتعرف على خاصيتي float و clear في CSS، وهما من الخصائص الأساسية التي تساعد في تحريك العناصر داخل الصفحة والتحكم في طريقة توزيعها.

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

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

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

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

سنبدأ بالتطبيق العملي، حيث سأوضح كيف يمكن استخدام calc() مع الخواص التي تم شرحها سابقًا، مثل width و height و margin و padding، مما يسمح بإنشاء تصميمات متجاوبة.

بعد ذلك، سنتعرف على العمليات الحسابية التي يمكن استخدامها داخل calc(), مثل:

- الجمع (+) لزيادة القيم.
- الطرح (-) لتقليل القيم.
- الضرب (*) لمضاعفة القيم.
- القسمة (/) لتقسيم القيم بدقة.

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

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

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

بعد ذلك، سنتعرف على القيم المتغيرة لخاصية opacity، والتي تتراوح بين:

- 0.1 (شفافية شبه كاملة).
- 0.5 (نصف شفافية).
- 0.9 (شفافية خفيفة جدًا، العنصر شبه مرئي).

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

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

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

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

بعد ذلك، سنتعرف على بعض القيم المهمة لهذه الخاصية، مثل Default value، Relative، وAbsolute، وسنرى كيف يمكن استخدامها لتحديد موقع العنصر داخل الصفحة.

في نهاية الحلقة، سنلخص كيفية تفعيل position بالشكل الصحيح، وسنتعلم الطرق اللازمة لاستخدامها في تصميماتك بطريقة متقنة.

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

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

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

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

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

في هذه الحلقة، سنتعرف على خاصية styling list في CSS، وهي المسؤولة عن تنسيق القوائم وتحديد شكل النقاط أو الأرقام المستخدمة لتنظيم العناصر داخل القائمة.

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

بعد ذلك، سنتعرف على بعض الخواص المرتبطة بها، مثل list-style-type، التي تتحكم في شكل الرموز المستخدمة، وlist-style-image، التي تسمح بإضافة صور بدلاً من الرموز التقليدية.

في نهاية الحلقة، سنقدم ملخصًا لكيفية استخدام styling list بفعالية، وسنتعرف على بعض التنسيقات الإضافية التي يمكن تطبيقها لتحسين مظهر القوائم داخل الموقع.

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

سنبدأ بالتطبيق العملي، حيث سنوضح كيف يمكن استخدام Pseudo Classes لتغيير لون العناصر، شكلها، أو رمزها عند تفاعل المستخدم معها، مثل عند تحريك المؤشر فوقها أو عند زيارتها.

بعد ذلك، سنستعرض بعض أكثر Pseudo Classes شيوعًا، مثل:

:hover – لتغيير مظهر العنصر عند مرور المؤشر عليه.
:focus – لتنسيق الحقول النشطة عند إدخال البيانات.
:nth-child() – لتحديد عناصر معينة داخل القائمة أو الجدول.

في نهاية الحلقة، سنقوم بمراجعة شاملة لما تم شرحه، وسنتعرف على أهمية Pseudo Classes في CSS، حيث تُستخدم على نطاق واسع في تطوير المواقع لزيادة التفاعل وتحسين تجربة المستخدم.

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

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

بعد ذلك، سنتعرف على خاصية :checked، والتي تتيح لك استهداف عناصر الـ checkbox وعناصر الإدخال الأخرى، مما يسمح بتغيير شكلها والتحكم في ظهورها أو إخفائها باستخدام display.

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

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

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

في نهاية الحلقة، سأقدم مقارنة مبسطة بين Pseudo Class و Pseudo Elements، وسنرى الفرق بينهما وكيفية استخدام كل منهما بالشكل المناسب.

في هذه الحلقة، سنواصل شرح خاصية Pseudo Elements في CSS، مع استكمال بعض الخواص الإضافية التي تعتمد عليها، إلى جانب مراجعة الفرق بينها وبين Pseudo Class.

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

وفي نهاية الحلقة، سنختتم بتوضيح كيفية تفعيل عنصر selection، والذي يسمح بتخصيص مظهر النص عند تحديده من قبل المستخدم، وسنتعلم طرق استخدامه بطريقة سليمة وفعالة في التصميم.

في هذه الحلقة، سنتعرف على خاصية border-radius في CSS، والتي تتيح لك تغيير شكل زوايا العناصر، مما يساعد في تصميم عناصر أكثر سلاسة وانسيابية.

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

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

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

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

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

سنبدأ بالتطبيق العملي، حيث سنوضح كيفية استخدام box-shadow داخل الأكواد، وسنتعلم كيفية التحكم في موضع الظل، انتشاره، وحِدّته للحصول على تأثيرات بصرية مختلفة.

كما سنناقش كيف يمكن للمستخدمين الاستفادة من هذه الخاصية لإنشاء عناصر مميزة وإضفاء لمسات إبداعية على التصميم.

في نهاية الحلقة، سنوضح الطريقة الصحيحة لاستخدام box-shadow بفعالية، مع مراعاة ترتيب الخطوات المطلوبة لضبط الظل، سواء كان داخليًا (inset) أو خارجيًا، للحصول على المظهر المطلوب.

في هذه الحلقة، سنتعرف على خاصية Box Model في CSS، والتي تُعرف أيضًا باسم Box Size، وهي المسؤولة عن حجم المحتوى داخل العنصر وكيفية تحديد أبعاده.

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

بعد ذلك، سنتعرف على القيم الأساسية لخاصية Box Size، وهي:

- content-box: حيث يتم احتساب الحجم بناءً على المحتوى فقط، دون الأخذ في الاعتبار padding و border.
- border-box: حيث يتم احتساب الحجم شاملاً padding و border، مما يجعل التحكم في أبعاد العنصر أكثر سهولة.

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

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

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

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

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

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

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

بعد ذلك، سنتعلم كيفية التعامل مع Flexible Box من خلال التطبيق العملي، حيث سنوضح كيفية ضبط العناصر داخل flex container، بالإضافة إلى شرح خاصية flex-direction: row، والتي تعد القيمة الافتراضية (Default value) لتنظيم العناصر في اتجاه أفقي.

في نهاية الحلقة، سنقدم مراجعة شاملة حول كيفية تفعيل Flexible Box، وسنناقش العوامل المؤثرة على هذه الخاصية، مع تقديم بعض التقنيات المفيدة للحصول على تصميم مرن ومتجاوب.

في هذه الحلقة، سنواصل شرح خاصية Flexible Box في CSS، وسنستعرض بعض الخواص الإضافية التي تساعد في تنظيم وترتيب العناصر داخل الحاويات المرنة.

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

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

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

في هذه الحلقة، سنواصل شرح خاصية Flexible Box في CSS، مع التركيز على خاصية flex-direction، التي تساعد في تغيير اتجاه ترتيب العناصر داخل الحاوية المرنة.

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

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

في نهاية الحلقة، سنقوم بمراجعة سريعة لكيفية استخدام flex-direction بشكل فعال، وسنتعرف على العوامل المؤثرة عليها والطرق المثلى لتنظيم العناصر داخل الصفحات.

في هذه الحلقة، سنواصل شرح خاصية Flexible Box في CSS، مع التركيز على خاصية flex-grow، التي تتيح للمستخدم التحكم في تكبير أو تصغير عنصر معين بالنسبة للعناصر الأخرى داخل الحاوية المرنة.

سنبدأ بالتطبيق العملي، حيث سنوضح كيفية استخدام flex-grow لتحديد نسبة التمدد لكل عنصر، مما يساعد في التحكم بشكل أكثر دقة في توزيع المساحات داخل التخطيط.

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

في نهاية الحلقة، سنقوم بمراجعة سريعة لكيفية استخدام flex-grow بشكل فعال، وسنناقش العوامل المؤثرة عليها وأفضل الطرق لتنظيم العناصر داخل التخطيط المرن.

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

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

بعد ذلك، سنتعرف على أهم الفلاتر المستخدمة في filters، ومنها:

- grayscale: الذي يجعل الصورة أبيض وأسود، وتتراوح قيمته بين 0% (الألوان الأصلية) و 100% (أبيض وأسود بالكامل).
- drop-shadow: الذي يضيف ظلًا مميزًا للعناصر بطريقة مشابهة لـ box-shadow.
- opacity: الذي يتحكم في شفافية العنصر، مما يسمح بإظهاره أو إخفائه تدريجيًا.

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

في هذه الحلقة، سنواصل شرح خاصية filters في CSS، وسنستعرض بعض الفلاتر الإضافية التي تساعد في تحسين التأثيرات البصرية على العناصر.

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

## invert: الذي يقوم بعكس الألوان داخل العنصر، وتكون قيمته بين 0% (الألوان الأصلية) و 100% (الألوان معكوسة تمامًا).
## blur: الذي يضيف تأثير الضبابية للعناصر، وتُحدد شدته بوحدة البكسل (px)، مما يجعله مفيدًا في إنشاء تأثيرات بصرية ناعمة.
## brightness: الذي يتحكم في شدة الإضاءة الخاصة بالعنصر، مما يسمح بزيادة أو تقليل سطوعه للحصول على تأثيرات مختلفة.

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

في هذه الحلقة، سنتعرف على خاصية transform في CSS، والتي تتيح لك تحويل العناصر إلى البعد الثاني (2D) أو البعد الثالث (3D)، مما يساعد في إنشاء تأثيرات مرئية متقدمة.

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

كما سنوضح كيفية التحكم في البعدين الأساسيين داخل transform:

- X: المسؤول عن العرض الأفقي.
- Y: المسؤول عن الطول العمودي.

بالإضافة إلى ذلك، سنتعلم كيف يمكن دمج scale مع transform للحصول على تأثيرات متقدمة في التصميم.

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

في هذه الحلقة، سنواصل شرح خاصية transform في CSS، مع التركيز على خاصية rotate، التي تتيح لك دوران العناصر والصور داخل الصفحة.

سنبدأ بالتطبيق العملي، حيث سنوضح كيفية استخدام rotate لتدوير العناصر بزاويا مختلفة، مع تحديد قيم الدوران باستخدام وحدة degree (deg)، والتي تحدد مقدار الزاوية المطلوبة للدوران.

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

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

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

سنبدأ بشرح خاصية translate، وهي المسؤولة عن تحريك العنصر لأعلى أو لأسفل أو إلى اليمين واليسار، مما يسهل ضبط مواضع العناصر. سنتعلم كيف يمكن استخدام translate بوحدتي النسبة المئوية (%) أو البكسل (px) لضبط الإزاحة بدقة.

بعد ذلك، سنتعرف على خاصية skew، والتي تتيح لك إمالة العنصر في اتجاه البعدين X و Y، مما يخلق تأثيرات بصرية مميزة.

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

في نهاية الحلقة، سنقوم بمراجعة سريعة لكيفية تفعيل transform باستخدام translate و skew، وسنتعرف على العوامل التي تؤثر على هذه الخواص وكيفية استخدامها بشكل احترافي داخل تصميمات المواقع.

في هذه الحلقة، سنتعرف على خاصية animation في CSS، والتي تتيح لك تحريك العناصر وإضافة تأثيرات انتقالية إليها، مما يجعل التصميم أكثر تفاعلية.

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

animation-name: وهو العنصر المسؤول عن تحديد اسم الحركة.
animation-duration: وهو العنصر الذي يحدد مدة تنفيذ الحركة.

كما سنتعرف على بعض الإطارات الزمنية (frames) في CSS، والمعروفة باسم @keyframes، والتي تساعد في تحديد المراحل المختلفة للحركة داخل animation.

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

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

سنبدأ بشرح animation-iteration-count، وهي الخاصية المسؤولة عن عدد مرات تكرار الحركة، مما يسمح بجعل العنصر يتحرك لمرة واحدة أو بشكل مستمر.

بعد ذلك، سنتعرف على animation-timing-function، والتي تتحكم في سرعة الحركة، سواء كنت تريدها سريعة، بطيئة، أو متدرجة خلال مدة التنفيذ.

بالطبع، لا يمكن تفعيل هذه التأثيرات دون استخدام @keyframes، لذلك سنوضح أهميتها في إنشاء الحركات بسلاسة.

هنا نصل إلى نهاية الكورس!

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

كان من الرائع أن أكون معك في هذه الرحلة، وأتمنى لك كل التوفيق في رحلتك مع تصميم وتطوير الويب!