אפקט רקע מופיע לפי שורה לקישורים בסטייל

get_the_title

את האפקט הבא בנינו עבור דף הבית שלנו ומתאים במיוחד למצבים בהם יש לכם קישורים בני שתי שורות או יותר. מדובר על אפקט מדליק עם המון סטייל שמציג את הרקע בצורה מדורגת ועל פי שורה – אני אהבתי! הרעיון הוא שבעת ריחוף מעל קישור (עדיף קישור בן כמה שורות) יופיע רקע בצורה מדורגת מצד ימין לצד שמאל לפי סדר השורות.

100% אפקט Css

אז מה אנחנו צריכים כדי להחיל את האפקט הזה על קישורים נבחרים? כלום! רק טיפ-טיפה קוד CSS קצר וקל משקל ונתחדשה לנו עם אפקט מדליק וייחודי.

  • אהבתם? שתפו!

דיבורים דיבורים – יש דוגמה?

בהחלט! הנה דוגמה אשר יצרתי בJSFIDDLE וכוללת דוגמה פועלת של האפקט עם קוד הCSS הנדרש כדי ליצור את האפקט. אפשר להעתיק ולהדביק אם אתם יודעים מה אתם עושים או לקרוא את ההסברים בהמשך המדריך.

קוד HTML לדוגמה

<a href="#" class="linkfx5">קישור ארוך לדוגמה - בתקווה בן 2 שורות</a>

קוד CSS לדוגמה

a.linkfx5 {background-size: 200.22% auto;-webkit-background-size: 200.22% auto;-moz-background-size: 200.22% auto; background-position: -0% 0; background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, #ddd 50%); transition: background-position 0.5s ease-out; -webkit-transition: background-position 0.5s ease-out; position: relative; z-index: 2; text-decoration: none;}
a.linkfx5:hover {background-position: -99.99% 0;}

אפקט מדליק וקל ליישום

אפקט מאוד נחמד אשר מאוד קל ליישם באתר שלכם. לפני איזה שבועיים הבעלים של אתר חדש שבנינו אמר לי – אני אוהב שהאתר מגיע לתנועת העבר – ואני מסכים! אפקטים קטנים יכולים לעשות הבדל גדול שאינטראקציה עם הגולש המבקר באתר שלכם.

מקווה שאהבתם, ניתן למצוא המון מדריכים דומים בקטגוריה מדריכים לבוני אתרים. אז נתראה שם. בברכה, שגיב SEO.

  • אהבתם? שתפו!