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

Mega Dropdown Menu

Səhifələrinizi kodlayarkən istifadə etmək üçün çox vaxt hazır menular axtarırsınız yəqin ki. Paylaşacağım menu CSSJS ilə hazırlanmış mega dropdown menu nümunəsidir. Çox məqsədli menu kimi birçox səhifələrdə istifadəyə uyğundur. Ən əsası pulsuz nümunədir :).  Ancaq pul qazanmaq üçün hazırladığınız saytlarda istifadə etmək üçün EXTENDED LICENSE almalısınız. Əks halda nümunə sahibinin sizin haqqınızda şikayet etmə hüququ var.

Nümunəyə gəldikdə isə paylaşacağım səhifədə nümunəni necə istifadə edəcəyiniz və nümunənin hazır versiyası mövcuddur.

Nümunəni endirmək və demo versiyasına baxmaq üçün buraya klikləyin.

 

jQuery və CSS ilə rəy sistemi – Testimonials Carousel

client-testimonials-carousel-featured
Xüsusilə xidmət satan web səhifələrinin çox istifadə etdiyi müşətri rəylərini göstərən maraqlı bir tətbiqi paylaşmaq istəyirəm. Hazır tətbiq CSS və JQuery ilə hazırlanıb.

Tətbiqin hazır versiyasına buaradan baxa bilərsiniz.

Tətbiqi endirmək üçün buraya daxil olaraq download düyməsini sıxın.

Onu da qeyd edim ki, tətbiq eyni zamanda mobil cihazlar üçün də nəzərdə tutulub. Yəni responsive olaraq hazırlanıb.

Səhifəni üfüqi hərəkət etdirmək – Scroll Page Horizontally

Səhifəni aşağı-yuxarı (şaquli istiqamətdə) doğru hərəkət etdirmək üçün hər hansı əlavə bir kod yazmağa ehtiyac olmadığını bilirik. Səhifəmizdəki məlumatlar nə qədər çox olarsa səhifəmiz sağ tərəfdəki scroll çubuğu ilə aşağı-yuxarı doğru hərəkət etdirilir.

Əslində səhifənin sağa-sola (üfüqi istiqamətdə) hərəkəti üçün də əlavə hər hansı koda ehtiyac yoxdur. Bu tamamilə səhifənin genişliyi ilə əlaqədardır. Genişlik istifadə etdiyimiz kompyuterin çözünürlüyü (resulation – motirodakı pixel sayı) ilə əlaqəlidir. Adətən səhifələrin genişliyini sağdan və soldan boşluqlarla kodlaşdırırıq ki istifadəçi əziyyət çəkməsin. Müasir frameworklərdə isə artıq bunu avtomatik tətbiq etmək mümükündür. Yəni səhifələrin hər istifadəçinin minotoruna uyğun şəkildə göstərilməsi artıq mümkündür.

 
Ancaq bəzi xüsusi səhifələr var ki onlarda standart qaydalara əməl etmək əvəzinə bəzi qeyri adi dizaynlara üstünlük verilir. Bu yazımda paylaşacağım kodlar da belə istifadə üçün nəzərdə tutulub. Belə ki, səhifəmizdəki mətnlərin aşağı doğru deyil avtomatik olaraq sağa doğru davam etməsini və mouse`un diyircəyi ilə səhifəni sağa sola doğru hərəkət etdirməyi göstərməyə çalışacam.

Əvvəla yeni bir səhifə hazırlamalıyıq. Bunun üçün səhifəmizdə aşağıdaki kodlar yer almalıdır:

Boş səhifəmizi hazırladıqdan sonra səhifəmizə istifadə edəcəyimiz javascript kitabxanalarını əlavə etməliyik. Bunun üçün biz jquery kitabxanasını və səhifəni üfüqi istiqamətdə hərəkət etdirmək üçün jquery.mousewheel kitabxanasını əlavə edəcəyik. Bu kitabxanaları səhifəmizdə head etiketləri içərisinə daxil etməliyik. Kodlar aşağıdaki şəkildə olacaq:

Jquery kitabxanalarını əlavə etdikdən sonra səhifəmizə məlumatlarımızı əlavə edək. Məlumatları əlavə edərkən xüsusi formadan istifadə edəcəyik. Belə ki, məlumatlarımız page-wrap id`li div içərisində post sinifi onun içərisində də h2 etiketi ilə başlıq və p etiketi ilə mətn şəklində daxil edilməlidir. Bunun səbəbi isə bir sonraki addımlarda açıqlanacaq. Məlumatımız aşağıdaki formada body etiketləri arasına əlavə edilməlidir:

