 Превод. Оригиналът е на Дани Гуо: Animated Multiline Link Underlines with CSS Едно от предимствата, че създавам своя личен уебсайт от нулата, вместо да използван готова тема, е в това, че започвам с настройките на браузъра по подразбиране, след което постепенно добавям своите елементи. Старая се сайтът да не са раздува, но от друга страна, персонализацията е важна. Трябва да се намери някакъв компромис между спартанските страници на Hacker News и Craigslist от една страна, и от друга – с претоварения предишен MySpace. Преди време попаднах на уебсайт с интересно анимирано подчертаване на линковете и реших да направя същия ефект. Само че за мен е много важно всичко да стане на чист CSS, понеже заради подобни, може да се каже лекомислени неща, да се използва JavaScript, означава да се появят проблеми с производителността и с удобството на интерфейса. Ето как изглежда самият ефект: 
РеализациятаАнимирането на линии под текста се оказа сложна тема. Всичко зависи от това, доколко далече сте готови да се отдалечите от стандарта и на кои детайли обръщате повече внимание – например линията да преминава през някои елементи на буквите. Започнах с прилагането на два подхода. И двата премахват стандартния text-decoration и с помощта на псевдоелементи добавят имитация на граница. След това тази граница се анимира чрез CSS преходи. Но тези решения имат сериозен недостатък: те не работят нормално, ако линкът заема повече от един ред. Подчертава се само първия ред: 
Накрая открих CodePen на Shaw, който няма подобен недостатък и промених ефектите, както на мен ми допада: 
Ето го и сорс кода. Всеки може да си поиграе с него на repl.it. a {
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .3s;
}
a:hover {
background-size: 100% 2px;
} Да се спрем по-подробно на това решение.Първо, изключваме свойството text-decoration. Налага се да използваме фоново изображение, понеже то е в състояние да покрие няколко реда. По принцип може да се вземе реално изображение, но тук става дума само за една линия и е удобно да се използва линейния градиент, който ще генерира необходимото изображение. Той обикновено се използва за създаването на преливащ градиент между два цвята, но на нас ни се налага подчертаването да е със същия цвят, какъвто е цветът на линка. Ето защо използваме currentColor както за началото, така и за края на градиента. А currentColor указва на браузъра да използва съответния цвят на елемента от свойството color. Използваме background-position за поставяне на изображението в долния ляв ъгъл. Тук значението 0% съответства на хоризонтално положение, а 100% – на вертикално. Изключваме background-repeat, за да предотвратим създаването на няколко екземпляра на изображението. С помощта на background-size указваме нулева ширина и височина два пиксела. Нулевата широчина означава, че подчертаването ще се появи точно, когато курсорът попадне върху линка. В противен случай, нищо не трябва да се вижда. Избираме transition според размера на фона по такъв начин, че всяка промяна в свойството да отнеме 0,3 секунди. При попадане на курсора върху линка сменяме ширината на изображението до 100%, създавайки пълно подчертаване, а transition осигурява анимацията. Това е всичко! Доволен съм от лаконичността на кода. Ако искате да добавите и в своя сайт нещо подобно, спокойно можете да използвате този код или да си харесате нещо от другите анимирани ефекти за подчертаване на текст. |
