آخر الأخبار

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

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

اضافة تاثير متوهج لأيقونات الوسائط الاجتماعية في CSS

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

أزرار الوسائط الاجتماعية المتوهجة

مقدمة:

أزرار الوسائط الاجتماعية المتوهجة هي أداة تفاعلية تُستخدم في المواقع الإلكترونية والمدونات لتشجيع الزوار على متابعة حسابات الوسائط الاجتماعية الخاصة بالموقع. هذه الأزرار ليست فقط جذابة بصريًا، بل توفر أيضًا تجربة مستخدم ممتعة من خلال تأثيرات التوهج التي تظهر عند التحويم (Hover). في هذا المقال، سنقوم بتنسيق الكود داخل <div> مع شرح تفصيلي لأهمية هذه الأزرار في المدونة.

الكود الكامل:

<style>
    /* تنسيقات css */
    ul {
      display: flex;
      list-style: none;
      padding: 0;
      justify-content: center;
    }
    ul li {
      position: relative;
      display: block;
      color: #666;
      font-size: 30px;
      height: 60px;
      width: 60px;
      background: #171515;
      line-height: 60px;
      border-radius: 50%;
      margin: 0 15px;
      cursor: pointer;
      transition: .5s;
    }
    ul li:before {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      height: inherit;
      width: inherit;
      border-radius: 50%;
      transform: scale(.9);
      z-index: -1;
      transition: .5s;
    }
    ul li:nth-child(1):before {
      background: #4267B2; /* لون فيسبوك */
    }
    ul li:nth-child(2):before {
      background: #1DA1F2; /* لون تويتر */
    }
    ul li:nth-child(3):before {
      background: #E1306C; /* لون إنستغرام */
    }
    ul li:nth-child(4):before {
      background: #2867B2; /* لون لينكد إن */
    }
    ul li:nth-child(5):before {
      background: #ff0000; /* لون يوتيوب */
    }
    ul li:hover:before {
      filter: blur(3px);
      transform: scale(1.2);
    }
    ul li:nth-child(1):hover:before {
      box-shadow: 0 0 15px #4267B2; /* توهج فيسبوك */
    }
    ul li:nth-child(2):hover:before {
      box-shadow: 0 0 15px #1DA1F2; /* توهج تويتر */
    }
    ul li:nth-child(3):hover:before {
      box-shadow: 0 0 15px #E1306C; /* توهج إنستغرام */
    }
    ul li:nth-child(4):hover:before {
      box-shadow: 0 0 15px #2867B2; /* توهج لينكد إن */
    }
    ul li:nth-child(5):hover:before {
      box-shadow: 0 0 15px #ff0000; /* توهج يوتيوب */
    }
    ul li:nth-child(1):hover {
      color: #456cba;
      box-shadow: 0 0 15px #4267B2;
      text-shadow: 0 0 15px #4267B2;
    }
    ul li:nth-child(2):hover {
      color: #26a4f2;
      box-shadow: 0 0 15px #1DA1F2;
      text-shadow: 0 0 15px #1DA1F2;
    }
    ul li:nth-child(3):hover {
      color: #e23670;
      box-shadow: 0 0 15px #E1306C;
      text-shadow: 0 0 15px #E1306C;
    }
    ul li:nth-child(4):hover {
      color: #2a6cbb;
      box-shadow: 0 0 15px #2867B2;
      text-shadow: 0 0 15px #2867B2;
    }
    ul li:nth-child(5):hover {
      color: #ff1a1a;
      box-shadow: 0 0 15px #ff0000;
      text-shadow: 0 0 15px #ff0000;
    }
  </style>
</head>
<body>
  <div class="social-icons">
    <h2>تابعنا على وسائل التواصل الاجتماعي</h2>
    <ul>
      <li><i class="fab fa-facebook-f"></i></li>
      <li><i class="fab fa-twitter"></i></li>
      <li><i class="fab fa-instagram"></i></li>
      <li><i class="fab fa-linkedin-in"></i></li>
      <li><i class="fab fa-youtube"></i></li>
    </ul>
  </div>
    
شرح الكود:
مكتبة Font Awesome:

يتم تضمين مكتبة Font Awesome عبر الرابط التالي في <head>: هذه المكتبة توفر أيقونات جاهزة للاستخدام، مثل أيقونات فيسبوك، تويتر، إنستغرام، وغيرها.


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"/>
    
الهيكل الأساسي (HTML):

يتم إنشاء قائمة (<ul>) تحتوي على عناصر (<li>) تمثل كل منها زرًا لوسيلة تواصل اجتماعي. كل زر يحتوي على أيقونة من Font Awesome:

<i class="fab fa-facebook-f"></i>
التنسيقات (CSS):
  • الأزرار الدائرية: يتم تحويل الأزرار إلى دوائر باستخدام border-radius: 50%. يتم تحديد حجم الأزرار بـ width: 60px و height: 60px.
  • تأثير التوهج: عند التحويم (hover)، يتم تطبيق تأثير توهج باستخدام box-shadow و text-shadow. يتم تغيير لون الخلفية والأيقونة عند التحويم لإضافة تأثير تفاعلي.
  • الألوان: كل زر له لون خلفية خاص بمنصة التواصل الاجتماعي التي يمثلها:
    • فيسبوك: #4267B2
    • تويتر: #1DA1F2
    • إنستغرام: #E1306C
    • لينكد إن: #2867B2
    • يوتيوب: #ff0000
أهمية الأزرار في المدونة:
  • زيادة التفاعل: تشجع الزوار على متابعة حسابات الوسائط الاجتماعية الخاصة بالمدونة، مما يزيد من التفاعل والمتابعين.
  • تحسين تجربة المستخدم: التصميم الجذاب والتأثيرات التفاعلية تجعل المدونة أكثر احترافية وتجذب انتباه الزوار.
  • تعزيز العلامة التجارية: توفر الأزرار طريقة سهلة للزوار للوصول إلى حسابات الوسائط الاجتماعية، مما يعزز وجود العلامة التجارية على المنصات المختلفة.
  • تحسين SEO: الروابط الخارجية إلى حسابات الوسائط الاجتماعية يمكن أن تساعد في تحسين تصنيفات المدونة في محركات البحث.
نصائح للاستخدام:
  • التوافق مع التصميم: تأكد من أن ألوان الأزرار تتوافق مع ألوان المدونة الرئيسية.
  • الاستجابة: يمكن إضافة تنسيقات إضافية لجعل الأزرار متجاوبة مع مختلف أحجام الشاشات.
  • إضافة روابط: يمكن إضافة روابط فعلية إلى حسابات الوسائط الاجتماعية باستخدام الوسم <a> حول الأيقونات.
مثال مع روابط:

<ul>
  <li><a href="https://facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
  <li><a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a></li>
  <li><a href="https://instagram.com" target="_blank"><i class="fab fa-instagram"></i></a></li>
  <li><a href="https://linkedin.com" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
  <li><a href="https://youtube.com" target="_blank"><i class="fab fa-youtube"></i></a></li>
</ul>
    
معاينة

بهذا الشرح، يمكنك فهم كيفية إنشاء أزرار وسائط اجتماعية متوهجة باستخدام HTML وCSS، وأهمية استخدامها في المدونة لزيادة التفاعل وتحسين تجربة المستخدم.

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

Post a Comment