Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / CSS3 / Sa d ece CSS i l e T AB M a n tı ğ ı Ku l l a n a ra k Li stel em e
Sadece CSS ile TAB Mantığı Kullanarak Listeleme Vatanay Özbeyli tarafından 08 Kasım 2012 tarihinde yazıldı. ~ 2 Yorum + Değiştir
Web 2.0 ile paylaşılan içerik arttı, menüler genişledi, metinler bazen sığmadı, tab tekniği kullanılmaya başlandı. An itibariyle neredeyse her sitede kullanılmakta. Aynı açılır menüler gibi. Bu yazımda tab tekniğinin temelinden bahsedeceğim. Beraberinde çok beğenerek hazırladığım bir çalışmayı sizinle paylaşacağım. Hazırladığım örneği görüntülemek için burayı tıklayın. Hazırlayacağımız CSS stilinin görüntüsü, normal haliyle yukarıda gördüğünüz gibi. Tablardan birinin üzerine gelince ise karşılacağınız görüntü soldaki gibi olacaktır. Stil dosyasını uzatmamaya çalıştım. Çalışma gayet basit bir arayüze sahip. İstediğiniz CSS teknikleriyle geliştirebilirsiniz. Örneğin gölgelendirme eklemenizi tavsiye ederim. Aşağıdaki kodları CSS dosyamıza veya <style type=”text/css”>BURAYA</style> tagları arasına yazıyoruz. 1 2 3 4 5 6 7 8 9 10 11 12
#cevreleyici { width: 800px; margin: 100px auto; } #cevreleyici div { transition: width 0.3s; -moz-transition: width 0.3s; -webkit-transition: width 0.3s; -o-transition: width 0.3s; float: left; width:20%;
13 14 15 16 17 18 19 20 21 22
height: 180px; overflow: hidden; } #cevreleyici:hover div { width: 65px; } #cevreleyici:hover div:hover { width: 440px; overflow: hidden; /*yazılar uzunsa bu alanı auto olarak değiştirin*/}
23 24 #adobewordpress {background-color:#bb5046; color:#fbdbd8; border-radius: 15px 0 0 15px;} 25 #adobe {background-color:#a6bb46; color:#e7f2b6; } 26 #wordpress {background-color: #FFCC00; color:white; } 27 #css {background-color:#46acbb; color:#caeff4; } 28 #seo {background-color:#b5b5b5; color:white; borderradius: 0 15px 15px 0;} 29 30 h1 {font-size: 115%;margin: 10px 10px .2em 25px; } 31 p {margin: 1em 25px; }
Aşağıdaki kodları ise <body>BURAYA</body> tagları arasına yazıyoruz. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
<div id="cevreleyici"> <div id="adobewordpress"> <h1>AdobeWordPress</h1> <p>Adobe program dersleri ve WordPress blog sisteminin detaylarını konu alan interaktif Türkçe eğitim merkezi.</p> </div> <div id="adobe"> <h1>Adobe</h1> <p>Merkezi ABD'de Kaliforniya eyaletinde bulunan, Dünya'nın 10 büyük grafik ve medya yazılımlarını üreten şirkettir.</p> </div> <div id="wordpress"> <h1>WordPress</h1> <p>WordPress, GPL lisanslı, PHP ve MySQL kullanılarak yazılmış bir kişisel yayın sistemidir. </p> </div> <div id="css"> <h1>CSS</h1> <p> HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir Web teknolojisidir.</p> </div> <div id="seo"> <h1>SEO</h1> <p>Arama motorlarının web sayfalarını daha kolay bir şekilde taramasına olanak sağlayan teknik düzenlemeler. </p> </div> <div style="float: none; clear: both; height: 0;"> </div> </div>
Bu kadar. Umarım işinize yarar.
Benzer Konular: CSS3 ile Geçiş Efekti (Transition) Kullanarak Windows 8… Sadece CSS ile Yatay Menü CSS ile Etkileyici İnteraktif Logo CSS Kullanarak Button Tasarlamak CSS3 ile Açılır Arama Kutusu
Yazı Kategorisi : CSS3 , Tasarım Unsurları Anahtar Kelimeler : açıklamalı , açılan , awesome , cascading , css , div , güzel , hover , içerik , listeleme , tab , tekniği , yana , yazı