x

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

تصميم بطاقة تهنئة Greeting Card

ورشة عمل

في هذه الورشة، ستتدرب على استخدام فئات زائفة (pseudo-classes) وعناصر زائفة (pseudo-elements) متنوعة من خلال تصميم بطاقة تهنئة. تم توفير الهيكل الأساسي (boilerplate) للغة HTML لك.


هيكل HTML الأساسي HTML boilerplate



<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>بطاقة تهنئة</title>
 </head>
 <body>
 <!-- هنا تضع اكواد التطبيق -->
 </body>
</html>

الخطوات


الخطوة 1

ابدأ ورشة العمل بربط ملف styles.css.

الخطوة 2

أنشئ عنصراً من نوع div يحمل المعرّف id القيمة greeting-card والفئة class القيمة card.

داخل عنصر div أضف عنصراً من نوع h1 يحتوي على النص عيد ميلاد سعيد!. ثم أضف عنصراً من نوع فقرة p يحمل فئة class باسم message، ويتضمن النص أتمنى لك كل السعادة والفرح في يومك المميز!.

الخطوة 3

حان الآن وقت تنسيق بطاقة التهنئة الخاصة بك.

أضف مُحدِّدًا (selector) لعنصر الجسم body ، ثم:

  • غيّر نوع الخط font-family ليصبح Arial متبوعاً بالخيار العام sans-serif ،

  • أضف هامشاً داخلياً (padding) مقداره 40px من جميع الجهات،

  • واضبط خاصية محاذاة النص text-align لتكون في المنتصف center.

الخطوة 4

حان الآن وقت إضافة بعض الألوان. امنح العنصر body لون خلفية background-color بني brown ، وامنح العنصر .card لون خلفية background-color أبيض white.

الخطوة 5

امنح العنصر .card عرضاً أقصى max-width قدره 400px ، وهوامش داخلية padding مقدارها 40px من جميع الجهات، وهوامش خارجية margin قيمتها 0 من الأعلى والأسفل و auto من اليمين واليسار (استخدم خاصية الاختصار).

الخطوة 6

يحتاج العنصر .card إلى مزيد من التنسيق: أضف خاصية border-radius بقيمة 10px ، وخاصية box-shadow بقيمة 0 4px 8px gray .

الخطوة 7

أضف الآن عنصر div جديداً أسفل العنصر الذي يحمل الفئة .message . يجب أن يحتوي هذا العنصر الجديد على سمة class بقيمة card-links .

الخطوة 8

أضف عنصرين من نوع a داخل العنصر الذي يحمل الفئة .card-links .

يجب أن يحتوي العنصر الأول على النص إرسال بطاقة ، وفئة class باسم send-link ، وسمة href بقيمة #send.

أما العنصر الثاني فيجب أن يحتوي على النص شارك على وسائل التواصل الاجتماعي ، وفئة class باسم share-link ، وسمة href بقيمة #share .

الخطوة 9

أضف عنصرين من نوع section ، أحدهما تلو الآخر. يجب أن يحمل العنصر الأول مُعرِّفاً id باسم send ، بينما يجب أن يحمل العنصر الثاني مُعرِّفاً id باسم share .

الخطوة 10

أضف عنصراً من نوع h2 إلى العنصر الذي يحمل المعرّف #send ، بحيث يحتوي على النص جاري إرسال بطاقتك... ، ثم أضف عنصراً من نوع p يحتوي على النص تم إرسال البطاقة بنجاح إلى المتلقي! .

الخطوة 11

حان وقت ملء القسم section الثاني!

أضف عنصراً من نوع h2 إلى العنصر الذي يحمل المعرّف #share ، بحيث يحتوي على النص جاري مشاركة بطاقتك... ، ثم أضف عنصراً من نوع p يحتوي على النص تمت مشاركة بطاقتك على وسائل التواصل الاجتماعي! .

الخطوة 12

أضف محددًا (selector) جديدا يغير لون خلفية background-color العنصر .card إلى اللون الكاكي khaki عند تمرير مؤشر الفأرة فوقه.

الخطوة 13

