CSS veya jQuery ile Açılan/Kapanan Div

Gelişen ve yenilenen web tasarımı dilleri sayesinde Toggle, yani fareyle etkileşim kurulduğunda gözüken, etkileşim kesildiğinde kaybolan elemanlar hazırlamak fazlasıyla kolay. Artık, eskiden olduğu gibi bu işlemi yapmak için sayfalarca JavaScript veya Action Script yazmamıza da gerek kalmıyor.

Bu makalemizde Adobewordpress ailesi olarak size iki adet açılıp/kapanan div örneği hazırlayacağız. Bunlardan birisi sadece CSS ile çalışacak, diğeri ise jQuery desteği ile işleyecek.

CSS mi kullanmalı yoksa jQuery mi?

Tercihi yapacak olan sizlersiniz. Kullanıcı kitlenize veya tasarımınıza göre bu seçimi yapabilirsiniz.

CSS ile yapmanızın avantajları/dezavantajları

• jQuery’e ihtiyaç duymadığı için web sayfanızın dosya boyutunda ve açılış hızında düşme olacaktır.


• Hazırlanması kısmen daha kolaydır.


• IE’nin eski versiyonlarında sorun yaratır.


• Gizlenecek ve gösterilecek eleman, ana elemanın etiketleri içerisinde olmalı. Aksi halde tasarım işlemez. Bu da CSS mantığının en büyük handikabı olarak dikkat çekiyor.

jQuery ile yapmanızın avantajları/dezavantajları

• jQuery kütüphanesi neredeyse her sitede kullandığını için size ek bir yük oluşturmayacaktır.


• Hazırlanışı kısmen daha zordur. Sadece CSS değil, birkaç satır JS kodu da yazmanız gerekir.


• Tüm tarayıcılarda kusursuz çalışır.


• Gizlenecek ve gösterilecek eleman, body tagı içerisinde nerede olursa olsun tasarım işler. Bu da jQuery kullanmanız için yeterli bir sebep olarak gösterilebilir.

Üzerine gelince gözüken div nasıl yapılır?

Yukarıda da belirttiğimiz gibi iki ayrı yol üzerinden bu tasarımı oluşturacağız. En sonunda ise Codepen desteğiyle canlı bir örnek paylaşacağız.

CSS ile Yapımı

İlk olarak HTML kodlarımız ile başlayalım.

<div class="css-toggle">CSS ile Gizle/Göster
 <span>Bu eleman <b>.css-toogle</b>'ın içerisinde olması gerek</span>
</div>

Görebileceğiniz gibi yukarıdaki kodlarda span elemanımız css-toogle içerisinde. Böyle de olmak zorunda. Aksi halde çalışmaz.

.css-toggle
 color:white;
 background-color:tomato;

.css-toggle:hover spandisplay:block;

.css-toggle span
 display:none;
 color:#111;

Bu kadar. Sırada jQuery ile yapımı var.

jQuery ile Yapımı

İlk olarak jQuery kütüphanesini sitemize ekleyelim. İster head elemanı içerine ekleyin, istersenizde sitenizin en altında işlemi yapın.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Sırasıyla HTML, CSS ve JS kodlarımızı yazalım.

<div class="js-toggle">jQuery ile Gizle/Göster
 <span>Bu elemanın nerede olduğunun önemi yok.</span>
</div>

Yukarıdaki span elemanı js-toogle içerisinde olmak zorunda değil. Sayfanın neresine koyarsanız koyun, çalışacaktır.

.js-toggle
 color:white;
 background-color:CornflowerBlue;


.js-toggle span
 display:none;
 color:#111;

Ve son olarak JS kodlarımızı ekleyelim.

 $(".js-toggle, .js-toggle span").on("mouseenter", function() 
 $(".js-toggle span").css( "display", "block" );
 ).on("mouseleave", function() 
 $(".js-toggle span").css( "display", "none" );
 );

İşlem tamam! Şimdi sonucu görüntüleyelim.

