كيفية إنشاء رابط مع صورة التمرير في CSS عادي

المادة التي كتبها:
  • تصميم الموقع
  • تحديث: Aug 02 و 2013

ما هو تحوم؟ التعريف مقتبس من UWStout.edu:

"التحويم" هو تأثير يحدث عندما تضع المؤشر فوق رابط من أي نوع. يمكن ترميز الرابط للرد على التحويم عن طريق تغيير اللون أو إظهار رسم جديد أو حتى تشغيل ملف صوتي.

يعمل تأثير التحويم على تحسين إمكانية استخدام الويب ويساعد مالكي الويب على توجيه عمليات نقل الويب الخاصة بهم. عندما ترغب في أن يولي مستخدمو الويب اهتمامًا خاصًا لرابط خاص ، فإن طريقة جيدة للقيام بذلك هي إنشاء رابط ذي تأثير تحوم جذاب. تأثير تحوم بسيط مثل (تسطير بسيط وتغيير لون النص) يشير إلى أن النص "قادر على النقر" ويحسن تفاعلات الويب. ومع ذلك ، فإن تغيير لون النص وأنماطه (تسطير / خط زائد / غامق) يعد أساسيات للغاية وهناك الكثير الذي يمكن القيام به باستخدام التحويم.

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

مثال 1: رابط مع زر التحويم

أولاً ، نظرة على مثال العمل (ضع الماوس فوق الرابط لترى كيف يعمل - تغيير الرمز في الجانب).

مثال 1 - رابط مع صورة زر التمرير

هذه هي النسخة المكتملة لما سيتم بناؤه في هذا المثال.

كيف ننشئه في CSS عادي؟

صورة الزر

الخطوة 1 ، كما ترى ، نحتاج إلى رموز أسهم في نسختين مختلفتين. في المثال الخاص بنا ، استخدمت الأحمر (#CC3300) كزر الارتباط الافتراضي؛ والرمادي (#333333) لتأثير التمرير. يمكن بسهولة صنع هذا الزر باستخدام أي برنامج لتحرير الصور.

لدينا الآن زر اللون الأحمر (على سبيل المثال ، b1.png) ولون ريي (زر يقول ، b2.png). قم بدمج هذين الملفين في ملف صورة واحد مع b1.png أعلى b2.png. ستكون هذه الصورة النهائية للرابط. قم بتسمية ذلك (قل ، x.png) وقم بتحميل الموقع المطلوب (بالنسبة لحالتي ، قمت بوضعه في مجلد قالب WP الخاص بي).

للرجوع اليها:

b1.png ، b2.png و x.png

رمز CSS

المقبل ، على رمز CSS. بشكل أساسي ، ما نريد تحقيقه هو وضع مسافة بادئة على نص الرابط قليلاً إلى اليمين لتوفير مساحة للزر ؛ وفي الوقت نفسه ، عرض صورة مختلفة عندما يكون الرابط في حالة التمرير. هذه هي المواد الأساسية جميلة إلا أننا بحاجة إلى تطور قليلا على موقف الخلفية. الحيلة هي إظهار الجزء العلوي من الصورة (الزر الأحمر) للارتباط الأصلي. وعندما تحوم ، قم بتزييف صورة الخلفية باستخدام -11px (قد يختلف على موقع الويب الخاص بك) الهامش لإظهار الزر الرمادي.

.xa {color: #cc3300؛ padding-left: 14px؛ font-weight: bold؛ background-image: url (images / x.png)؛ وضع الخلفية: 0 2px؛ تكرار الخلفية: لا تكرار ؛ }
.xa: hover {color: #333333؛ padding-left: 14px؛ font-weight: bold؛ background-image: url (images / x.png)؛ وضع الخلفية: 0 -11px؛ تكرار الخلفية: لا تكرار ؛ }

تطبيق

لإظهار تأثير التحويم هذا ، قم ببساطة بإدراج الفئة x في المنطقة المحددة. إليك مثال على كيفية القيام بذلك.

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> الصفحة الرئيسية </a> </ p>

مثال 2: رابط في خلفية التمرير

مع نفس المفهوم ، هناك طرق لا نهاية لها يمكنك من خلالها جعل الروابط تبدو باردة. إليك مثال آخر على ما يمكننا القيام به مع تأثيرات التحويم بطريقة مختلفة قليلاً. مرة أخرى ، إلقاء نظرة على النسخة النهائية.

مثال 2 - رابط في خلفية التمرير

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

كيف ننشئه في CSS عادي؟

صور الخلفية

أولاً ، قم بإنشاء صورتين لمستطيل دائري. لأغراض العرض التوضيحي ، لن ندمج هاتين الصورتين في هذا المثال. سنقوم بتسمية المستطيل الأحمر (#CC3300) باسم b1.png؛ ومستطيل المارون (#9F2800) كـ b2.png.

رمز CSS

بعد ذلك ، إليك رموز ورقة الأنماط الخاصة بك (نقوم بتسمية الفئة "ص" في هذا المثال الثاني).

ay {width: 280px؛ الارتفاع: 42px؛ اللون: #000000. الحشو: 10px؛ النص الديكور: لا شيء؛ العرض محجوب؛ font-weight: bold؛ background-image: url (images / b1.png)؛ تكرار الخلفية: لا تكرار ؛ }
ay: hover {width: 280px؛ الارتفاع: 42px؛ اللون: #FFFFFF؛ الحشو: 10px؛ font-weight: bold؛ النص الديكور: لا شيء؛ العرض محجوب؛ background-image: url (images / b2.png)؛ تكرار الخلفية: لا تكرار ؛ }

تطبيق

لعرض الارتباط ، أدرج الفئة (y) في علامة <a href> في شفرة المصدر الخاصة بك. مثال:

<a href="http://www.webhostingsecretrevealed.com" class="y"> الصفحة الرئيسية </a>

اختتام

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

المزيد من دروس CSS

إذا أعجبك هذا المنشور ، فتأكد أيضًا من التحقق كيفية الاستفادة من الرسوم المتحركة لـ CSS 3, يجب قراءة CSS 3 Tutorials 2012، طالما اجعل موقعك رائعًا باستخدام تقنيات CSS 3 هذه.

عن جيري لو

مؤسس WebHostingSecretReveals.net (WHSR) - مراجعة استضافة موثوق بها ويستخدمها مستخدمو 100,000. خبرة تزيد عن 15 في مجال استضافة المواقع والتسويق التابع لها وكبار المسئولين الاقتصاديين. مساهم في ProBlogger.net ، Business.com ، SocialMediaToday.com ، وأكثر من ذلك.