موقع ويب

نموذج عملي يوضح بعض تأثيرات الـ Hover و الـ Transitions التي أقدمها في المواقع

1. لوحة ألوان مخصصة (Custom color palette)

تم استخدام متغيرات الـ CSS (CSS variables) لإدارة الألوان بسهولة، بحيث تقدر تغير ألوان الموقع أو تعمل ثيم جديد بالكامل من مكان واحد بس.

2. أنيميشن ناعمة عند التمرير بالماوس (Smooth hover animations)

تم إضافة تأثيرات انتقالية أنيقة على اللوجو، عناصر القائمة (Navigation items)، والأيقونات بحيث تعطي الموقع تفاعل ممتع وسلس.

3. زر اشتراك تفاعلي في النشرة البريدية (Interactive newsletter button)

الزر بيعمل أنيميشن اهتزاز (Shaking animation) بشكل مرح عند التفاعل معاه ، وده بيشجع الزائر يضغط عليه.

4. أيقونات السوشيال ميديا مع تلميحات (Social media tooltips)

عند تمرير الماوس على أي أيقونة بيظهر وصف/تلميح صغير (Tooltip) معمول بالكامل باستخدام الـ CSS فقط (بدون جافاسكريبت).

5. تصميم متجاوب بالكامل (Fully responsive)

باستخدام الـ Media Queries تم ضبط الموقع بحيث يشتغل بشكل مثالي على الموبايل والشاشات الصغيرة بنفس جودة نسخة الكمبيوتر.

6. اختيارات فريدة في الخطوط (Unique typography choices)

تم اختيار خطوط مميزة تعطي إحساس ودي وحيوي، بحيث يبان الموقع جذاب وسهل القراءة ويترك انطباع إيجابي عند الزائر.