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

Warning: Use of undefined constant get_the_title - assumed 'get_the_title' (this will throw an Error in a future version of PHP) in /home/customer/www/sagive.co.il/public_html/wp-content/themes/sagive/functions/misc-functions.php on line 305

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

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.