الصورة الرمزية (Avatar): تمثيل بصري بسيط لكنه مهم - العدد #40 |
| 25 يوليو 2025 • بواسطة أحمد زعكان • #العدد 40 • عرض في المتصفح |
|
في تصميم واجهات المستخدم، تُستخدم الصورة الرمزية (Avatar) لتمثيل المستخدم أو الشخص بصريًا، سواء في ملفات التعريف، أو التعليقات، أو الرسائل، أو حتى في لوحات التحكم. وهي عنصر صغير لكنه يحمل دلالة بصرية قوية، ويُسهم في تعزيز تجربة المستخدم وربط الواجهة بالهوية الشخصية.
|
|
|
ابدأ بالمعنى قبل الشكل |
|
عند إنشاء أي مكون في واجهة المستخدم، من المهم أن تبدأ بـ الدلالة (semantics) قبل التفكير في الشكل.\ الصورة الرمزية ليست مجرد صورة، بل تمثل هوية المستخدم، لذا يجب أن تُستخدم داخل عنصر مناسب (مثل <img> أو <figure>) مع نص بديل (alt) يصف الصورة، لضمان الوصولية. |
تحويل الصورة إلى دائرة باستخدام border-radius |
|
لجعل الصورة الرمزية تظهر بشكل دائري، نستخدم خاصية: |
|
|
لكن هذا يعمل فقط إذا كانت أبعاد الصورة مربعة (أي العرض = الارتفاع).\ إذا كانت الأبعاد غير متساوية، فستظهر الصورة بشكل بيضاوي. |
|
من المهم أن تعرف أن النسبة المئوية في border-radius تُحسب بناءً على أبعاد العنصر نفسه، وليس على حجم الخط أو الحاوية، وهذا يختلف عن استخدام النسب المئوية في خصائص أخرى. |
خلاصة |
|
تعلم Html & Css
تعلم Html & Css بأسلوب مقالي بسيط وسهل
التعليقات