تُتيح خاصية transform تغيير مظهر العنصر؛ فعلى سبيل المثال، يؤدي تعيين القيمة scale(0.9) لها إلى تصغير حجم العنصر بنسبة 10%.

نموذج برمجي


p {
 transform: scale(0.9);
}

أضف خاصية transform إلى المُحدِّد .card:hover واضبط قيمتها على scale(1.1) .

الخطوة 14

عند تمرير مؤشر الفأرة فوق عناصر a ، يتغير لون الخلفية تدريجيًا إلى لون آخر. يمكنك التحكم في كيفية حدوث هذا الانتقال باستخدام الخاصية transition :

نموذج برمجي


a {
 transition: color 1s linear;
}

القيم التي تقبلها خاصية الانتقال transition هي، بالترتيب: الخاصية المراد تطبيق الانتقال عليها، ومدة الانتقال، ثم توقيت الانتقال.

إذا كانت هناك خصائص متعددة تتضمن انتقالاً (transition)، فيمكنك كتابة قيم كل منها مفصولةً بفاصلة:

نموذج برمجي


a {
 transition: property1 0.1s, property2 0.1s linear;
}

إذا تم حذف قيمة ما، كتوقيت الخاصية الأولى، فسيتم تطبيق قيمة افتراضية.

أضف الخاصية transition: transform 0.3s, background-color 0.3s ease إلى المُحدِّد .card .

جرِّبها، فقد اكتمل تأثير الانتقال عند تمرير المؤشر.

الخطوة 15

يمكنك إضافة رمز تعبيري (emoji) قبل العنوان باستخدام العنصر الزائف ::before الخاص بالعنصر h1.

أنشئ مُحدِّد h1::before ، وأضف إليه خاصية content واضبط قيمتها لتكون "🥳 " (لاحظ وجود مسافة بعد الرموز التعبيرية).

الخطوة 16

يمكنك الآن القيام بشيء مشابه لإضافة الرموز التعبيرية بعد العنوان أيضاً.

أنشئ مُحدِّدًا يستهدف العنصر الزائف ::after الخاص بالعنصر h1 . أضف إليه الخاصية content واضبط قيمتها لتكون " 🥳" (لاحظ وجود مسافة قبل الرموز التعبيرية).

الخطوة 17

يحتاج العنصر .message إلى بعض التنسيق. أضف إليه ما يلي:

  • حجم خط font-size قدره 1.2em ،

  • وهامشاً سفلياً margin-bottom قدره 20px .

الخطوة 18

أضف مُحدِّدًا باسم .card-links ، واضبط خاصية margin-top على 20px .

يمكنك إضافة display: flex لجعل عنصر ما يستخدم نموذج (flexbox). ستتعرف على المزيد حول (flexbox) لاحقاً في هذه الدورة، ويمكنك اعتبار هذا بمثابة لمحة موجزة عنه.

لضبط المسافة بين الرابطين بحيث تتساوى المساحات المحيطة بهما، أضف الخاصية display بقيمة flex ، والخاصية justify-content بقيمة space-around .

الخطوة 19

استهدف عناصر a الموجودة داخل .card-links و امنحها ما يلي:

  • خاصية text-decoration بقيمة none.

  • خاصية font-size بقيمة 1em.

  • خاصية padding بقيمة 10px 20px.

  • خاصية border-radius بقيمة 5px.

  • خاصية color بقيمة white.

  • خاصية background-color بقيمة midnightblue.

الخطوة 20

أنشئ مُحدِّد فئة زائفة (pseudo-class selector) يستهدف عناصر .card-links a عند تمرير مؤشر الفأرة فوقها .

يجب أن يتغير لون الخلفية background-color إلى اللون البرتقالي المحمر orangered.

الخطوة 21

أضف خاصية transition إلى المُحدد .card-links a ، وامنحها القيمة background-color 0.3s ease .

الخطوة 22

أضف مُحدِّداً جديداً يستهدف عناصر .card-links a عندما تكون في حالة النشاط (active). واضبط خاصية لون الخلفية background-color على اللون midnightblue.