Kapanış

Google’da her gün yüzlerce kez aranan bir konu tasarımalrdaki Toggle mantığı. Geçtiğimiz hafta sadece bu konuyla alakalı iki adet elektronik posta tarafımıza gönderildiği için sizlere hızlıca bu makaleyi hazırladık.

Sonuç

CSS veya jQuery ile Açılan/Kapanan Div

Görsellerinize Pinterest (Pin it) butonunu ekleyin

Pinterest günümüz internetinin en büyük sosyal ağlarından birisi. Eğer doğru kullanılırsa bu ağ sayesinde web sayfanıza inanılmaz büyük bir trafik oluşturabilirsiniz. Görselleri bol olan bir web sayfasına sahipseniz, özellikle fotoğraf ve portfolio konularını işliyorsanız Pinterest’e dahil olmanız kaçınılmaz.

Bu makalemizde WordPress sitemizdeki görsellere kolay bir şekilde “Pin it” butonu ekleyeceğiz.

jQuery Pin It Button for Images

Bu uygulamayı yapan onlarca eklenti var. Geçtiğimiz günlerde en popüler 5 eklentiyi kurup inceledik. Bir kısmı görsellerin linklerini bozuyor, bir kısmı da görsellerin sağına veya soluna yazılmış metinleri aşağı satıra atıyor. Fakat aralarından bir tanesi gayet kolay bir şekilde kuruluyor ve çalışıyor.

Bu eklenti sayesinde kapsamlı kontrol paneline sahip “Pin it” buttonlarını görsellerimize ekliyoruz. İlk olarak kurulum hakkında konuşalım. Daha sonra eklentiyi biraz tanıyalım.

Kurulum

Eklenti tamamıyla ücretsiz.

WordPress’e eklentilerin nasıl kurulduğunu kısaca hatırlayalım.

1. Dosyayı indirin ve zip içerisinden çıkarın.


2. Eklenti klasörünü FTP aracılığıyla ‘/wp-content/plugins/’ dizinine upload edin,


3. WordPress admin panelinizden Eklentiler alanına gidip eklentiyi etkinleştirin.

Download Adresi : jQuery Pin It Button For Images

Detaylar

Eklentiyi Wp-admin‘de Ayarlar > jQuery Pin It Button For Images Options alanından yönetebiliyoruz. Selection, Visual ve Advanced olmak üzere 3 ayar tabımız mevcut. Bu alanlardaki özellikleri teker teker tanıyalım.

Selection

• Image selector : jQuery selector ile hangi classlara “Pin it” butonu ekleneceğini seçiyoruz.


• Disabled classes : Hangi classlarda “Pin it” butonu gösterilmeyeceğini seçiyoruz.


• Enabled classes : “Pin it” butonunu dahil etmek istediğimiz ek CSS classlarını tanımlıyoruz.


• On which pages the “Pin it” button should be shown : Hangi sayfalarda “Pin it” gözüksün.


• Minimum resolution that should trigger the “Pin it” button to show up : Hangi boyutlardan büyük görsellerde “Pin it” gözüksün.

Visual

• Mode : Dinamik ve statik olmak üzere iki seçeneğimiz var. Statik görsel üzerine div katmanı atayarak farklı kaydedilmesini de engelliyor. Dinamik ise bu işlemi yapmıyor. Önerimiz dinamik yapıyı kullanmanız.


• Description source : Paylaşımda kullanılacak Pin’in başlığı.


• Transparency value : Görsellerin üzerine gelince uygulanacak şeffaflık oranı.


• Custom “Pin It” button : Kendi “Pin it” butonunu eklememizi sağlıyor.


• “Pin it” button position : Butonun gözükeceği pozisyonu belirlememizi sağlıyor.


• “Pin it” button margins : Butonun margin değerlerini belirlememizi sağlıyor.


• Retina friendly : Retine dostu butonlar eklememizi sağlıyor.

Advanced

