Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / CSS3 / CSS3 ve j Q u ery i l e G o o g l e Pl a y T a b
CSS3 ve jQuery ile Google Play Tab Vatanay Özbeyli tarafından 18 Haziran 2013 tarihinde yazıldı. ~ 2 Yorum + Değiştir
Microsoft Windows tasarımıyla hazırladığımız menülerden sonra sıra Google‘ın hazırladığı eşsiz tablara geldi. Google Play‘de yer alan bu kutucuklar görünüşlerinin aksine gayet basit bir yapıya sahipler. CSS3 ve jQuery öğeleri sayesinde tasarımımızı hazırlayalım.
Nasıl hazırlanır? Kod satılarını CSS, HTML ve JS olmak üzere üçe bölüyorum. Böylece makaleninin devamı daha anlaşılır olacaktır. Arka plan görseli ile başlayalım. Web sayfanızın CSS kodlarının içindeki body alanına aşağıdaki eklemeyi yapın. 1 body{background-color: #eee; 2 background-image: url(data:image/gif;base64,R0lGODlhCAAIAJEAAMzMzP///////wAAACH Evet bu çizgili arka planı siteye dahil etti. Sırada ise diğer CSS kodlarımız var. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
#tab{ overflow: hidden; margin: 0 auto; padding: 0; list-style: none; } #tab,#icerik {width: 600px; margin:0 auto;} #tab li { float: left; margin: 0 -15px 0 0; } #tab a { float: left; position: relative; padding: 0 25px;
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 53 54
height: 0; line-height: 30px; text-transform: uppercase; text-decoration: none; color: #fff; border-right: 30px solid transparent; border-bottom: 30px solid #3D3D3D; border-bottom-color: #777\9; opacity: .3; filter: alpha(opacity=30); } #tab a:hover, #tab a:focus { border-bottom-color: #2ac7e1; opacity: 1; filter: alpha(opacity=100); } #tab a:focus { outline: 0; } #tab #current { z-index: 3; border-bottom-color: #3d3d3d; opacity: 1; filter: alpha(opacity=100); } #icerik { background: #fff; border-top: 2px solid #3d3d3d; } #icerik div{padding:1em;}
Şimdi <body></body> içerisine, tasarımın gözükmesini istediğimi yere ekleyeceğimiz HTML kodları var. 1 <ul id="tab"> 2 <li><a href="#" name="#tab1" id="current">adobewordpress</a></li> 3 <li><a href="#" name="#tab2" id="">photoshop</a></li> 4 <li><a href="#" name="#tab3" id="">wordpress</a></li> 5 <li><a href="#" name="#tab4" id="">araçlar</a></li> 6 </ul> 7 8 <div id="icerik"> 9 <div id="tab1" style="display: block;"> 10 <h2>Ne sunuyoruz?</h2> 11 <p>AdobeWordPress ailesi olarak siz ziyaretçilerimize eşsiz makaleler sunuyoruz.</p> 12 <p>Daha önce Türkiye'de yapılmamışı yapıyoruz, Photoshop, WordPress, HTML5, CSS3, SEO ve tasarım temalı Türkçe makaleler yazıyoruz.</p> 13 <h2>Videolar hazırlıyoruz!</h2> 14 <p>Karışık gibi gözüken görsel efektleri video derslerimiz ile dakikalar içerisinde anlatıyoruz.</p> 15 </div> 16 <div id="tab2" style="display: none;"> 17 <h2>Usta bir Photoshop kullanıcısı olmak ister misiniz?</h2> 18 <p>Artık Photoshop ile özgürlügün tadını
19 20 21 22 23 24 25
26 27 28 29 30 31 32 33
çıkaracaksınız. Çok zor gözüken efektlerin hiç öyle olmadiklarını öğreneceksiniz.</p> <p>Sık güncellenen Photoshop bölümümüz sayesinde profesyonel bir Photoshop kullanıcısı olabilirsiniz. </p> </div> <div id="tab3" style="display: none;"> <h2>WordPress sitenizi şahesere dönüştürün!</h2> <p>İddiali olduğumuz bir diğer kategorimiz ise WordPress. Ücretsiz paylaşımlarımız sayesinde web sayfalarınızı şahesere dönüştüreceksiniz.</p> <h2>Siteniz yeterince iyi mi?</h2> <p>Dünyanin en çok kullanılan hazır site tasarımlarindan olan WordPress ile sitenizi kurdunuz ve yayinladiniz, peki ziyaretçileriniz için her şey hazır mi? Tasarımınızda problemler var mı? Peki siteniz yeterince güvenli mi?</p> <p>Bütün sorularınızın cevabı WordPress makalelerimizde!</p> </div> <div id="tab4" style="display: none;"> <h2>CSS3, HTML5, SEO ve tüm tasarım unsurları sizi bekliyor!</h2> <p>AdobeWordPress Web 1.0'dan beri burada ve sizlere gelişen teknolojiyi daha yakindan tanıma sanşı sunuyor.</p> <p>Tasarımın temeline hakim olan yeni teknolojileri detaylı anlatım ve örneklemelerimizle daha iyi öğrenebilirsiniz.</p> </div> </div>
Bu kodların altına ise jQuery dosyamızı ekleyelim. 1 <script src="http://code.jquery.com/jquery1.7.2.min.js"></script> Ve onun da altına geriye kalan JavaScript kodlarımızı ekleyelim. 1 <script> 2 function resetTabs(){$("#icerik > div").hide();$("#tab a").attr("id",""); } 3 var myUrl = window.location.href; 4 var myUrlTab = myUrl.substring(myUrl.indexOf("#")); 5 var myUrlTabName = myUrlTab.substring(0,4); 6 (function(){$("#icerik > div").hide();$("#tab li:first a").attr("id","current"); 7 $("#icerik > div:first").fadeIn(); 8 9 $("#tab a").on("click",function(e) {e.preventDefault(); 10 if ($(this).attr("id") == "current"){ return } else{ 11 resetTabs();$(this).attr("id","current"); 12 $($(this).attr('name')).fadeIn();}}); 13 14 for (i = 1; i <= $("#tab li").length; i++) { 15 if (myUrlTab == myUrlTabName + i) {resetTabs(); 16 $("a[name='"+myUrlTab+"']").attr("id","current"); 17 $(myUrlTab).fadeIn();}}})() 18 </script> Her şey hazır!
Kapanış JS kodlarını da eklediğimizde tasarım hazır oluyor. Bu tasarımı Catalin Rosu’nun makalelerinde gördüm ve sizlerle paylaşmak istedim. Beğeneceğinizi umuyorum. İyi çalışmalar.
Benzer Konular: HTML5 ile Tam Ekran (Full Screen) CSS ve jQuery Yardımıyla Resimlere Caption Görsellerinize Büyüteç ile Bakın Sadece CSS ile Yatay Menü Sadece CSS Kullanarak Dropdown Menu Nasıl Hazırlanır
Yazı Kategorisi : CSS3 , jQuery , Öne Çıkanlar , Tasarım Unsurları Anahtar Kelimeler : CSS3 , google , jquery , play , store , tab , Tasarım