الخطوة 23

أضف مُحدِّدًا جديدًا يستهدف عناصر .card-links a عند التركيز عليها (focus) ، واضبط خاصية outline لتكون 2px solid yellow.

الخطوة 24

أنشئ مُحدِّداً (selector) جديداً يستهدف عناصر .card-links a التي تمت زيارتها بالفعل، واضبط خاصية اللون color على اللون القرمزي crimson.

الخطوة 25

أنشئ مُحدِّدًا (selector) لعناصر الـ section ، واضبط لها الخصائص التالية:

  • خاصية margin بقيمة 20px auto ،

  • خاصية max-width بقيمة 600px ،

  • خاصية background-color بقيمة whitesmoke ،

  • خاصية padding بقيمة 20px ،

  • خاصية border-radius بقيمة 10px ،

الخطوة 26

هناك قيمة أخرى يمكن استخدامها مع الخاصية transform وهي skewX ؛ حيث تقوم هذه الدالة بإمالة (skews) العنصر أفقيًا.

نموذج برمجي


div {
 transform: skewX(7deg);
}

أضف مُحدِّداً يستهدف عناصر القسم section عند تمرير المؤشر فوقها، واضبط خاصية التحويل transform على القيمة skewX(-10deg).

الخطوة 27

كخطوة أخيرة لإتمام هذا المشروع، أضف خاصية display مضبوطة على القيمة none إلى مُحدِّد القسم section .

بعد ذلك، أنشئ مُحدِّدًا من النوع section:target ، وأضف إليه خاصية display مضبوطة على القيمة block؛ بحيث لا تظهر عناصر section إلا عند النقر على الروابط.


حل التطبيق :


index.html


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>بطاقة تهنئة</title>
  <link rel="stylesheet" href="styles.css">
 </head>
 <body>

  <div id="greeting-card" class="card">
   <h1>عيد ميلاد سعيد!</h1>
   <p class="message">أتمنى لك كل السعادة والفرح في يومك المميز!</p>
   <div class="card-links">
    <a class="send-link" href="#send">إرسال بطاقة</a>
    <a class="share-link" href="#share">شارك على وسائل التواصل الاجتماعي</a>
   </div>
  </div>
  <section id="send">
   <h2>جاري إرسال بطاقتك...</h2>
   <p>تم إرسال البطاقة بنجاح إلى المتلقي!</p>
  </section>
  <section id="share">
   <h2>جاري مشاركة بطاقتك...</h2>
   <p>تمت مشاركة بطاقتك على وسائل التواصل الاجتماعي!</p>
  </section>
  

 </body>
</html>

styles.css


body {
 font-family: Arial, sans-serif;
 padding: 40px;
 text-align: center;
 background-color: brown;
}

.card {
 background-color: white;
 max-width: 400px;
 padding: 40px;
 margin: 0 auto 0;
 border-radius: 10px;
 box-shadow: 0 4px 8px gray;
 transition: transform 0.3s, background-color 0.3s ease;
}

.card:hover {
 background-color: khaki;
 transform: scale(1.1);
}

h1::before {
 content: " 🥳";
}

h1::after {
 content: "🥳 ";
}

.message {
 font-size: 1.2em;
 margin-bottom: 20px;
}

.card-links {
 margin-top: 20px;
 display: flex;
 justify-content: space-around;
}

.card-links a {
 text-decoration: none;
 font-size: 1em;
 padding: 10px 20px;
 border-radius: 5px;
 color: white;
 background-color: midnightblue;
 transition: background-color 0.3s ease;
}

.card-links a:hover {
 background-color: orangered;
}

.card-links a:active {
 background-color: midnightblue;
}

.card-links a:focus {
 outline: 2px solid yellow;
}

.card-links a:visited {
 color: crimson;
}

section {
 margin: 20px auto;
 max-width: 600px;
 background-color: whitesmoke;
 padding: 20px;
 border-radius: 10px;
 display: none;
}

section:hover {
 transform: skewX(-10deg);
}

section:target {
 display: block;
}

معاينة التطبيق :