أزرار الوسائط الاجتماعية المتوهجة
مقدمة:
أزرار الوسائط الاجتماعية المتوهجة هي أداة تفاعلية تُستخدم في المواقع الإلكترونية والمدونات لتشجيع الزوار على متابعة حسابات الوسائط الاجتماعية الخاصة بالموقع. هذه الأزرار ليست فقط جذابة بصريًا، بل توفر أيضًا تجربة مستخدم ممتعة من خلال تأثيرات التوهج التي تظهر عند التحويم (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، وأهمية استخدامها في المدونة لزيادة التفاعل وتحسين تجربة المستخدم.
