الدرس 16 · الوحدة 5: التعرف على CSS

ميزات CSS3 وتوافق المتصفحات

نضيف لمسات حديثة: حواف دائرية، وظلال، وتدرجات، وحركة ناعمة. ⏱ نحو 20 دقيقة.

بعد هذا الدرس ستستطيع أن:

تستخدم الحواف الدائرية والظلال.
تكتب تدرّجًا لونيًّا.
تضيف حركة ناعمة بـ transition و transform.
تتحقق من توافق الخصائص مع المتصفحات وتكتب قيمة احتياطية.

١ما الجديد في CSS3؟

CSS3 هي الإصدار الحديث من CSS. أضافت ميزات كانت تحتاج قديمًا صورًا جاهزة أو برامج تصميم: حواف دائرية، وظلال، وتدرجات لونية، وحركة. لنبنِ زرًّا جميلًا خطوة خطوة:

<button class="btn">اطلب الآن</button>

.btn {  background: #E07A1F;  color: white;  border: none;  padding: 12px 28px;  font-size: 18px;  /* CSS3 */  border-radius: 30px;  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);}

index.html

٢الحواف الدائرية والظلال

الخاصية	مثال	معنى القيم
`border-radius`	`border-radius: 12px;`	نصف قطر الانحناء. `50%` على مربع تصنع دائرة.
`box-shadow`	`box-shadow: 0 6px 14px gray;`	إزاحة أفقية، ثم رأسية، ثم مقدار التمويه، ثم اللون.
`text-shadow`	`text-shadow: 1px 1px 2px black;`	ظل للنص بالترتيب نفسه.

<div class="card">بطاقة بظل</div><img class="avatar" src="images/team.svg" alt="فريق العمل"><h2 class="glow">عنوان بظل</h2>

.card {  padding: 16px;  border-radius: 12px;  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);}.avatar {  width: 90px;  height: 90px;  border-radius: 50%;  object-fit: cover;}.glow {  text-shadow: 2px 2px 3px #E07A1F;}

index.html

٣التدرّج اللوني

بدل لون واحد، تدرّج بين لونين أو أكثر بـ linear-gradient:

<div class="hero">عروض الصيف</div>

.hero {  background: linear-gradient(to left, #1D5FB4, #2E8B3A);  color: white;  padding: 30px;  font-size: 24px;  border-radius: 12px;}

index.html

to left اتجاه التدرّج: يبدأ من اليمين وينتهي في اليسار. جرّب to bottom.

٤الحركة الناعمة: transition و transform

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

<div class="card">مرّر الفأرة فوقي</div>

.card {  width: 180px;  padding: 20px;  background: #FFF3E6;  border-radius: 12px;  transition: transform 0.3s, box-shadow 0.3s;}.card:hover {  transform: translateY(-6px) scale(1.05);  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}

index.html

القيمة	تفعل
`translateY(-6px)`	ترفع العنصر 6 بكسل.
`scale(1.05)`	تكبّره 5٪.
`rotate(10deg)`	تديره 10 درجات.

٥توافق المتصفحات

المستخدمون يفتحون موقعك من Chrome و Safari و Firefox و Edge، بإصدارات مختلفة. الخاصية الجديدة قد لا تعمل في متصفح قديم. كيف تتعامل مع ذلك؟

الأداة	الاستخدام
موقع caniuse.com	اكتب اسم الخاصية فيعرض لك أي المتصفحات تدعمها وبأي نسبة.
قيمة احتياطية	اكتب قيمة بسيطة أولًا ثم الحديثة بعدها. المتصفح القديم يتجاهل ما لا يفهمه ويبقى على الأولى.
البادئات	خصائص تجريبية قديمة كانت تُكتب ببادئة مثل `-webkit-`. أغلب الخصائص اليوم لا تحتاجها.
الاختبار	افتح موقعك في أكثر من متصفح، وفي الجوال، قبل تسليمه.

.hero {  background: #1D5FB4;                                    /* احتياطي للمتصفح القديم */  background: linear-gradient(to left, #1D5FB4, #2E8B3A); /* الحديث */}

توقّع وتحقّق

أي خاصية تجعل الحواف دائرية؟

border-radius.

صورة مربعة نريدها دائرة:

50% تصنع دائرة.

ما وظيفة transition؟

انتقال ناعم.

أين تعرف هل تدعم المتصفحات خاصية معيّنة؟

caniuse.

الخلاصة

border-radius للحواف، و 50% تصنع دائرة.
box-shadow و text-shadow للظلال: إزاحة ثم تمويه ثم لون.
linear-gradient تدرّج بين لونين.
transition للتغيّر الناعم، و transform للتحريك والتكبير والتدوير.
caniuse.com لمعرفة الدعم، والقيمة الاحتياطية أولًا.

تحدٍّ برمجي: بطاقة دورة جذابة

متوسط

نسّق بطاقة دورة في مركز التدريب بميزات CSS3 (في تبويب style.css).

المطلوب:

حواف البطاقة .course دائرية 16px.
ظل للبطاقة box-shadow.
شريط العنوان .course h3 بخلفية تدرّج لوني linear-gradient.
للبطاقة transition، وعند :hover ترتفع للأعلى بـ transform.
زر .join بحواف دائرية كاملة (30px أو أكثر).

👀 اعرض شكل الناتج المطلوب

الناتج المطلوب

✓ التحقق الآلي من حلّك:

حواف البطاقة 16px.
للبطاقة ظل.
خلفية العنوان تدرّج لوني.
للبطاقة transition.
قاعدة hover فيها transform.
زر .join حوافه 30px أو أكثر.

💡 تلميح 1

background: linear-gradient(to left, #1D5FB4, #2E8B3A);

💡 تلميح 2

transition في .course نفسها، و transform في .course:hover

حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.

<div class="course">  <h3>تطوير الويب</h3>  <p>6 أسابيع · تطبيق عملي</p>  <button class="join">سجّل</button></div>

.course {  width: 240px;  background: white;  padding-bottom: 12px;  border-radius: 16px;  overflow: hidden;  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);  transition: transform 0.3s;}.course:hover {  transform: translateY(-6px);}.course h3 {  margin: 0;  padding: 12px;  color: white;  background: linear-gradient(to left, #1D5FB4, #2E8B3A);}.join {  border-radius: 30px;  padding: 8px 20px;}

انتقل إلى تقييم الدرساختيار من متعدد، وصح وخطأ، وأكمل الفراغ، وتتبّع الناتج.ابدأ التقييم ←