Quantcast
Channel: WebMagazin » css3
Viewing all articles
Browse latest Browse all 2

Tıklamaları Javascript yerine CSS ile işlemek

0
0

Temel olarak sayfanın, ögelerin yerleşimi ve gösterimi için CSS; davranışı için de Javascript kullanıyoruz. Bugün CSS3 ile birlikte kullanabiliyor olduğumuz :checked ve :target gibi pseudo (sözde) elementler ile temel toggle, accordion, tab, lightbox veya tooltip gibi uygulamaları Javascript’e gerek kalmadan oluşturabilmemizin hilelerinden bahsedip, basit bir örnek ile zenginleştireceğiz.

CSSClickEventsGörsel kaynak: http://tympanus.net/codrops/

:checked

Checkbox veya radio butonlarımızın işaretli olup olmadığını anlayabilmek için CSS3 :checked Selector kullanabiliriz.

Mantığın temelini incelersek; web sitenizdeki bir form alanında checkbox işaretlendiyse bu alanın arkaplanını başarılı bir işlem anlamına gelecek yeşile dönüştürebilirsiniz. İşte örnek kod:

input:checked { background: green; }

:checked’ın gücü!

Şimdi bahsedeceğim ipucu ise bu özelliğin ne kadar güçlü olduğu ile ilgili. Çünkü bu özellik ile bir başka elementi de tetikleyebiliyoruz.

Basit bir html oluşturalım:

<input type="checkbox"/> <p>Web Magazin</p>
input[type=checkbox]:checked ~ p {
    color: red;
}
Check out this Pen!

Gördüğünüz gibi eğer checkbox işaretlenirse ‘Web Magazin’ içeriği kırmızı renge dönüşmekte. Fakat şimdi baktığımızda inputu istediğimiz stilde sunmamız için de birçok taklalar atmamız gerekiyor, o zaman biz de hemen inputu stilleyerek daha güzel kullanılabilir hale getirmenin alternatif yoluna bakalım.

:checked’ı stillendirilebilir şekilde kullanmak

Tabii ki de label kullanıyoruz. Konuya biraz daha yabancı olanlar için; input ile label arasında basit bir html bağı (id ve for) kurarak label’a tıklandığında input’un seçilmesini sağlayabiliyoruz.

Solda input varken, sağdaki uzun texte tıkladığınızda hani input işaretleniyor ya, işte bu.

<input type="checkbox" id="button" />
<label for="button">TIKLA</label>
<p>Web Magazin</p>
input[type=checkbox]:checked ~ p {
    color: red;
}
Check out this Pen!

Bir önceki örnekte olduğu gibi :checked özelliğini Web Magazin içeriğinin rengini değiştirmek için kullandık fakat bu sefer input gibi label da tıklanılabilir ve tetikleyici konumda. Bundan sonra yapacağımız ise, input’u gözlerden gizlemek ve label’ımıza istediğimiz stil özelliğini vererek dilediğimiz amaç için kullanmak. Misal: toggle, accordion, tab, lightbox veya tooltip.

:not(:checked) ile de güzel şeyler ortaya çıkarılabilir.

Ufak bir problem önleme notu: Eğer birden fazla inputunuz var ise, ~ yerine + kullanarak birine tıkladığınızda hepsine tıklanmış gibi olma sorununu çözebilirsiniz.

:checked ile toggle örneği

Fernando Maclen’in Buttons, Lights & Shadows isimli tasarımını gözümüze kestiriyoruz. Javascript ile, veya daha da basiti Jquery .toggle() ile de bu tasarımın kodlamasını gerçekleştirebiliriz ama acımız :checked özelliğini kullanmak.

Check out this Pen!

Not: Bu tasarımın oluşum dersini de yapmışlar.

Peki ya :target?

Benzer bir yöntemi :target sözde sınıfı ile de uygulamak mümkün.

<a href="#id">TIKLA</a> <p id="id">Web Magazin</p>
p:target { color: red; }
Check out this Pen!

Bu yöntem daha basit, dolayısıyla çeşitli durumlarda mükemmel olabilir. Fakat :checked ile karşılaştırdığımızda, eğer anchor’u hedefliyorsak; sayfada ilgili id’ye gitmek için kayma yapması, ID nedeniyle sadece bir elemente etki edebilmesi ve toggle özelliğinin olmaması gibi dezavantajları var.

:focus yöntemi

Target yöntemine benzer bir şekilde tabindex veya focus olunabilen bir element üzerinde de çalışabiliriz.

<span tabindex="0">TIKLA</span> <p>Web Magazin</p>
https://gist.github.com/rssems/5117249
Check out this Pen!

Bu yöntemde herhangi bir başka yere tıklandığında focus biteceğinden sadece belirli durumlarda kullanılabilecek ama durum için mükemmel bir çözüm olabilecektir.

fb

Son bir tane daha: Transition

Yalan yok, bu yazmaya başladıktan sonra incelediğim ve öğrendiğim bir yöntem. O yüzden iyi ki yazmışım dedirtiyor insana.

<span>TIKLA</span> <p>Web Magazin</p>
p { transition: all 0s 9999999s; }
span:active ~ p { transition: all 0s; color: red; }
Check out this Pen!

Bu yöntem ile, oldukça hızlı bir animasyon ile 9999999 saniye (116 gün) sonra Web Magazin’in rengini kırmızı yapıyor olacak fakat span’a tıkladıgımızda bu süre 0 saniyeye düşerek anında etkisini gösterecek. Oldukça zekice bir yöntem. Malesef IE9’da da geçerli değil, opera mini’de de, ayrıca toggle yapılamıyor.

Tarayıcı Desteği

Biliyorum şaşıracaksınız fakat malesef Internet Explorer version 9 öncesi sürümlerde de bu özellikleri kullanamayacaksınız. Selectivizr ile IE8’e zorla güzellik uygulama şansınız var. Diğer modern tarayıcılarda ise zaten problem yok.

Bu yöntemin herhangi bir semantic anlamı olmadığını, CSS3 özelliklerinin kurnazlık ile kullanılması olduğunu hatırlatıyorum.

Örnek kullanımlar

Kaynaklar

CSS3 gücü adına!


Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles


Ayetel Kürsi'nin Daveti


Asayı Musa


SCCM 2012 Client Installation issue


Yusuf Suresi (100.ayet)Kapı, kılıç ve zirve duası


Kağıtları Altına Çevirmek


Sihir ve Büyü Çözmek İçin VEFK


Ya Rakib Esmasının Mucizeleri


Arkanızdan Konuşanları Susturmak İçin Dua


irsal ve musallat etmek


Merhamet, Gnade izle | 1080p — 720p Türkçe Dublaj HD