Css Ümumi

CSS3 ilə arxa plan rənginin hərəkətli keçidi

Bu yazımda müasir veb səhifələrdə gördüyünüz menyuların üzərinə gəldikdə arxa fonunun sağdan sola, soldan sağa, aşağıdan yuxarı vəya tərsinə hərəkətli keçidini necə edə biləcəyinizi göstərmək istəyirəm:

Əvvəla səhifəmizə bir düymə əlavə edək:

İndi isə əlavə etdiyimiz düyməni css ilə rəngləndirək və əsas kodlarımızı yazaq:

Kodları açıqlayaq. Deməli əvvəla .duyme sinifini yaratdıq və düyməyə kənarlıq verdik. Arxa fonunu (background:none;) rəngsiz, mövqeyini nisbi (position:relative;) seçdik. Çünki bir sonrakı addımda mövqeyi mütləq edəcəyik və bunun üçün də əvvəlki mövqe nisbi olmalıdır. Transition: color 0.25s ease; kodları isə düymənin üzərinə gəldikdə yazı rənginin keçidli şəkildə dəyişməsi üçündür.

Sonrakı addımda .duyme::after kodları ilə arxa fonumuzu yaratdıq. Burada önəmli olan position:absolute; dəyərinin verilməsi, daha sonra genişliyin sıfır dəyərində saxlanılmasıdır. Hərəkətin keçidli şəkildə olması üçün isə yenə də transition:width 0.25s ease; kodlarından istifadə etdik. Diqqət etsəniz görərsiniz ki yuxarıda transition kodunda color`dan istifadə etmişdik çünki dəyişəcək dəyər rəng idi. İndi isə transition kodunda width istifadə etdik çünki genişliyimiz sıfırdan 100 faize doğru dəyişəcək və nəticədə hərəkətli keçid alınacaq.

Hərəkətli keçidin alınması üçün son addım ise .duyme:hover::after kodunuz yazmaqdır. Bu kodun mənası belədir ki, .duyme sinifinin üzərinə gəldikdə .duyme::after sinifində aşağıdaki (width:100%) dəyişiklikləri et.

Ümid edirəm başa sala bildim. :)

Əlavə olaraq qeyd edim ki, kodlarda .duyme::after bölməsində left:0; yerinə right:0; istifadə etsək arxa fon rəngi soldan sağa yox, sağdan sola dəyişəcəkdir.

Buyurun bu da nəticə.

Müəllif haqqında: Anar SAMADOV

Bilgi paylaşdıqca çoxalır deyərək paylaşmağa çalışıram bildiklərimi, öyrəndiklərimi və xoşuma gələnləri :)

Şərh yaz