شاهد بنفسك: تأثير خلفيات الروابط

سأشرح في هذا الدرس كيف تستخدم تقنية css لعرض الروابط الرئيسية في مدونتك بطريقة فعّالة وجذابة. بالطبع هناك آلاف الطرق والألوان والخلفيات التي يمكنك أن تستخدمها ولكل مصمّم ومطوّر ذوقه الخاص. كما أن نوع وطبيعة الموقع أو المدونة كثيراً ما تحدد ما يمكن لك أن تستخدم من ألوان…إلخ. إن إهتمامي هنا سيكون حول عرض الأساسيات البرمجية فقط ويمكنك بعد ذلك أن تستخدم الألوان والخطوط والخلفيات التي تريد.

لاحظ أولاً أن هناك ثلاثة أمور أساسية بالنسبة للروابط وطريقة عرضها:

١- شكل الروابط على الموقع وهي ساكنة (a:link)

٢- شكلها حين يحوم الزائر بالفأرة عليها (a:hover)

٣- شكل الروابط حين يقوم المستخدم بزيارتها (a:visited)

بالطبع يمكنك أن تجعل هذه التصاميم مماثلة بحيث لا يتغيّر الشكل أو طريقة العرض إذا حام الزائر حول الرابط أو إذا زاره. في هذه الحالة كل ما عليك القيام به هو الإمتناع عن وضع تصميم خاص لدالة hover و visited أو جعل تصميمهم يساوي تصميم الرابط الذاته. سنفترض في هذا المقال أن التصاميم الثلاثة مختلفة وأنك تريد شكلاً مغايراً للرابط حين يحوم الزائر بالفأرة عليه وحين يزوره. 

للقيام بذلك أول شيئ عليك تحديده هوالأمر الرئيسي (class) الذي تريد أن تغيّر أو تصمم روابطه. هل هي روابط محتوى النص مثلاً؟ ما هي دالة النص في القالب الذي تستخدمه؟ هل هي entry أم  content أم post أم ماذا؟ هل تريد تغيير عرض روابط menu مثلاً؟ أم روابط القائمة الجانية sidebar؟

سأصنع من أجل التوضيح مثال مصطنع. لنفترض أن الأمر إسمه linkex. في هذه الحالة علينا تعريف روابط هذا الأمر داخل ملف style.css. لنفترض كذلك أن الروابط في القالب الذي تستخدمه هي سوداء غامقة وتحتها خط. لنصنع تصميم للروابط في حال حام الزائر بالفأرة عليها أو زارها بإستخدام الكود التالي:

.linkex a:link {color:#000000;font-weight:bold;text-decoration:underline;}
.linkex a:visited {color: #ff0000;border-bottom: 1px dotted #808080; font-weight:normal;}
.linkex a:hover {text-decoration:none; font-weight:bold;color:#003366; background:#dadada; border-bottom:none;}

أنظر الآن الى أمثلة الروابط التالية. حوم حولها وزرها ولاحظ التغيّرات.

كما تشاهد هناك ثلاثة تصاميم. واحد للرابط وهو ساكن (a:link). واحد حين تحوم حوله (a:hover) وواحد بعد أن تزوره (a:visited). بالطبع هذا التصميم يعمل فقط لكل ما يندرج تحت الأمر المصطنع linkex. وعليه، يمكنك ليس فقط أن تضع هذه الخصائص في المكان المناسب قي تصميمك ولكن يمكنك أيضاً أن تصنع بنفسك أوامر خاصة تكون روابطها ذات تصميم مختلف كما صنعت أنا هنا. 

جرّب ذلك بإستخدام ألوان وخلفيات مختلفة وشاهد بنفسك التأثير على تصميم مدونتك. بالتوفيق… وأرجو أن لا تتردد في السؤال إذا إحتجت أي مساعدة.