צור מדגיש זוהרים עבור קישורי אינטרנט

אתה יודע מה אומרים ... העיצוב נמצא בפרטים. כאשר אתה מעצב אתר, יש הזדמנויות בשפע להתמקד בפרטים הקטנים כדי לשפר את חוויית חזותית. במדריך זה, אנו נראה לך כיצד ליצור קשר עם מדגיש כי "הזוהר".

1. Photoshopping הזוהר: Animated GIF

לפתוח מסמך פוטושופ חדש. להפוך אותו 1px גובה. מבחינה טכנית, נוכל לעשות את זה עם המסמך רק 1px רחב מדי, אבל כדי שיהיה קל יותר לראות את מה שאנחנו עושים, דוגמה זו 15px רחב. קרב כך שתוכל לראות טוב יותר, לפתוח את החלון> לוח אנימציה.

אזור למלא את המסמך עם צבע זוהר הרצוי, הייתי אדום עמוק כאן. גם לוודא את השכבה הוא פתח בחלון> שכבות הצבעים. אם היא נעולה, פשוט לחץ פעמיים כדי לפתוח. כעת לחץ על החץ עבור שכבה 1 בלוח הצבעים אנימציה לחץ על סטופר קטן ליד אטימות.

עכשיו גרור את החץ הכחול בחלק העליון של לוח אנימציה קדימה דרכים. לא רחוק מדי ... ככל שאתה מושך את זה לאט הזוהר שלך. אתה יכול להתנסות עם העיתוי. עם המצביע על ציר הזמן עכשיו קדימה דרכים, להתאים את אטימות השכבה שלך בלוח שכבות עד אפס (0). את צריכה לראות יהלום חדש מופיע ציר הזמן להראות לך את אטימות השתנה. בין שני היהלומים הללו עכשיו, כי שכבת באופן אוטומטי "tween" בין אלה opacities שני, יצירת מעבר הדרגתי בין 100 ל 0% שקיפות.

עכשיו להזיז את המצביע ציר הזמן קדימה שוב את אותו amound שעשית קודם, ולהתאים את אטימות לאחור עד 100. זהו זה! כעת יש לך הנפשה כי תימוג-החוצה נמוגים-בשורה זו קטנטונת.

עכשיו "שמור עבור Web & Devices" (תחת תפריט קובץ). הקפד לבחור את האפשרויות של GIF (זה רק בפורמט גרפי התומך אנימציה). בפינה הימנית התחתונה, לוודא לבחור "Forever" כאפשרות Looping.

שמור את הקובץ בתור "זוהר-underline.gif" בתיקיית התמונות של מדריך של פרויקט האינטרנט שלך.

הנה התוצר הסופי:

2. סימון

למען הדרכה, אנחנו מתכוונים להחיל שיעורי ייחודי עבור זוהר הקישורים שלנו-Y. הנה פיסקה לדוגמה עם הקישורים זה:

<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. את ה-CSS

עבור הזוהר "שלנו" הכיתה, אנחנו מיישמים את זכות תמונת רקע לכיתה, כדי לוודא את זה מיישרת לתחתית וחוזר לאורך ציר x. בגלל אלמנטים עוגן אלמנטים בתוך השורה, זה יעבוד גם אם הקישור מעברי פני שורות מרובות, וזה נהדר.

עבור הזוהר "שלנו לרחף" בכיתה, אנחנו רק להחיל את תמונת הרקע על פסאודו: לרחף ברמה (אבל האופנה בדיוק), אשר רק ביצוע קו תחתון זוהר להופיע כאשר הקישורים היא להיות ריחף מעל.

 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; } 

דוגמה

לדוגמה חי מהירה כדי לראות את הקישורים הללו בפעולה, לחץ כאן.