المحددات المتقدمة والخصائص الأساسية في CSS: دليل شامل

المحددات المتقدمة والخصائص الأساسية في CSS: دليل شامل

دليل تخصصي من علاء عامر – مطور ومصمم مواقع وتطبيقات محترف

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

1️⃣ المحددات المتقدمة (Advanced Selectors)

محددات الحالة الزائفة (Pseudo-class Selectors)

/* محددات الحالة التفاعلية */
.button {
  background: #007bff;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

/* حالة التمرير */
.button:hover {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
}

/* حالة التركيز */
.button:focus {
  outline: 3px solid rgba(0, 123, 255, 0.5);
  outline-offset: 2px;
}

/* حالة الضغط */
.button:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 123, 255, 0.2);
}

/* حالة التعطيل */
.button:disabled {
  background: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

/* حقول الإدخال */
.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.form-input:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.form-input:valid {
  border-color: #28a745;
}

.form-input:invalid {
  border-color: #dc3545;
}

/* الروابط */
.nav-link {
  color: #333;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.nav-link:visited {
  color: #6f42c1;
}

.nav-link:hover {
  background: #f8f9fa;
  color: #007bff;
}

.nav-link:active {
  color: #0056b3;
}

محددات الترتيب والموضع

/* العنصر الأول */
.item:first-child {
  border-top: 3px solid #007bff;
  font-weight: bold;
}

/* العنصر الأخير */
.item:last-child {
  border-bottom: 3px solid #007bff;
  margin-bottom: 0;
}

/* العنصر الوحيد */
.item:only-child {
  text-align: center;
  padding: 2rem;
  background: #f8f9fa;
}

/* العناصر الزوجية والفردية */
.table-row:nth-child(odd) {
  background-color: #f9f9f9;
}

.table-row:nth-child(even) {
  background-color: #ffffff;
}

/* كل ثالث عنصر */
.gallery-item:nth-child(3n) {
  margin-right: 0;
}

/* العناصر من الرقم 4 فما فوق */
.menu-item:nth-child(n + 4) {
  display: none;
}

/* أول 3 عناصر */
.card:nth-child(-n + 3) {
  animation: fadeInUp 0.6s ease forwards;
}

/* آخر 2 عنصر */
.item:nth-last-child(-n + 2) {
  border-bottom: 1px solid #ddd;
}

محددات النوع والمحتوى

/* أول عنصر من نوعه */
.content h2:first-of-type {
  margin-top: 0;
  color: #007bff;
  font-size: 2.5rem;
}

/* آخر عنصر من نوعه */
.content p:last-of-type {
  margin-bottom: 0;
  font-style: italic;
}

/* العنصر الوحيد من نوعه */
.sidebar img:only-of-type {
  width: 100%;
  border-radius: 8px;
}

/* المحددات المنطقية */
/* تطبيق على كل العناصر عدا المحدد */
.button:not(.button-outline) {
  background: linear-gradient(135deg, #007bff, #0056b3);
}

/* عناصر متعددة */
.item:not(.hidden):not(.disabled) {
  display: block;
  opacity: 1;
}

/* محدد :has() - الجديد */
.card:has(.badge) {
  border: 2px solid #ffc107;
}

.article:has(img) .title {
  margin-top: 1rem;
}

العناصر الزائفة (Pseudo-elements)

/* إضافة محتوى قبل وبعد العنصر */
.quote {
  font-style: italic;
  position: relative;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.quote::before {
  content: "" ";
    font-size: 4rem;
    color: #007bff;
    position: absolute;
    top: -10px;
    left: 10px;
    line-height: 1;
}

.quote::after {
    content: " "";
  font-size: 4rem;
  color: #007bff;
  position: absolute;
  bottom: -30px;
  right: 10px;
  line-height: 1;
}

/* تنسيق السطر الأول */
.article-content::first-line {
  font-weight: bold;
  color: #2c3e50;
  font-size: 1.1em;
}

/* تنسيق الحرف الأول */
.drop-cap::first-letter {
  float: left;
  font-size: 4rem;
  line-height: 3rem;
  margin: 0.1rem 0.2rem 0 0;
  color: #007bff;
  font-weight: bold;
}

/* تنسيق النص المحدد */
.content::selection {
  background: #007bff;
  color: white;
}

.content::-moz-selection {
  background: #007bff;
  color: white;
}

/* شريط التمرير المخصص */
.scrollable-content::-webkit-scrollbar {
  width: 8px;
}

.scrollable-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.scrollable-content::-webkit-scrollbar-thumb {
  background: #007bff;
  border-radius: 4px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
  background: #0056b3;
}

2️⃣ خصائص التحكم في النص والخط

الخصائص الأساسية للخط

.typography-showcase {
  /* مجموعة الخطوط مع البدائل */
  font-family: "Cairo", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  /* حجم الخط */
  font-size: 18px; /* بالبكسل */
  font-size: 1.125rem; /* نسبي */
  font-size: 112.5%; /* نسبة مئوية */

  /* وزن الخط */
  font-weight: 400; /* عادي */
  font-weight: 600; /* متوسط */
  font-weight: 700; /* عريض */
  font-weight: normal; /* عادي */
  font-weight: bold; /* عريض */
  font-weight: lighter; /* أخف */
  font-weight: bolder; /* أعرض */

  /* نمط الخط */
  font-style: normal; /* عادي */
  font-style: italic; /* مائل */
  font-style: oblique; /* منحرف */

  /* تمدد الخط */
  font-stretch: normal;
  font-stretch: condensed;
  font-stretch: expanded;
}

/* أحجام خط متدرجة */
.text-xs {
  font-size: 0.75rem;
} /* 12px */
.text-sm {
  font-size: 0.875rem;
} /* 14px */
.text-base {
  font-size: 1rem;
} /* 16px */
.text-lg {
  font-size: 1.125rem;
} /* 18px */
.text-xl {
  font-size: 1.25rem;
} /* 20px */
.text-2xl {
  font-size: 1.5rem;
} /* 24px */
.text-3xl {
  font-size: 1.875rem;
} /* 30px */
.text-4xl {
  font-size: 2.25rem;
} /* 36px */

/* أوزان خط متنوعة */
.font-thin {
  font-weight: 100;
}
.font-light {
  font-weight: 300;
}
.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-black {
  font-weight: 900;
}

خصائص تنسيق النص

.text-formatting {
  /* محاذاة النص */
  text-align: left; /* يسار */
  text-align: right; /* يمين */
  text-align: center; /* وسط */
  text-align: justify; /* ضبط */

  /* زخرفة النص */
  text-decoration: none; /* بدون زخرفة */
  text-decoration: underline; /* خط تحتي */
  text-decoration: overline; /* خط علوي */
  text-decoration: line-through; /* خط وسطي */

  /* تحويل النص */
  text-transform: none; /* بدون تحويل */
  text-transform: uppercase; /* أحرف كبيرة */
  text-transform: lowercase; /* أحرف صغيرة */
  text-transform: capitalize; /* أول حرف كبير */

  /* ارتفاع السطر */
  line-height: 1.2; /* مضغوط */
  line-height: 1.4; /* عادي */
  line-height: 1.6; /* مريح */
  line-height: 2; /* مزدوج */

  /* تباعد الأحرف */
  letter-spacing: -0.05em; /* مضغوط */
  letter-spacing: 0; /* عادي */
  letter-spacing: 0.05em; /* متباعد */
  letter-spacing: 0.1em; /* متباعد جداً */

  /* تباعد الكلمات */
  word-spacing: -0.05em;
  word-spacing: 0.1em;
  word-spacing: 0.2em;

  /* معالجة النص الطويل */
  white-space: normal; /* عادي */
  white-space: nowrap; /* عدم التفاف */
  white-space: pre; /* محافظة على المسافات */
  white-space: pre-wrap; /* التفاف مع المسافات */

  /* قطع النص */
  text-overflow: ellipsis; /* نقاط */
  text-overflow: clip; /* قطع */
  overflow: hidden; /* إخفاء الفائض */
}

تأثيرات النص المتقدمة

/* ظل النص */
.text-shadow-demo {
  /* ظل بسيط */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

  /* ظل متعدد */
  text-shadow:
    1px 1px 2px rgba(0, 0, 0, 0.3),
    3px 3px 6px rgba(0, 0, 0, 0.2),
    5px 5px 10px rgba(0, 0, 0, 0.1);

  /* ظل ملون */
  text-shadow:
    0 0 10px #007bff,
    0 0 20px #007bff,
    0 0 30px #007bff;

  /* تأثير النيون */
  text-shadow:
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 15px currentColor,
    0 0 20px #ff6b6b;
}

/* تدرجات النص */
.gradient-text {
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: bold;
  font-size: 2rem;
}

/* نص مع حدود */
.outlined-text {
  color: transparent;
  -webkit-text-stroke: 2px #007bff;
  font-weight: bold;
  font-size: 3rem;
}

/* تأثير النص ثلاثي الأبعاد */
.text-3d {
  color: #fff;
  text-shadow:
    0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0, 0, 0, 0.1),
    0 0 5px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 3px 5px rgba(0, 0, 0, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.25);
}

3️⃣ خصائص الألوان والخلفيات

أنظمة الألوان المختلفة

.color-systems {
  /* الأسماء المحددة */
  color: red;
  color: blue;
  color: forestgreen;

  /* نظام Hex */
  color: #ff0000; /* أحمر */
  color: #00ff00; /* أخضر */
  color: #0000ff; /* أزرق */
  color: #333; /* رمادي غامق مختصر */
  color: #f8f9fa; /* رمادي فاتح */

  /* نظام RGB */
  color: rgb(255, 0, 0); /* أحمر */
  color: rgb(0, 255, 0); /* أخضر */
  color: rgb(0, 0, 255); /* أزرق */

  /* نظام RGBA مع الشفافية */
  color: rgba(255, 0, 0, 0.5); /* أحمر نصف شفاف */
  color: rgba(0, 0, 0, 0.8); /* أسود شبه شفاف */

  /* نظام HSL */
  color: hsl(0, 100%, 50%); /* أحمر */
  color: hsl(120, 100%, 50%); /* أخضر */
  color: hsl(240, 100%, 50%); /* أزرق */

  /* نظام HSLA مع الشفافية */
  color: hsla(0, 100%, 50%, 0.7); /* أحمر شبه شفاف */
}

/* متغيرات الألوان */
:root {
  --primary: #007bff;
  --primary-dark: #0056b3;
  --primary-light: #6cb2eb;

  --secondary: #6c757d;
  --success: #28a745;
  --danger: #dc3545;
  --warning: #ffc107;
  --info: #17a2b8;

  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
}

.color-palette {
  background-color: var(--primary);
  color: var(--gray-100);
  border: 1px solid var(--primary-dark);
}

خلفيات متقدمة

/* خلفيات متدرجة */
.gradient-backgrounds {
  /* تدرج خطي */
  background: linear-gradient(to right, #ff6b6b, #4ecdc4);
  background: linear-gradient(45deg, #667eea, #764ba2);
  background: linear-gradient(135deg, #ff9a56, #ff6b95);

  /* تدرج دائري */
  background: radial-gradient(circle, #ff6b6b, #4ecdc4);
  background: radial-gradient(ellipse at center, #667eea, #764ba2);

  /* تدرج مخروطي */
  background: conic-gradient(from 0deg, red, yellow, green, blue, red);

  /* تدرج متعدد النقاط */
  background: linear-gradient(
    90deg,
    #ff6b6b 0%,
    #ffa726 25%,
    #4ecdc4 50%,
    #45b7d1 75%,
    #96ceb4 100%
  );
}

/* خلفيات مركبة */
.complex-backgrounds {
  /* خلفية مع تداخل */
  background:
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("hero-image.jpg");
  background-size: cover;
  background-position: center;

  /* خلفيات متعددة */
  background-image:
    linear-gradient(45deg, rgba(255, 107, 107, 0.8), rgba(78, 205, 196, 0.8)),
    url("pattern.png"), url("texture.jpg");
  background-position:
    center,
    0 0,
    center;
  background-size:
    cover,
    100px 100px,
    cover;
  background-repeat: no-repeat, repeat, no-repeat;
}

/* أنماط خلفية */
.pattern-backgrounds {
  /* نقاط */
  background-image: radial-gradient(circle, #333 1px, transparent 1px);
  background-size: 20px 20px;

  /* خطوط */
  background-image: linear-gradient(90deg, #f0f0f0 1px, transparent 1px);
  background-size: 20px 20px;

  /* شبكة */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;

  /* نمط زجزاج */
  background:
    linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
    linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
    linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
  background-size: 20px 20px;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0px;
}

4️⃣ مشروع عملي: صفحة ملف شخصي متقدمة

<!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="advanced-profile.css" />
  </head>
  <body>
    <div class="profile-container">
      <header class="profile-header">
        <div class="background-pattern"></div>
        <div class="header-content">
          <div class="avatar-section">
            <img src="avatar.jpg" alt="الصورة الشخصية" class="avatar" />
            <div class="status-indicator online"></div>
          </div>
          <div class="profile-info">
            <h1 class="profile-name">علاء عامر</h1>
            <p class="profile-role">مطور Full Stack</p>
            <div class="profile-stats">
              <div class="stat-item">
                <span class="stat-number">50+</span>
                <span class="stat-label">مشروع</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">5</span>
                <span class="stat-label">سنوات خبرة</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">100%</span>
                <span class="stat-label">رضا العملاء</span>
              </div>
            </div>
          </div>
        </div>
      </header>

      <main class="profile-main">
        <section class="about-section">
          <h2 class="section-title">نبذة عني</h2>
          <p class="about-text">
            مطور ومصمم مواقع متخصص في تقنيات الويب الحديثة. أركز على إنشاء تجارب
            مستخدم استثنائية وحلول تقنية مبتكرة.
          </p>
        </section>

        <section class="skills-section">
          <h2 class="section-title">المهارات التقنية</h2>
          <div class="skills-grid">
            <div class="skill-item" data-level="95">
              <div class="skill-info">
                <span class="skill-name">HTML/CSS</span>
                <span class="skill-percentage">95%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 95%"></div>
              </div>
            </div>
            <div class="skill-item" data-level="90">
              <div class="skill-info">
                <span class="skill-name">JavaScript</span>
                <span class="skill-percentage">90%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 90%"></div>
              </div>
            </div>
            <div class="skill-item" data-level="88">
              <div class="skill-info">
                <span class="skill-name">Laravel</span>
                <span class="skill-percentage">88%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 88%"></div>
              </div>
            </div>
            <div class="skill-item" data-level="85">
              <div class="skill-info">
                <span class="skill-name">React</span>
                <span class="skill-percentage">85%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 85%"></div>
              </div>
            </div>
          </div>
        </section>

        <section class="contact-section">
          <h2 class="section-title">تواصل معي</h2>
          <div class="contact-methods">
            <a href="mailto:[email protected]" class="contact-item email">
              <span class="contact-icon">📧</span>
              <span class="contact-text">[email protected]</span>
            </a>
            <a
              href="https://linkedin.com/in/alaamer"
              class="contact-item linkedin"
            >
              <span class="contact-icon">💼</span>
              <span class="contact-text">LinkedIn</span>
            </a>
            <a href="https://github.com/alaamer" class="contact-item github">
              <span class="contact-icon">🐱</span>
              <span class="contact-text">GitHub</span>
            </a>
          </div>
        </section>
      </main>
    </div>
  </body>
</html>

/* advanced-profile.css */
:root {
  --primary: #667eea;
  --primary-dark: #5a6fd8;
  --secondary: #764ba2;
  --accent: #f093fb;
  --success: #4ecdc4;
  --text-dark: #2c3e50;
  --text-light: #7f8c8d;
  --bg-light: #f8f9fa;
  --white: #ffffff;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.2);
  --border-radius: 12px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Cairo", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, var(--bg-light) 0%, #e3f2fd 100%);
  min-height: 100vh;
  color: var(--text-dark);
  line-height: 1.6;
}

.profile-container {
  max-width: 900px;
  margin: 2rem auto;
  background: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* رأس الملف الشخصي */
.profile-header {
  position: relative;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  padding: 3rem 2rem 2rem;
  text-align: center;
  color: var(--white);
  overflow: hidden;
}

.background-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(
      circle at 20% 50%,
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 80% 50%,
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px
    );
  background-size: 30px 30px;
  opacity: 0.3;
}

.header-content {
  position: relative;
  z-index: 2;
}

.avatar-section {
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.2);
  object-fit: cover;
  transition: var(--transition);
}

.avatar:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.4);
}

.status-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--white);
  background: var(--success);
}

.status-indicator.online {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.profile-name {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-role {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.profile-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* المحتوى الرئيسي */
.profile-main {
  padding: 2rem;
}

.section-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 2px;
}

/* قسم النبذة */
.about-section {
  margin-bottom: 3rem;
}

.about-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-light);
}

/* قسم المهارات */
.skills-section {
  margin-bottom: 3rem;
}

.skills-grid {
  display: grid;
  gap: 1.5rem;
}

.skill-item {
  background: var(--bg-light);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.skill-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.skill-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

.skill-name {
  font-weight: 600;
  color: var(--text-dark);
}

.skill-percentage {
  font-size: 0.9rem;
  color: var(--primary);
  font-weight: 600;
}

.skill-bar {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.skill-progress {
  height: 100%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 4px;
  transition: width 0.8s ease;
  position: relative;
}

.skill-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* قسم التواصل */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: var(--bg-light);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: var(--text-dark);
  transition: var(--transition);
  border: 2px solid transparent;
}

.contact-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.contact-item.email:hover {
  border-color: #ea4335;
  background: rgba(234, 67, 53, 0.1);
}

.contact-item.linkedin:hover {
  border-color: #0077b5;
  background: rgba(0, 119, 181, 0.1);
}

.contact-item.github:hover {
  border-color: #333;
  background: rgba(51, 51, 51, 0.1);
}

.contact-icon {
  font-size: 1.5rem;
  margin-left: 1rem;
}

.contact-text {
  font-weight: 500;
}

/* التصميم المتجاوب */
@media (max-width: 768px) {
  .profile-container {
    margin: 1rem;
    border-radius: var(--border-radius);
  }

  .profile-header {
    padding: 2rem 1rem 1.5rem;
  }

  .profile-name {
    font-size: 2rem;
  }

  .profile-stats {
    gap: 1rem;
  }

  .profile-main {
    padding: 1.5rem;
  }

  .contact-methods {
    grid-template-columns: 1fr;
  }
}

الخلاصة

في هذا الدرس تعلمنا:

✅ المحددات المتقدمة والحالات الزائفة ✅ محددات الترتيب والموضع والنوع
✅ العناصر الزائفة وإضافة المحتوى ✅ خصائص النص والخط المتقدمة ✅ أنظمة الألوان والخلفيات المعقدة ✅ مشروع عملي متقدم للملف الشخصي

في الدرس القادم سنستكشف Box Model ونموذج الصندوق لفهم كيفية تحديد أبعاد ومسافات العناصر بدقة.

📩 هل تحتاج مساعدة متقدمة في CSS؟