• Debug : Eklentinin gelişimine katkıda bulunmamızı ve sorunları bildirmemizi sağlıyor.


• Container selector : Makaleyi çevreleyen konteynırı belirtmemizi sağlıyor.

Kapanış

Pinterest, Türkiye’de artık fazlasıyla popüler. Bu büyüklükte bir sosyal ağın dışında kalmak istemezsiniz. Geç kalmadan tüm görsellerinize “Pin it” butonu ekleyin ve Pinterest üzerinde de yerinizi alın.

Bir sonraki makalemizde görüşmek üzere, hoşçakalın.

Görsellerinize Pinterest (Pin it) butonunu ekleyin

CSS ile Şık Bildirimler

Web sayfanız için özel bildiri kutucukları hazırladınız mı? Cevabınız hayır ise doğru yerdesiniz.

Bugün 4 klasik uyarı için bildiri kutucuğu tasarlayacağız. Hata, uyarı, bilgi ve başarı bildirimleriniz artık daha şık ve kontrol edilebilir olacaklar.

Ekleyeceğimiz inline JavaScript kodları da bu kutucukların kapatılabilir olmasını sağlayacak. Tasarımı daha ilgi çekici hale getirmek için de CSS-transition kullanacağız.

Nasıl yapılır?

Uyarı pencerelerini blockquote elemanı üzerinden tasarlayacağız. İlk olarak genel tanımlamalarımızı yapalım. Biz font tercihimizi Open Sans’dan yana kullandık. O yüzden ilk olarak bu fontu Google Web Fonts‘dan çekelim.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Şimdi genel CSS tanımlamalarımızı ekleyelim.

blockquote
-webkit-transition: all 500ms ease-out ;
-moz-transition: all 500ms ease-out ;
-o-transition: all 500ms ease-out ;
transition: all 500ms ease-out ;
font:16px 'Open Sans';
padding:15px;

Ayrıca bildirim başlıklarımız ve kapatma düğmesini de ekleyelim.

blockquote spanfont-weight:600;
blockquote #closefloat:right; color:inherit; text-decoration:none;

Taslaklarımız hazır. Şimdi biraz daha detaylandıralım.

Bildiri 1 : Dikkat

CSS Kodları

blockquote#danger
background-color:tomato;
border-left:7px #dc3d21 solid;
color:white;

HTML Kodları

<blockquote id="danger">
<a id="close" title="Close" href="#" onClick="document.getElementById('danger').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Dikkat!</span> Bu bir hata mesajıdır.
</blockquote>

Bildiri 2 : Uyarı

CSS Kodları

blockquote#warning
background-color:#ecdfb0;
border-left:7px #e5c693 solid;
color:#6b6d31;

HTML Kodları

<blockquote id="warning">
<a id="close" title="Close" href="#" onClick="document.getElementById('warning').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Uyarı!</span> Bu bir uyarı mesajıdır.
</blockquote>

Bildiri 3 : Bilgi

CSS Kodları

blockquote#info
background-color:#bde9f7;
border-left:7px #8bdaf4 solid;
color:#3c7e94;

HTML Kodları

<blockquote id="info">
<a id="close" title="Close" href="#" onClick="document.getElementById('info').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Bilgi!</span> Bu bir bilgi mesajıdır.
</blockquote>

Bildiri 4 : Başarı

CSS Kodları

blockquote#success
background-color:#cee0cf;
border-left:7px #8eb589 solid;
color:#296829;

HTML Kodları

<blockquote id="success">
<a id="close" title="Close" href="#" onClick="document.getElementById('success').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Tebrikler!</span> Bu bir onay mesajıdır.
</blockquote>

Kapanış

CSS ve az biraz JavaScript ile bildiri kutucuklarını yeniden tasarlamak bu kadar basit!

Bir sonraki dersimizde görüşmek üzere, iyi çalışmalar.

CSS ile Şık Bildirimler

CSS3 ile Odaklanma

