Təmiz CSS-də linklərin altından xətt çəkmə animasiyası

Təmiz CSS-də linklərin altından xətt çəkmə animasiyası

Code-News
18.02.2019 PAYLAŞIM
TECHNOTE @technote TECHNOTE logo icon

Bənzər xəbər


#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.


Sonunda mən Shaw-un CodePen-ini tapdım və bu nöqsanın həll yolu tapılmış oldu.

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.

Qeyd: Şərhlərdə nalayiq ifadələr işlətmək, reklam xarakterli mətn paylaşmaq qadağandır.

Şərh yoxdur

Şərh yazmaq üçün daxil olun


DAHA ÇOX


2020-ci ildə məlumatların vizualizasiyası üçün aktual olacaq Top-8 JavaScript ki..

JavaScript-də məlumatları daha gözəl şəkildə təqdim etmək lazımdır?


Microsoft bu il olmuş qeyri adi fişinq kiberhücumlarından danışdı

Bir neçə müddət bundan öncə isə Microsoft şirkəti kiberhücumlar və malware-lar üzrə trendləri əks et..


Microsoft Windows-da 0-day boşluğu da daxil olmaqla 7 kritik sistem boşluğu arad..

Microsoft şirkəti bu ay təqdim etmiş olduğu yenilənmələr ilə öz sistemlərində 36 boşluğu aradan qald..


Microsoft Teams platformasının Linux versiyası təqdim edildi

Microsoft şirkəti Microsoft Teams platformasının Linux versiyasını təqdim edib.


OpenBSD-də 4 ciddi sistem boşluğu aşkar edilib

OpenBSD-də 4 ciddi sistem boşluğu aşkar edilərək aradan qaldrılıb.


Sadə tətbiqlərin müxtəlif proqramlaşdırma dillərindəki test nəticələri təqdim ed..

Assembler x86_64-də HeavyThing adlı azad kitabxananı reallaşdırmış müəllif Jeff Marrison “Assembler-..

×