Анимация за подчертаване на препратките на чист CSS
Превод. Оригиналът е на Дани Гуо: 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 обезпечава анимацията.
Това е всичко! Доволен съм от лаконичността на кода. Ако желаете да добавите и в своя уебсайт нещо сходно, умерено можете да употребявате този код или да си харесате нещо от другите анимирани резултати за наблягане на текст.
Едно от преимуществата, че сътворявам своя персонален уеб страница от нулата, вместо да употребен подготвена тематика, е в това, че стартирам с настройките на браузъра по дифолт, след което последователно прибавям своите детайли. Старая се уеб сайтът да не са раздува, само че въпреки това, персонализацията е значима. Трябва да се откри някакъв компромис сред спартанските страници на Hacker News и Craigslist от една страна, и от друга – с претрупания предходен MySpace.
Преди време попаднах на уеб страница с забавно анимирано наблягане на линковете и взех решение да направя същия резултат. Само че за мен е доста значимо всичко да стане на чист CSS, тъй като поради сходни, може да се каже лекомислени неща, да се употребява JavaScript, значи да се появят проблеми с продуктивността и с удобството на интерфейса.
Ето по какъв начин наподобява самият резултат:
Реализацията
Анимирането на линии под текста се оказа комплицирана тематика. Всичко зависи от това, до каква степен надалеч сте подготвени да се отдалечите от стандарта и на кои елементи обръщате повече внимание – да вземем за пример линията да минава през някои детайли на буквите.
Започнах с използването на два метода. И двата отстраняват общоприетия text-decoration и благодарение на псевдоелементи прибавят реплика на граница. След това тази граница се анимира посредством CSS преходи. Но тези решения имат сериозен минус: те не работят обикновено, в случай че линкът заема повече от един ред. Подчертава се единствено първия ред:
Накрая открих CodePen на Shaw, който няма сходен минус и трансформирах резултатите, както на мен ми подхожда:
Ето го и сорс кода. Всеки може да си поиграе с него на repl.it.
Да се спрем по-подробно на това решение.
Първо, изключваме свойството text-decoration.
Налага се да използваме фоново изображение, тъй като то е в положение да покрие няколко реда. По принцип може да се вземе действително изображение, само че тук става дума единствено за една линия и е комфортно да се употребява линейния градиент, който ще генерира нужното изображение. Той нормално се употребява за основаването на преливащ градиент сред два цвята, само че на нас ни се постанова подчертаването да е със същия цвят, какъвто е цветът на линка. Ето за какво използваме currentColor както за началото, по този начин и за края на градиента. А currentColor указва на браузъра да употребява съответния цвят на детайла от свойството color.
Използваме background-position за слагане на изображението в долния ляв ъгъл. Тук смисъла 0% подхожда на хоризонтално състояние, а 100% – на отвесно.
Изключваме background-repeat, с цел да предотвратим основаването на няколко екземпляра на изображението.
С помощта на background-size указваме нулева широчина и височина два пиксела. Нулевата ширина значи, че подчертаването ще се появи тъкмо, когато курсорът попадне върху линка. В противоположен случай, нищо не би трябвало да се вижда.
Избираме transition съгласно размера на фона по подобен метод, че всяка смяна в свойството да отнеме 0,3 секунди.
При попадане на курсора върху линка сменяме ширината на изображението до 100%, създавайки цялостно наблягане, а transition обезпечава анимацията.
Това е всичко! Доволен съм от лаконичността на кода. Ако желаете да добавите и в своя уебсайт нещо сходно, умерено можете да употребявате този код или да си харесате нещо от другите анимирани резултати за наблягане на текст.
Източник: kaldata.com
КОМЕНТАРИ