شرح صفوف ومحتوى الفقرة
عند جمع رفع خفيف للأعلى عبر transform: translateY(-4px) مع تعميق ظل البطاقة داخل خاصية transition ناعمة، تحصل على استجابة بصرية حيوية وواضحة عند تمرير المؤشر أو التركيز بلوحة المفاتيح.
CSS
.lift-card {
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lift-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 28px -6px rgba(15, 23, 42, 0.22);
}| المعامل | الإلزامية | القيم المقبولة والأثر البصري |
|---|---|---|
inset | اختياري | يعكس الظل ليرتسم غائراً داخل حدود الصندوق |
offset-x | إلزامي | الإزاحة الأفقية، والقيمة 0 توازن الاتجاهين العربي والإنجليزي |
offset-y | إلزامي | الإزاحة الرأسية، والقيمة الموجبة تسقط الظل للأسفل |
blur-radius | اختياري | القيمة 0 حادة، والقيم الموجبة تزيد نعومة التلاشي |
spread-radius | اختياري | الموجب يوسع الحلقة، والسالب يحصر الظل أسفل البطاقة |
color / none | اختياري | تضبط rgba() شفافية الظل، وتزيل none الظلال تماماً |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس أتقنت توظيف خاصية box-shadow بجميع معاملاتها من الإزاحة والتمويه والانتشار السالب والظلال الغائرة inset إلى حلقات التركيز الدائرية وتحريك ارتفاع البطاقات. وفي الخطوة التالية ستنتقل إلى درس المرشحات البصرية في لغة CSS لمعالجة الصور والأيقونات المفرغة وتصميم أسطح الزجاج الضبابي.