Məlumatlarımızı bu formada bir neçə dəfə əlavə etməliyik ki, səhifədə məlumat çox görünsün ki, sağa sola doğru hərəkət əmələ gəlsin.
Bu şəkildə məlumatlarımızı əlavə etdikdən sonra post sinifi içərisindəki məlumatlara bir genişlik vermək lazımdır. Bu genişliyi verməkdə məqsəd isə səhifənin sağa doğru genişlənməsini istəməyimizdir. Ancaq səhifməzi sağa doğru genişləndiyi zaman səhifəmizin alt hissəsində scroll çubuğu əmələ gələcək. Bu da xoş bir görüntü olmayacaq. Ona görə də body bölməsində css kodlarından istifadə edərək scroll çubuğunu görünməz etməliyik. Bunu da overflow-x kodu ilə edə bilərik. Nəticədə kodlarımız aşağıdaki şəkildə olacaq:

Bu stil kodlarını səhifəmizdə head etiketi arasına daxil etməliyik.
 

İndi isə yuxarıda əlavə etdiyimiz məlumatları avtomatik olaraq javascript kodları ilə cədvəl şəklində göstərməliyik. Yəni post-wrap id`li div`imiz cədvəl, post sinifi`miz isə cədvəldəki sütunlar olmalıdır. Hansı ki yuxarıda css kodları ilə genişliyini 500px dəyərində qeyd etmişdik. Nəticədə cədvəlin sütunları sağa doğru genişlənəcək və məlumatlar səhifənin altına yox sağına doğru genişlənəcək. Bunun üçün aşağıdaki kodları səhifəmizə əlavə etdiyimiz jquery kitabxanalarından sonra əlavə etməliyik:

NƏTİCƏ:

Nəticəni ayrı səhifədə buradan yoxlaya bilərsiniz.

Tətbiqi buradan endirim incələyə bilərsiniz.

Qaynaq: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

CSS ilə laylı kağız texnikası

Veb səhifələr hazırlayarkən CSS mütləq istifadə edirik. Səhifələrimizdə bəzi bölmələri istifadəçiyə gözəl göstərmək üçün grafikalardan istifadə etmək də gözəl bir yol ola bilər. Ancaq artıq CSS ilə o qədər çox şeylər etmək mümkündür ki, düşünürəm grafikadan istifadə etmək yerinə elə CSS texnikasını istifadə etmək daha gözəl olardı.
 
Bu yazımda CSS ilə laylı kağız texnikasını necə edə biləcəyimizi göstərməyə çalışacam.
 
Bunun üçün HTML və CSS dillərindən istifadə edəcəm.
 
Əvvəla HTML səhifəmizdə aşağıdaki kodları yazmağımız lazım gələcək:

Ardından CSS kodlarımzı yazmalıyıq. İstəsəniz CSS kodlarını əlavə css faylında yaza bilərsiniz. Mən burada HTML səhifəmizin daxilində yazmağa çalışacam:

Bu qədər :) Hər hansı grafika vəya əlavə koda ehtiyac qalmadan sadə bir şəkildə səhifələrinizdə bu kodları istifadə edə bilərsiniz.

Tətbiqin hazır versiyasına baxmaq üçün bu keçiddən istifadə edin.
 


 
p.s : bəzi tətbiqlər türk dilində hazırladığım dərslərin tərcümələri olduğu üçün hazır versiyaları türk dilində göstərilməkdədir.
 
Qaynaq: Layered paper effect using CSS3 box shadows