أنماط زخرفية باستخدام العناصر الزائفة
أنشئ أشكالًا زخرفية وفواصل وطبقات تراكب باستخدام ::before و::after من دون HTML إضافي
أنماط زخرفية باستخدام العناصر الزائفة درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
فلسفة التزيين باستخدام CSS فقط
تتيح العناصر الزائفة إنشاء تأثيرات تزيينية غنية دون HTML إضافي. والهدف هو عدم استخدام أي divs للتزيين، ووضع كل الإضافات المرئية في CSS.
مثلث CSS
أنشئوا مثلثات باستخدام عناصر ذات حجم صفري وحدود شفافة:
<div class="triangle"></div>سهم التلميح
سهم تلميح باستخدام ::before:
<div class="tooltip" style="position:relative;display:inline-block;background:#333;color:#fff;padding:6px 12px;border-radius:4px;margin-top:16px;">Tooltip text</div>فاصل قطري بين الأقسام
فاصل مائل بين الأقسام باستخدام skew أو clip-path على ::after:
<div class="section" style="background:linear-gradient(135deg,#4f8cff,#7ee787);height:120px;position:relative;"></div>خطوط تحتية تزيينية
تأثيرات خطوط تحتية متحركة باستخدام ::after:
<a href="#">Hover me (underline animates in on :hover)</a>شارة باستخدام ::after
تراكب شارة إشعار دون عناصر HTML إضافية:
<span class="nav-icon" data-count="3" style="position:relative;display:inline-block;font-size:1.5rem;margin:16px;">🔔</span>تراكب متدرج على الصور
تراكب متدرج داكن فوق الصور لتحسين قابلية قراءة النص:
<div class="card-image" style="width:100%;height:160px;background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>علامة صح باستخدام ::before
علامة صح مخصصة لمربع اختيار، مرسومة باستخدام حدود CSS:
<div class="custom-check" style="width:20px;height:20px;background:#34c759;border-radius:4px;padding:2px;"></div>شريط مميز
تأثير شريط مميز على البطاقات باستخدام ::before مع تحديد موضع سالب:
<div class="card featured" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;width:200px;">Featured product</div>تأثير وميض التحميل
تأثير وميض CSS لهيكل التحميل دون JavaScript:
<div class="skeleton" style="width:100%;height:60px;border-radius:6px;"></div>تحقق سريع
ما مجموعة الخصائص التي تنشئ مثلثًا متجهًا إلى أعلى باستخدام CSS فقط؟
مراجعة
تتيح العناصر الزائفة إنشاء أنماط تزيينية غنية دون HTML إضافي، مثل الأسهم والتراكبات والخطوط التحتية المتحركة والشارات والأشرطة المميزة وتأثيرات الوميض. وتعتمد جميعها على content: "" وposition: absolute والاستخدام المبتكر للحدود وclip-path والتحويلات.
الأسئلة الشائعة
هل درس «أنماط زخرفية باستخدام العناصر الزائفة» مجاني؟
نعم — نص درس «أنماط زخرفية باستخدام العناصر الزائفة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «أنماط زخرفية باستخدام العناصر الزائفة»؟
أنشئ أشكالًا زخرفية وفواصل وطبقات تراكب باستخدام ::before و::after من دون HTML إضافي تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «أنماط زخرفية باستخدام العناصر الزائفة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- محتوى ::before و::after
- ::placeholder و::selection و::marker
- عدادات CSS باستخدام ::before
- أنماط زخرفية باستخدام العناصر الزائفة