خلق متوهجة تشدد على وصلات إنترنت

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

1. فوتوشوبينغ الوهج : GIF المتحركة

فتح وثيقة جديدة فوتوشوب. جعله 1px في الارتفاع. من الناحية التقنية ، يمكن أن نفعل هذا مع الوثيقة الوحيدة 1px واسعة جدا ، ولكن لتجعل من السهل أن نرى ما نقوم به ، هذا المثال هو 15px نطاق واسع. تكبير حتى تتمكن من رؤية أفضل ، وفتح نافذة> لوح التحريك.

ملء المستند المنطقة التي تريدها مع توهج اللون ، وأنا استخدم هنا الأحمر العميق. كما تأكد من طبقة غير مؤمن في نافذة> لوحة الطبقات. اذا كان مؤمنا ، مجرد النقر المزدوج لفتح. الآن انقر على السهم لطبقة (1) في لوحة متحركة فوق وساعة توقيت قليلا المقبل الى التعتيم.

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

الآن تحرك المؤشر الزمني قدما مرة أخرى على نفس amound فعلت من قبل ، وضبط غموض يعود ما يصل الى 100. هذا كل شيء! لديك الآن في مجال الرسوم المتحركة التي سيتم الانسحاب التدريجي وتتلاشى في هذا السطر الصغير للغاية.

الآن "حفظ للويب والأجهزة" (في إطار القائمة ملف). تأكد من أن تختار من بين الخيارات جف] (وهذا هو الشكل الوحيد الذي يدعم رسم الرسوم المتحركة). في الحق في الدنيا ، تأكد من اختيار "للأبد" باعتبارها الخيار حلقات.

حفظ الملف إلى أنها "يتوهج underline.gif" في مجلد الصور لدليل المشروع الخاص بك على الشبكة العالمية.

هنا هو المنتج النهائي :

2. والتوصيف

من أجل البرنامج التعليمي ، ونحن ذاهبون لتطبيق دروس فريدة من نوعها لدينا توهج وصلات ذ. هنا هو الفقرة سبيل المثال مع وصلات في ما يلي :

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <a class="glow-hover" href="#">this link underline glows on hover</a> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <a href="#" class="glow">this link glows all the time</a>, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

تلاحظ أن هناك اثنين من وصلات في هذه الفقرة ، مع فئة واحدة من "يتوهج تحوم" واحد مع فئة من "وهج". هذا هو فقط لتوضيح احتمالين مختلفة. وهج - تحوم الطبقة سنجعل من متوهجة نؤكد تظهر فقط عندما يكون الارتباط تدحرجت. الطبقة توهج سيكون لدينا متوهجة نؤكد أن هناك في كل وقت.

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

3. المغلق

لدينا "يتوهج" الطبقة ، ونحن نطبق الخلفية صورة الحق في الحصول على الدرجة ، والتأكد من أنها تنسجم إلى أسفل ، ويكرر على طول محور س. لأن العناصر مرساة عناصر مضمنة ، سيكون هذا العمل حتى لو كان الارتباط فواصل عبر خطوط متعددة ، وهو أمر عظيم.

لدينا "يتوهج تحوم" الطبقة ، ونحن لا تنطبق إلا على صورة خلفية على : الزائفة تحوم من الدرجة (ولكن في نفس الشكل الدقيق) ، والذي لن يؤدي إلا إلى جعل متوهجة تظهر عندما تبرز الروابط يجري حلقت فوق.

 a   { color: #3366cc; text-decoration: none; } .glow   { background: url(images/glow-underline.gif) bottom repeat-x; color: black; } .glow:hover  { color: #3366cc; } .glow-hover:hover { background: url(images/glow-underline.gif) bottom repeat-x; color: black; } 

المثال

على سبيل المثال من أجل العيش سريعة لمعرفة هذه الروابط في العمل ، انقر هنا.