Merhaba arkadaşlar bu makaleme düzgün bir başlık bulamazsam da bu bilgiyi kötü bir başlıkla sizden esirgemek istemedim.
Geçenlerde bir arkadaş (ÖFÖ) span.class.class yapmıştı ve bende arkadaşı uyarmıştım (diğer tarayıcılarda çalışmayabilir dikkatli çalış gibisinden)
Bugün test ettim, biraz kurcaladım ve gerçekten çok güzel bir nimet ve ie7, ie8, ie9 dahil olmak üzere tüm tarayıcılarda (ie7 de çalışıyorsa hepsiden çalışır zaten) çalışıyor.
Sistem işleyişi şu şekil oluyor :
a.tamBoy, a.yarimBoy adlı classlarımız var, bu classların hoverları ve secili durumları var.
a.tamBoy.secili diye tanımladığımız css özellikleri şu şekilde çalışıyor,
tamBoy class’ına sahip a tagına -> secili classı varsa belirttiğimiz özellikler gerçerli oluyor.
Örnek çalışma :
|
1 2 3 4 5 6 |
<ul> <li><a class="tamBoy" href="javascript:void(0);">.tamBoy</a></li> <li><a class="tamBoy secili" href="javascript:void(0);">.tamBoy.secili</a></li> <li><a class="yarimBoy secili" href="javascript:void(0);">yarimBoy.secili</a></li> <li><a class="yarimBoy" href="javascript:void(0);">yarimBoy</a></li> </ul> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
ul li { margin: 5px; float: left; list-style: none; } ul li a { line-height: 41px; font-size: 14px; color: #fff; display: block; text-align: center; text-decoration: none; height: 41px; font-size: 14px; font-family: Calibri; } /** a.tamboy halleri*/ ul li a.tamBoy { width: 150px; background: url('../resim/abSprite.png') left top no-repeat; } ul li a.tamBoy:hover { background: url('../resim/abSprite.png') left center no-repeat; } ul li a.tamBoy.secili { background: url('../resim/abSprite.png') left bottom no-repeat; } ul li a.tamBoy.secili:hover { background: red; } /** a.yarimBoy halleri*/ ul li a.yarimBoy { width: 136px; background: url('../resim/abSprite.png') right top no-repeat; } ul li a.yarimBoy:hover { background: url('../resim/abSprite.png') right center no-repeat; } ul li a.yarimBoy.secili { background: url('../resim/abSprite.png') right bottom no-repeat; } ul li a.yarimBoy.secili:hover { background: yellow; color: #333; } |
Codepen.io link -> http://codepen.io/AycanB/pen/vCskm
Kaynak
– Css-Tricks http://css-tricks.com/multiple-class-id-selectors/
foundation, bootstrap gibi frameworklerden kullansaydın veya en azından 960.gs gibi bir grid system kullanmış olsaydın 3-5 sene önce karşılaşabilirdin 🙂
grid systemlerin alayı bu mantıkla çalışıyor.
Gerçekten Başarılı Bir Makale Olmuş
Senden Öğreneceğimiz bir çok bilgi var Bigbossssss
Makale 16 şubatta yazıldığı için söylüyorum. Bu tarz butonları imaj olarak kullanmak yerine colorzilla ile yapılması mümkün.
Bilgi için çok teşekkür ederim.