21 حيلة في CSS ربما لم تكن تعرفها من قبل

اكتشف كنوزًا مخفية في تصميم الويب باستخدام 21 حيلة CSS ربما لم تكن تعرفها. اكتشف تقنيات CSS المبتكرة والأقل شهرة لتحسين أسلوب موقعك على الويب ووظائفه.

هل تساءلت يومًا ما إذا كان هناك المزيد من الأشياء الرائعة التي يمكنك القيام بها باستخدام CSS؟ انضم إليّ لإلقاء نظرة سريعة على 21 حيلة مخفية في CSS يمكن أن تكون أسلحتك السرية لإنشاء مواقع ويب رائعة. استعد لتعلم بعض حيل CSS الجديدة!

1. تحديد العناصر الفارغة

   يمكنك استخدام empty لتحديد العناصر التي لا تحتوي على أي محتوى:

   
   div:empty {
       display: none;
   }
   

2. تحديد العنصر الأول أو الأخير من نوعه

   استخدم :first-of-type و :last-of-type لتحديد العنصر الأول أو الأخير من نوعه داخل العنصر الأب:

   
    p:first-of-type {
       color: blue;
   }
   p:last-of-type {
       color: red;
   }
   

3. تحديد العنصر الوحيد من نوعه

   استخدم :only-of-type لتحديد العنصر إذا كان الوحيد من نوعه داخل العنصر الأب:

   
      p:only-of-type {
       font-weight: bold;
   }
   

4. تحديد العناصر بناءً على ترتيبها

   استخدم :nth-child() لتحديد العناصر بناءً على ترتيبها:

   
   li:nth-child(odd) {
       background-color: #f2f2f2;
   }
   li:nth-child(even) {
       background-color: #ddd;
   }
   

5. تحديد العنصر الأخير

   استخدم :last-child لتحديد العنصر الأخير داخل العنصر الأب:

   
   li:last-child {
   border-bottom: none;
   }
   

6. تحديد العناصر بناءً على السمة (Attribute)

   يمكنك تحديد العناصر بناءً على قيمة السمة باستخدام [attribute]:

   
   a[target="_blank"] {
       color: red;
   }      
   

7. تحديد العناصر بناءً على بداية أو نهاية قيمة السمة

   استخدم [attribute^="value"] و [attribute$="value"] لتحديد العناصر التي تبدأ أو تنتهي بقيمة معينة:

   
   a[href^="https"] {
       color: green;
   }
   a[href$=".pdf"] {
       color: red;
   }      
   

8. تحديد العناصر بناءً على وجود كلمة في قيمة السمة

   استخدم [attribute*="value"] لتحديد العناصر التي تحتوي على كلمة معينة في قيمة السمة:

   
   a[href*="google"] {
       font-weight: bold;
   }      
   

9. تحديد العناصر بناءً على حالة الإدخال

   استخدم :valid و :invalid لتحديد العناصر بناءً على صحة الإدخال:

   
    input:valid {
       border-color: green;
   }
   input:invalid {
       border-color: red;
   }     
   

10. تحديد العناصر بناءً على حالة التركيز

    استخدم :focus لتحديد العنصر عندما يكون في حالة تركيز:

    
    input:focus {
        background-color: yellow;
    }      
    

11. تحديد العناصر بناءً على حالة التحديد

    استخدم ::selection لتحديد النص المحدد من قبل المستخدم:

    
    ::selection {
        background-color: pink;
        color: white;
    }      
    

12. إنشاء أشكال باستخدام CSS

    يمكنك إنشاء أشكال مثل الدوائر والمثلثات باستخم border و border-radius:

    
    .circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: blue;
    }
    .triangle {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }      
    

13. تحديد العناصر بناءً على حالة العنصر الأب

    استخدم :has() لتحديد العناصر بناءً على وجود عناصر أخرى داخلها (مدعوم في بعض المتصفحات):

    
    div:has(p) {
        border: 1px solid black;
    }      
    

14. تحديد العناصر بناءً على حالة العنصر الأول حرفيًا

    استخدم :first-letter لتحديد الحرف الأول من النص:

    
    p::first-letter {
        font-size: 2em;
        color: red;
    }      
    

15. تحديد العناصر بناءً على حالة العنصر الأول سطرًا

    استخدم :first-line لتحديد السطر الأول من النص:

    
     p::first-line {
        font-weight: bold;
    }     
    

16. إنشاء تأثيرات ظل للنص

    استخدم text-shadow لإضافة ظل للنص:

    
    h1 {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }      
    

17. إنشاء تأثيرات ظل للعناصر

    استخدم box-shadow لإضافة ظل للعناصر:

    
    div {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    }      
    

18. إنشاء تدرجات لونية

    استخدم linear-gradient أو radial-gradient لإنشاء تدرجات لونية:

    
    body {
        background: linear-gradient(to right, red, yellow);
    }      
    

19. تحديد العناصر بناءً على حالة العنصر الأخير حرفيًا

    استخدم :last-letter (غير مدعوم بشكل مباشر، لكن يمكن تحقيقها بطرق أخرى):

    
    p::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: red;
    }      
    

20. إنشاء تأثيرات حركية بسيطة

    استخدم @keyframes لإنشاء حركات بسيطة:

    
    @keyframes slide {
        from { transform: translateX(0); }
        to { transform: translateX(100px); }
    }
    div {
        animation: slide 2s infinite;
    }      
    

21. التمرير السلس السحري

    اجعل التمرير سلسًا عن طريق إضافة scroll-behavior: smooth إلى HTML. تعمل خاصية CSS هذه على جعل سلوك التمرير سلسًا للصفحة بأكملها.

    
    html {
        scroll-behavior: smooth;
    }      
    

هذه الحيل يمكن أن تساعدك في تحسين وتخصيص تصميماتك بشكل كبير. جربها واستمتع بإمكانيات CSS الواسعة!