Tolkien, Yüzüklerin Efendisi ve Hobbit filmlerine, hatta oyunlarına ilgi duyan herkesin hoşuna gideceğini düşündüğümüz bir tasarım ile sizlerleyiz. Bu dersimizde CSS3‘ün transform elemanıyla jQuery‘nin gücünü birleştirip etkileyici bir sunum hazırlayacağız. Bu yüzden okumakta olduğunuz makale aynı zamanda da “İlham Verenler” kategorisinde yerini alıyor.

Nasıl yapılır?

Tasarımın hazırlamasında kullandığımız CSS, HTML ve JS kodlarını teker teker inceleyelim.

HTML Kodları

Birçok makalemizin aksine bu sefer işin HTML kısmıyla başlayalım. İlk olarak 3 adet katmanımızı ekleyelim. Bu rakamı kod satırlarını çoğaltarak arttırabilirsiniz de.

<div class="katmanlar">
<img src="http://i.imgur.com/ePE90Yv.png" class="mordor">
<img src="http://i.imgur.com/BamhAMD.png" class="patlama">
<img src="http://i.imgur.com/SCLnCIg.png" class="angmar">
</div>

3 adet görselimizi ekledik. Hiyerarşi açısından en altta mordor, bir üstünde patlama ve en üstte de angmar class tanımlamalı görsel yer alacak.

JavaScript ve jQuery Tanımlamaları

İlk olarak inline JS kodlarımızı ekleyelim. İster <head></head> elemanı içerisine, isterseniz de yukarıda eklediğimiz 3 görsel kodunun altına bu satırları ekliyoruz.

<script type="text/javascript">
var mouseY = 0;

getBlur = function(depth)
 var result = Math.abs(depth-mouseY/50);
 return result;
;

getZoom = function(depth)
 var result = 1+(getBlur(depth/2)*0.03);
 return result;
;

$(document).ready(function() 
 $(window).mousemove(function(e)
 mouseY = e.pageY;
 /*'-webkit-transform: scale('+ getZoom(2)+') perspective(100px);*/
 $('.mordor').attr('style','-webkit-filter:blur('+getBlur(2)+'px);');
 $('.patlama').attr('style','-webkit-filter:blur('+getBlur(3)+'px);');
 $('.angmar').attr('style','-webkit-filter:blur('+getBlur(5)+'px);');
 );

);
</script>

Şimdi de jQuery dosyasını sayfamıza ekleyelim. <head></head> içerisine jQuery tanımlamasını yapıyoruz. Örneği hazırlarken 1.10.1.min versiyonunu kullanmıştık, burada da onu paylaşmakta fayda var.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

CSS Kodları

Fark ettiğiniz gibi hazırladığımız örnek tam ekran olarak çalışmakta. Yani responsive, makalede de aynı tasarımı uygulayacağız. O halde aşağıdaki kodları CSS dosyanıza ekleyerek işlemi tamamlayabilirsiniz.

body,html 
	height: 100%;
	margin:0;
	background-color:black;

.katmanlar 
	position:absolute;
 margin: 0 auto;
 height: 100%;
 width:100%;
 overflow:hidden;
 	-webkit-transform-style: preserve-3d;

img 
 -webkit-transform: translate3d(0, 0, 0);
 width:100%;
 height:100%;

.katmanlar .angmar 
 position:absolute;
 top:0px;
 left:0px;


.katmanlar .patlama 
 position:absolute;
 top:0px;
 left:0px;

Kapanış

Bu tip tasarımlar daha çok ürün tanıtımında kullanılmakta. CodePen üzerinde görüp sizlerle Türkçe olarak paylaştığımız bu ders aslında kod temelli tasarımın ne kadar hızlı geliştiğini açıkça göstermekte. Adobewordpress ailesi olarak bu yenilikleri sık sık gündeme getirmeye devam edeceğiz.

Bir sonraki dersimizde görüşmek üzere, iyi çalışmalar.

CSS3 ile Odaklanma