تأثير Hovering - II

الدرس 31 من 31 في دورة بطاقة 3D | مشروع Front-end على Coddy.

يقوم هذا الكود بتنسيق أزرار التواصل الاجتماعي داخل حاوية تحمل الفئة "social-buttons-container" والموجودة داخل عنصر يحمل الفئة "bottom". دعني أشرح ذلك بالتفصيل:

تقوم كتل الكود الثلاث الأولى بإعداد الانتقالات (transitions) لأزرار التواصل الاجتماعي. لكل زر تأخير مختلف قبل بدء الانتقال. هذه الانتقالات مخصصة لخاصية "transform" (التي تتعامل غالباً مع الحركة) وخاصية "box-shadow" (التي تتحكم غالباً في تأثيرات الظل). تجعل هذه الانتقالات حركة الأزرار وتغييرات الظل سلسة بمرور الوقت.
تقوم الكتلة الرابعة بتحديد العرض ولون التعبئة لأيقونات SVG (Scalable Vector Graphics) داخل أزرار التواصل الاجتماعي.
تقوم الكتلة الخامسة بإعداد الأنماط لحالة تمرير الماوس (hover) فوق زر التواصل الاجتماعي. حيث تقوم بتغيير لون الخلفية إلى الأسود وتغيير المؤشر إلى شكل يد (pointer)، مما يشير إلى أنه قابل للنقر.
تقوم الكتلة الأخيرة بتغيير لون تعبئة أيقونة SVG إلى اللون الأبيض عند تمرير الماوس فوق زر التواصل الاجتماعي، مما يوفر استجابة بصرية للمستخدم.

التحدي

سهل

استخدم هذا الكود:

.bottom .social-buttons-container .social-button:first-child {
  transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;
}

.bottom .social-buttons-container .social-button:nth-child(2) {
  transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;
}

.bottom .social-buttons-container .social-button:nth-child(3) {
  transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;
}

.bottom .social-buttons-container .social-button .svg {
  width: 15px;
  fill: #008982;
}

.bottom .social-buttons-container .social-button:hover {
  background: black;
  cursor: pointer;
}

.bottom .social-buttons-container .social-button:hover .svg {
  fill: white;
}

.glass{
  border-top-right-radius: 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
  transform: translate3d(0px, 0px, 25px);
  transition: all 0.5s ease-in-out;
}

بطاقتك ثلاثية الأبعاد جاهزة!

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

تأثير Hovering - II

جميع دروس بطاقة 3D | مشروع Front-end