انشاء ايقونة مشاركة عند الضغط عليها تظهر لك ايقونات مواقع التواصل الاجتماعي [Create a share icon, when you click on it, the social media icons will appear to you

2 110

 انشاء ايقونة مشاركة عند الضغط عليها تظهر لك ايقونات مواقع التواصل الاجتماعي

لضمان عدم مواجهة اي مشاكل وتظهر لك الايقونات كما موجود في الفيديو اتبع الخطوات التالية ..

  1. قم بانشاء ملف Html 
  2. قم بانشاء ملف Css وتأكد من ربطه في صفحة Html
  3. لاتنسئ اضافة مكتبة fontawesome  التي سوف نجلب منها الايقونات الظاهره..ساترك رابط المكتبة اسفل 

كود Html 

<!DOCTYPE html>
<html>
<head>
<!–  fontawesome مكتبة –>
<script src=”https://kit.fontawesome.com/e25b852c87.js” 
crossorigin=”anonymous”></script>
<title> ايقونات تواصل  </title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”container”>
<input type=”checkbox” id=”share-toggle”>
<label for=”share-toggle”>
<span><i class=”fas fa-share-alt”></i></span>
    </label>
   <div class=”social-media-list”>
<a href=”#”><i class=”fab fa-facebook-f”></i></a>
      <a href=”#”><i class=”fab fa-whatsapp”></i></a>
<a href=”#”><i class=”fab fa-snapchat-ghost”></i></a>
<a href=”#”><i class=”fab fa-youtube”></i></a>
<a href=”#”><i class=”fab fa-reddit-alien”></i></a>
<a href=”#”><i class=”fab fa-twitter”></i></a>
<a href=”#”><i class=”fab fa-dribbble”></i></a>
<a href=”#”><i class=”fab fa-linkedin-in”></i></a>
   </div>
</div>
</body>
</html>

كود Css

*{ margin: 0; padding: 0; box-sizing: border-box; }
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
}
.container{
width: 70px; height: 70px; 
position: relative;
}
#share-toggle{ display: none; }
span, a{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
span{
width: 70px; height: 70px;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
background-color: #eee;
color: #333;
font-size: 30px;
z-index: 1;
cursor: pointer;
box-shadow: 0 10px 20px rgba(0,0,0,0.6);
}
.social-media-list{
width: 60px; height: 60px;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
.social-media-list a{
width: 60px; height: 60px;
border-radius: 50%;
text-decoration: none;
color: #fff;
transition: all 0.3s;
font-size: 25px;
}
#share-toggle:checked ~ .social-media-list a:nth-child(1){
background-color: #3B5998;
transition-delay: 0s;
transform: translateY(-100px);
}
#share-toggle:checked ~ .social-media-list a:nth-child(2){
background-color: #25D366;
transition-delay: 0.1s;
transform: translate(70px,-70px);
}
#share-toggle:checked ~ .social-media-list a:nth-child(3){
background-color: #FFFC00;
transition-delay: 0.2s;
transform: translateX(100px);
}
#share-toggle:checked ~ .social-media-list a:nth-child(4){
background-color: #FF0000;
transition-delay: 0.3s;
transform: translate(70px,70px);
}
#share-toggle:checked ~ .social-media-list a:nth-child(5){
background-color: #FF4500;
transition-delay: 0.4s;
transform: translateY(100px);
}
#share-toggle:checked ~ .social-media-list a:nth-child(6){
background-color:#00ACEE;
transition-delay: 0.5s;
transform: translate(-70px, 70px);
}
#share-toggle:checked ~ .social-media-list a:nth-child(7){
background-color: #EA4C89;
transition-delay: 0.6s;
transform: translateX(-100px);
}
#share-toggle:checked ~ .social-media-list a:nth-child(8){
background-color: #0E76A8;
transition-delay: 0.7s;
transform: translate(-70px,-70px);
}

ويمكنك ايضا تحميل الملفات جاهزة من قناتنا في التلكرام  والتعديل عليها  ?

تحميل الان

ويمكنك ايضا تحميل الملفات جاهزة عبر المديا فاير والتعديل عليها?

تحميل الان

رابط مكتبة fontawesome

                             اليكم بعض المشاريع في  Html,CSS 

انشاء قائمة متجاوبا مع جميع الشاشات يمكنكم تحميل الملفات والتعديل عليها

معاينة المشروع

افضل الكتب العربية لتعلم برمجة الويب

معاينة المشروع

تحميل وردبريس واحترافه دون الحاجة الى استضافة او دومين

معاينة المشروع

                                  يمكنك متابعة المدونة لمشاهدة كل جديد?

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.

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