كيفية إنشاء: الشريط الاجتماعي الثابت
- الصفحة السابقة مجموعة الأزرار العمودية
- الصفحة التالية التصفح الكروي
تعلم كيفية استخدام CSS لإنشاء شريط وسائل التواصل الاجتماعي ثابت/متمدد.
كيفية إنشاء الشريط الاجتماعي الثابت
الخطوة الأولى - إضافة HTML:
<!-- تحميل أيقونات Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- شريط الأيقونات الاجتماعية --> <div class="icon-bar"> <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <a href="#" class="google"><i class="fa fa-google"></i></a> <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a> <a href="#" class="youtube"><i class="fa fa-youtube"></i></a> </div>
الخطوة الثانية - إضافة CSS:
/* شريط الأيقونات الثابت/اللاصق (منسجماً مع أعلى الشاشة 50%) */ .icon-bar { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* قم بتعيين نماذج الألوان للروابط في شريط الأيقونات */ .icon-bar a { display: block; text-align: center; padding: 16px; transition: all 0.3s ease; color: أبيض; font-size: 20px; } /* إذا كنت بحاجة، قم بتعيين نماذج الألوان للإشارات الاجتماعية */ .icon-bar a:hover { background-color: #000; } .facebook { background: #3B5998; color: أبيض; } .twitter { background: #55ACEE; color: أبيض; } .google { background: #dd4b39; color: أبيض; } .linkedin { background: #007bb5; color: أبيض; } .youtube { background: #bb0000; color: أبيض; }
الصفحات ذات الصلة
- الصفحة السابقة مجموعة الأزرار العمودية
- الصفحة التالية التصفح الكروي