Search

עיצוב anchor tags לפי סוג הקישור

קוד זה מכוון לשיפור חווית המשתמש. לא מעט פעמים אנו נתקלים במצב בו אנו לוחצים על קישורים אשר איננו יודעים לאן הם מובילים. קוד זה יכול לשפר את חווית המשתמש על ידי הוספת אייקונים קטנים ליד הקישור ולהראות לגולש כי זהו לינק חיצוני – אימייל / קובץ pdf / תמונה וכו׳…

/* external links */
a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}
 
/* emails */
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}
 
/* pdfs */
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}
מצאתם טעות בקוד? הסניפט לא עובד לכם? רישמו לי בתגובות ואני מבטיח לטפל בכך במהרה ולספק סניפט תקין...
0 תגובות...

תגובה חדשה

Up!
לבלוג