Təmiz CSS-də linklərin altından xətt çəkmə animasiyası
Digər
Code-News
18.02.2019
Farid Pardashunas
#Step IT Academy tərəfindən təqdim olunur
Personal saytımın yaradılmasında hazır məzmundan istifadə etmək əvəzinə onu sıfırdan yaratmağımın əsas üstünlüyü ondadır ki, mən brauzerin təmzimləmərdən başlayıb getdikcə öz dizayn effektlərimi əlavə edirəm. Mən saytın şişməsindən qaçıram, lakin personalizasiya - vacib işdir. Bir tərəfdən spartavari Hacker News saytları ilə Craigslist arasındaki kompromisi tapmaq, digər tərəfdən də köhnə MySpace kimi dəhşət yüklü olmasından uzaq olmaq lazımdır.
Necəsə bir dəfə qarşıma maraqlı dizayn effekti olan bir sayt çıxdı. Linklərin üzərinə mouse-u yaxınlaşdırdıqda altdan xətt animasiya formasında çıxırdı və mən bunu öz saytımda da reallaşdırmaq istədim. Amma mənə bu effekt təmiz CSS-də lazım idi, çünki belə xırda işlər üçün JavaScript-i yüklü edib və sonra mümkünü performans xətaları ilə üzləşmək istəmirəm.
Bu effekt belə görsənir:
Reallaşdırma
Mətnin altında xətlər çəkmək sən demə o qədər də asan iş deyilmiş. Məsələ sizin standartdan nə qədər kənara çıxmağa hazır olmanızdan asılıdır.
Mən iki yanaşma üzərində düşündüm. İkisi də əslində text-decorationdan imtina edib psevdoelementlərə sərhəd əlavə etmək sayəsində bunu reallaşdırırlar. Sonra isə bu sərhəd CSS keçidləri vasitəsi ilə animasiya halına gəlir. Təəssüf ki, bu həllərin bir mənfi cəhəti var. Onlar, link bir sətrdən daha çox olduqda düzgün işləmirlər. Xətt yalnız birinci sətrdə yaranır.
Bu da kod
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; }
Gəlin bu həlli xırdalayaq.
Öncə standart text-decoration effektini söndürürük.
İndi isə bizə fon şəkli lazım olacaq, çünki o, bir neçə sətri əhatə edə bilər. Əslində real şəkil də götürmək olar amma söhbət cəmi bir xətdən gedir, ona görə də linear-gradient işimizə yarayır. Adətən onu iki rəng arasında istifadə edirlər, lakin bizə xəttin link ilə eyni rəngdə olması lazımdır ona görə də currentColor-dan istifadə edəcəyik.
Background-positiondan istifadə edərək şəkli sol aşağı küncə yerləşdiririk. 0% horizontal üçün, 100% isə vertikal yerləşmə üçün təyin olunur.
Background-repeat efektini söndürürük.
Background-size ilə sıfır en və 2 px hündürlük təyin edirik. Ensiz olmasını ona görə edirik ki, xətt yalnız mouse ilə linkin üzərinə gəldikdə yaransın.
Fon ölçüləri ilə əlaqəli transition təyin edirik.
Linkin üzərinə gəldikdə şəklin eninini dəyişirik, transition isə bizə animasiya qazandırır.
Hazırdır! Mən kodun lakonik olması ilə çox razıyam. Əgər saytınıza bənzər effekt əlavə etmək istəyirsinizsə bu realizasiyadan yararlanmaqdan çəkinməyin.
Linki kopyala
Həftənin xəbərləri
"Premium" dizayna malik uyğun qiymətli smartfon: HONOR X8b bizə nələri vəd edir?
Whatsapp yaxın zamanda 2 yeni funksiyanı əldə edəcək