آخر الأخبار

استكشف في مدونة أوعي وشك عالم الابتكار

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

الصفحة الرئيسية
css

من الخيال إلى الواقع تصميم واجهات تفاعلية باستخدام تقنيات CSS المتقدمة

يُستخدم لتنسيق عناصر واجهة المستخدم، وخاصةً العناصر التي تحتوي على فئة .card
wesam elngar
من الخيال إلى الواقع تصميم واجهات تفاعلية باستخدام تقنيات CSS المتقدمة
هذا الكود هو جزء من ملف CSS يُستخدم لتنسيق عناصر واجهة المستخدم، وخاصةً العناصر التي تحتوي على فئة .card. الكود يعتمد على تقنيات متقدمة في CSS مثل emix-blend-mode و background-blend-mode لإنشاء تأثيرات بصرية معقدة. سأشرح الكود بالتفصيل:
 الامثلة:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  1. HTML
    	
<div class="card"></div>
  2. CSS
    
  .card {
	overflow: hidden;
	position: relative;
	height: 300px;
	margin: 10px;
	border-radius: 8px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	background: linear-gradient(to left top, #337AB7, #BFE2FF);
}
.card:before, .card:after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	content: "";
}
.card:before {
	filter: contrast(19);
	mix-blend-mode: multiply;
}
.card:after {
	background: linear-gradient(90deg, #285f8f, #337AB7);
	mix-blend-mode: screen;
}

وبعد ذلك نضيف الخيار المطلوب

  • 
      .card:before {
	background: repeating-linear-gradient(45deg, #000, #999, #000 5%), linear-gradient(45deg, #777, #000);
	background-blend-mode: screen;
}
      
  • 
      .card:before {
	background: repeating-radial-gradient(circle at 0 50%, #000, #999, #000 5%), radial-gradient(circle at 0 50%, #777, #000);
	background-blend-mode: screen;
}
      
  • 
      .card:before {
	background: repeating-conic-gradient(at -9% 25%, #000, #999, #000 2.5%), conic-gradient(at -9% 25%, #000, #777 50%);
	background-blend-mode: screen;
}
      
  • 
      .card:before {
	background: repeating-linear-gradient(30deg, #000, #999, #000 5%), repeating-linear-gradient(-60deg, #000, #999, #000 5%), linear-gradient(30deg, #777, #000);
	background-blend-mode: screen;
}
      
  • 
      .card:before {
	background: linear-gradient(#777, #000), repeating-radial-gradient(circle at -35% 0, #000, #999, #000 5%), repeating-radial-gradient(circle at -35% 100%, #000, #999, #000 5%);
	background-blend-mode: screen, difference;
}
      
  • 
      .card:before {
	background: linear-gradient(30deg, #777, #000), repeating-linear-gradient(30deg, #000, #999, #000 5%), repeating-linear-gradient(-60deg, #000, #999, #000 5%);
	background-blend-mode: screen, difference;
}
      
  • 
      .card:before {
	background: linear-gradient(30deg, #777, #000), repeating-linear-gradient(30deg, #000, #999, #000 5%), repeating-conic-gradient(#000, #999, #000 5%);
	background-blend-mode: screen, difference;
}
      
  • 
  .card:before {
	background: linear-gradient(30deg, #777, #000), repeating-linear-gradient(30deg, #000, #999, #000 5%), repeating-radial-gradient(circle at 100% 50%, #000, #999, #000 5%);
	background-blend-mode: screen, difference;
}
      
  • 
      .card:before {
	background: radial-gradient(circle, #777, #000), repeating-linear-gradient(-45deg, #000, #999, #000 5%), repeating-linear-gradient(45deg, #000, #999, #000 5%);
	background-blend-mode: screen, difference;
}
      
  • 
      .card:before {
	background: conic-gradient(#777, #000), repeating-linear-gradient(-45deg, #000, #999, #000 5%), repeating-linear-gradient(45deg, #000, #999, #000 5%);
	background-blend-mode: screen, difference;
}
      
  • 
     .card:before {
	background: radial-gradient(circle, #000, #666 70%), radial-gradient(circle, #000, #fff, #000 71%) 0 0/2em 2em round, radial-gradient(circle, #000, #fff, #000 71%) 1em 1em/2em 2em round;
	background-blend-mode: difference;
} 
      
  • 
      .card:before {
	background: linear-gradient(-15deg, #000, #666), radial-gradient(circle, #fff, #000 65%) 0 0/2em 2em round, radial-gradient(circle, #000, #fff, #000 65%) 1em 1em/2em 2em round;
	background-blend-mode: difference;
}
      
  • 
      .card:before {
	background: linear-gradient(#777, #000), radial-gradient(circle, #000, #999, #000 65%) 0 0/2em 2em round, radial-gradient(circle, #000, #999, #000 65%) 1em 1em/2em 2em round;
	background-blend-mode: screen, difference;
}
      
  • 
      .card:before {
	background: conic-gradient(at 0 50%, #777, #000), repeating-radial-gradient(circle at 0 0, #000, #999, #000 5%), repeating-conic-gradient(at -5% 50%, #000, #999, #000 5%);
	background-blend-mode: screen, difference;
}
      
  • 
      .card:before {
	background: repeating-linear-gradient(45deg, #000, #999, #000 5%) 0/50% no-repeat, repeating-linear-gradient(-45deg, #000, #999, #000 5%) 100%/50% no-repeat, linear-gradient(#777, #000);
	background-blend-mode: screen;
}
      
  • 
      .card:before {
	background: radial-gradient(circle, #888, #000), repeating-radial-gradient(circle at 0 100%, #000, #888, #000 5%) 0 0/100% 50% no-repeat, repeating-radial-gradient(circle at 100% 0, #000, #888, #000 5%) 0 100%/100% 50% no-repeat;
	background-blend-mode: screen;
}
      
  • 
      .card:before {
	background: radial-gradient(#000, #fff 70%) 0.75em 0.75em, conic-gradient(from -90deg at 15% 50%, #fff, #000 5% 30%, #fff 35%), conic-gradient(at 50% 15%, #fff, #000 5% 30%, #fff 35%), conic-gradient(from 90deg at 85% 50%, #fff, #000 5% 30%, #fff 35%), conic-gradient(from 180deg at 50% 85%, #fff, #000 5% 30%, #fff 35%);
	background-size: 1.5em 1.5em;
	background-blend-mode: difference, multiply, multiply, multiply;
}
      
  • 
      .card:before {
	background: linear-gradient(#777, #000), repeating-conic-gradient(#ddd, #000 12.5% 37.5%, #ddd 50%) 0/1em 1em;
	background-blend-mode: screen;
}
      
  • 
      .card:before {
	background: radial-gradient(circle, #000, #777), repeating-radial-gradient(circle, #ddd, #000, #ddd 5%), repeating-conic-gradient(#ddd, #000, #ddd 5%);
	background-blend-mode: screen, difference;
}
      
  • 
      .card:before {
	background: repeating-linear-gradient(45deg, #000, #666, #000 20%), repeating-radial-gradient(circle, #ddd, #000, #ddd 5%), repeating-conic-gradient(#ddd, #000, #ddd 5%);
	background-blend-mode: screen, difference;
}

    • شرح الاكواد

    1. تنسيق العنصر span داخل .card:
       
    .card span {
    font-size: 18px;
    color: #FFF;
    padding: 6px;
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    line-height: 28px;
    text-align: center;
    border: 3px solid #BFE2FF;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    font-weight: bold;
}

      شرح الكود

      • يتم تنسيق العنصر span داخل العناصر التي تحتوي على فئة .card.

      • النص داخل span يكون بحجم 18 px ولونه أبيض #FFF.

      • يتم إضافة padding بقيمة 6 px حول النص.

      • يتم تحديد موضع span بشكل مطلق position: absolute بالنسبة للعنصر الأب .card، ويتم وضعه على بعد 12 px من الأعلى واليسار.

      • الخلفية تكون شبه شفافة rgba(0,0,0,0.7) مع حواف دائرية border-radius: 50%.

      • الأبعاد الثابتة للعنصر هي 48 px عرضًا وارتفاعًا.

      • يتم توسيط النص رأسيًا باستخدام line-height وأفقيًا باستخدام text-align: center.

      • يتم إضافة حدود زرقاء #BFE2FF بسمك 3 px وظل خفيف حول العنصر.

      • النص يكون عريضًا font-weight: bold.

    2. العناصر الزائفة :before و :after للـ .card:
      
        .card:before, .card:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    content: "";
}

      شرح الكود

      • يتم إنشاء عناصر زائفة :before و :after لكل عنصر يحتوي على فئة .card.

      • هذه العناصر الزائفة تغطي مساحة العنصر الأب بالكامل top: 0, right: 0, bottom: 0, left: 0.

      • يتم وضعها خلف المحتوى الفعلي للعنصر باستخدام z-index: 0.

      • content: "" مطلوب لعرض العناصر الزائفة.

    3. تخصيص العنصر الزائف :before:
      . 
        
        card:before {
    filter: contrast(19);
    mix-blend-mode: multiply;
}

      شرح الكود

      • يتم تطبيق فلتر contrast لزيادة التباين.
      • يتم استخدام mix-blend-mode: multiply لدمج الخلفية مع العناصر الأخرى.
    4. تخصيص العنصر الزائف :after:
      
      .card:after {
    background: linear-gradient(90deg, #285f8f, #337AB7);
    mix-blend-mode: screen;
}

      شرح الكود

      • يتم إنشاء خلفية متدرجة linear-gradient من الأزرق الغامق إلى الأزرق الفاتح.
      • يتم استخدام mix-blend-mode: screen لدمج الخلفية مع العناصر الأخرى.
    5. تخصيص خلفيات مختلفة لكل .card:

      يتم استخدام :nth-child لتطبيق خلفيات مختلفة لكل عنصر .card بناءً على ترتيبه. على سبيل المثال:

      
 .card:nth-child(1):before {
    background: repeating-linear-gradient(45deg, #000, #999, #000 5%), linear-gradient(45deg, #777, #000);
    background-blend-mode: screen;
}

      شرح الكود

      • يتم تطبيق خلفية متكررة repeating-linear-gradient وخلفية متدرجة linear-gradient للعنصر الأول .card:nth-child(1).

      • يتم دمج الخلفيات باستخدام background-blend-mode: screen.

    6. تأثيرات متقدمة باستخدام background-blend-mode و mix-blend-mode:

      الكود يستخدم تقنيات متقدمة لإنشاء تأثيرات بصرية معقدة، مثل:

      • background-blend-mode: لدمج عدة خلفيات معًا.

      • mix-blend-mode: لدمج العناصر مع الخلفيات أو العناصر الأخرى.

    7. أمثلة على الخلفيات:

      • خلفيات متكررة:

        
 .card:nth-child(1):before {
    background: repeating-linear-gradient(45deg, #000, #999, #000 5%), linear-gradient(45deg, #777, #000);
}

        يتم إنشاء خلفية متكررة بزاوية 45 درجة.

      • خلفيات دائرية:

        
   .card:nth-child(2):before {
    background: repeating-radial-gradient(circle at 0 50%, #000, #999, #000 5%), radial-gradient(circle at 0 50%, #777, #000);
}

        يتم إنشاء خلفية دائرية متكررة.

      • خلفيات مخروطية:

        
  .card:nth-child(3):before {
    background: repeating-conic-gradient(at -9% 25%, #000, #999, #000 2.5%), conic-gradient(at -9% 25%, #000, #777 50%);
}

        يتم إنشاء خلفية مخروطية متكررة.

    8. استخدام background-blend-mode مع عدة خلفيات:
      
 .card:nth-child(5):before {
    background: linear-gradient(#777, #000), repeating-radial-gradient(circle at -35% 0, #000, #999, #000 5%), repeating-radial-gradient(circle at -35% 100%, #000, #999, #000 5%);
    background-blend-mode: screen, difference;
}

      شرح الكود

      • يتم دمج عدة خلفيات باستخدام background-blend-mode مع وضعيات مختلفة screen, difference.

    9. تأثيرات متقدمة أخرى:

      الكود يحتوي على العديد من التأثيرات المتقدمة مثل:

      • تدرجات خطية ودائرية ومخروطية.

      • دمج الخلفيات باستخدام difference و multiply.

      • تطبيق ظلال وألوان متعددة.

    الخلاصة:
    هذا الكود يستخدم تقنيات CSS متقدمة لإنشاء تأثيرات بصرية معقدة ومتنوعة لعناصر .card. يتم استخدام :before و :after لإنشاء خلفيات متداخلة، و background-blend-mode و mix-blend-mode لدمج الخلفيات معًا. كل عنصر .card يحصل على خلفية فريدة بناءً على ترتيبه باستخدام :nth-child.
    كيف كان المقال؟

    لحظة من فضلك

    نحن نتصفح الكثير من المواقع ونجلب لك المقالات التي تبحث عنها ونختصرها لك وهذه المقالات عند كتابتها ونشرها تاخذ مننا وقت وجهد وسهر كبير ونحن لا نطلب الكثير

    لذلك نطلب منك تعليقا للمحتوي وطريقة نشره هل تعجبك ام لا نطلب منك الدعم ودعمك هو تعليقك لكي نستمر لذلك حبا وليس امر من فضلك اكتب تعليق

    من الخيال إلى الواقع تصميم واجهات تفاعلية باستخدام تقنيات CSS المتقدمة

    🌟 انتبه عزيزي أعضاء المجتمع! 🌟
    نحن متحمسون لمشاركتك في مناقشاتنا الديناميكية. لضمان بيئة محترمة وشاملة للجميع، نطلب تعاونكم مع الإرشادات التالية:
    1. احترام الخصوصية: يرجى عدم مشاركة معلومات حساسة أو شخصية في تعليقاتك.
    2. انشر الإيجابية: نحن نتمسك بسياسة عدم التسامح مطلقًا مع خطاب الكراهية أو اللغة المسيئة. دعونا نحافظ على محادثاتنا محترمة وودية.
    3. اللغة المفضلة: لا تتردد في التعبير عن نفسك باللغة الإنجليزية أو العربية. ستساعدنا هاتان اللغتان في الحفاظ على مناقشة واضحة ومتماسكة.
    4. احترام التنوع: لتعزيز جو شامل، نطلب منك بكل احترام تجنب مناقشة المسائل الدينية في تعليقاتك.
    تذكر أن مساهماتك قيمة، ونحن نقدر التزامك بجعل مجتمعنا مكانًا ترحيبيًا للجميع. دعونا نواصل التعلم والنمو معًا من خلال المناقشات البناءة والاحترام المتبادل.
    شكرًا لكونك جزءًا من مجتمعنا اوعي وشك! 🌟

    إرسال تعليق