Bawiąc się efektami hover linku
projektant, z którym pracuję, prezentował kompy na ostatnim spotkaniu zespołu. Wykonała wspaniałą pracę, łącząc koncepcję systemu projektowego, od komponentów po wzorce i wszystko pomiędzy, co uszczęśliwiłoby każdego programistę front-end.
ale w jej pracy był malutki szczegół, który wpadł mi w oko: stan hover dla linków był squiggle.
Nie dość, że wcześniej tego nie widziałem, to jeszcze nigdy nie przyszło mi to do głowy. Okazuje się, że istnieje wiele przypadków tego NA ŻYWO, jednym z nich jest zarys. To właśnie ta implementacja zainspirowała projekt.
spoko, domyśliłem się. Możemy zrobić coś takiego jak liniowy gradient tła lub nawet obraz tła. Ale! To nie był koniec projektu. Okazuje się, że jest też animowany. Ponownie, z konspektu:
To dość dzikie. Szczerze mówiąc, nie byłem pewien, jak do tego podejść, ponieważ animowanie któregokolwiek z moich początkowych pomysłów byłoby trudne, szczególnie w przypadku obsługi wielu przeglądarek.
więc jak to zrobił Kontur? Okazuje się, że to SVG. Możemy zrobić squiggly path i animować go dość łatwo:
Zobacz Squiggle pióra Geoffa Grahama (@geoffgraham) na CodePen.
ale jak to działa z linkiem? Cóż, możemy użyć SVG nabackground-image właściwość:
Zobacz Squiggle pióra Geoffa Grahama (@geoffgraham) na CodePen.
ale to trochę gówniane, bo tak naprawdę nie możemy tego animować. Potrzebujemy do tego lepszych wartości. Możemy jednak wstawić CSS bezpośrednio do SVG wbackground-image właściwość. Nie możemy po prostu skopiować i wkleić kodu SVG do właściwości, ale możemy z pewnym odpowiednim kodowaniem:
Zobacz Squiggle pióra Geoffa Grahama (@geoffgraham) na CodePen.
a ponieważ SVG może zawierać własne style w znacznikach, animację można wrzucić tutaj we właściwośćbackground-image, tak samo jak zrobilibyśmy to z CSS w nagłówku dokumentu HTML lub inline CSS w HTML.
Zobacz Pen Squiggle autorstwa Geoffa Grahama (@geoffgraham) na CodePen.
możemy wystylizować to trochę inaczej, jeśli chcemy:
zobacz efekt Pen Link autorstwa Geoffa Grahama (@geoffgraham) na CodePen.
to inspirujące!
nie mam pojęcia, czy animowany squiggle daje dobre wrażenia użytkownika i, szczerze mówiąc, nie o to chodzi w tym poście. Chodzi o to, że zarys miał fajny pomysł z sprytną implementacją CSS.
To dało mi do myślenia o innych niestandardowych (może nawet niekonwencjonalnych) stylach hover, które możemy zrobić z linkami. Ponownie, rzucając na bok użyteczność i mieć wielki ol ’ czas z CSS …
Ramka do efektu tła
może ta sama dolna ramka na domyślnym linku może rosnąć i stać się pełnym tłem linku po najechaniu kursorem:
zobacz efekt linku Pen – Background na hover by Geoff Graham (@geoffgraham) on CodePen.
Heck, możemy nawet zrobić coś podobnego poziomo:
zobacz efekt linku Pen – Horizotonal Background autorstwa Geoffa Grahama (@geoffgraham) na CodePen.
efekt zarysowanego tekstu
usuńmy kolor czcionki i zostawmy kontur.
zobacz efekt Pen Link na hover Geoff Graham (@geoffgraham) na CodePen.
efekt podniesionego tekstu
innym pomysłem jest podniesienie tekstu tak, jakby wyrastał ze strony po najechaniu kursorem:
zobacz efekt linku Pen – podniesiony tekst po najechaniu kursorem przez Geoffa Grahama (@geoffgraham) na CodePen.
efekt Font Swapper-oo
To jest tak niepraktyczne, że sprawia, że LOL, ale dlaczego nie:
zobacz efekt Pen Link – Swap font on hover by Geoff Graham (@geoffgraham) on CodePen.
efekt „Turn It Up, Chris”
Sorry, Chris. Wiesz, że to kochasz. ❤ ️
zobacz efekt linku długopisu – Podkręć go, Chris! by Geoff Graham (@geoffgraham) on CodePen.