textarea{ resize:none}

Sadece bu kod ile istediğimizi elde edebiliriz.

Tek sakıncası bu kodu sadece webkit tabanlı tarayıcılar desteklediği için sayfamızı w3c CSS kontrolünden geçirdiğimizde hata verecek olmasıdır.

Kaynak

• http://www.google.com/support/forum/p/Chrome/thread?tid=5f9cd62207e2c7a8&hl=en
• http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

Ben genelde daha önce kullanmadığım metotları kullanmadan önce bir araştırma yaparım ve sonuçta bana göre iyi olan yöntemi uygularım. Web ajanslarında çalışırken bu araştırmayı kısa tutmam gerekirken tek bir proje geliştirirken bu iş için daha uzun zamanımız oluyor.

Bu işi çin CSS, javascript ve ajax ile çözümler mevcut.

Ben bu yöntemlerden javascript yöntemi ile yapmayı tercih ettim. Diğer yöntemler hakkında genel bir bilgi verip geçeceğim.

CSS Yöntemleri

CSS Sprite yöntemide bu kategoriye girer.

CSS yöntemleri genelde sayfa içine konulan resimlerin tarayıcı görüntüsünden kaçırılması ile yapılan yöntemlerdir ki işin bu kısmı benim hoşuma gitmiyor.

CSS ile bu işi yapan bir örnek verelim.

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px;
   top: -9999px;
   height: 1px;
   width: 1px;
}

HTML kodu

<div id="preloaded-images">
 <img src="http://deneme.com/image-01.png" width="1" height="1" alt="Image 01" />
 <img src="http://deneme.com/image-02.png" width="1" height="1" alt="Image 02" />
 <img src="http://deneme.com/image-03.png" width="1" height="1" alt="Image 03" />
</div>

Yukarıda görüldüğü gibi html içine eklenen resimler CSS yardımı ile kullanıcının göremeyeceği bölgelere itilmiştir. Bu şekilde bir çözüm üretilmiştir.

Javascript Yöntemleri

Javascript ile yapılan yöntemlerin genel yapısı bir sıraya sokulan resimler dinamik olarak doküman içine eklenir.

Javascript ile bu işlemi yapan çeşitli kodlar var. Benim uyguladığım ise aşağıdaki koddur. Bu kodun diğerlerine göre avantajı yükleme yaptığımız sayfanın yüklenmesi bittikten sonra bizim önden yükleme yaptığımız resimleri yüklemesidir.

function preloader() {
  if (document.images) {
    var img1 = new Image();
    var img2 = new Image();
    var img3 = new Image();

    img1.src = "http://domain.tld/path/to/image-001.gif";
    img2.src = "http://domain.tld/path/to/image-002.gif";
    img3.src = "http://domain.tld/path/to/image-003.gif";
  }
}
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
    if (oldonload) {
      oldonload();
    }
    func();
    }
  }
}
addLoadEvent(preloader);

Yukarıdaki javascript kodu işimizi görecektir.

jQuery ile daha kısa ve basit bir kod ile bu işi yapabiliriz.

// resim onyükleme fonksiyonu
 jQuery.preloadImages = function()
 {
   for(var i = 0; i<arguments.length; i++)
   {
   jQuery("<img>").attr("src", arguments[i]);
   }
 };

// yükleme yap
 $.preloadImages("images/dexter.jpg", "images/saydam_ardalan1.gif", "images/ornek_sayfa.jpg");

Yukarıdaki kodu yazınca yükleme yaptığımız sayfadaki öğeler yüklenirken yükleme yaptığımız resimlerde yüklenir. Bu benim istediğim bir durum değildir. Bence yükleme yapılacak sayfanın öğeleri yüklendikten sonra yüklenecek resimler yüklenmelidir. Kullanıcı ilk önce mevcut sayfayı tam görmelidir, sonra kullanıcıya göstermeden diğer sayfa resimlerini yüklemeliyiz.

Bunun için kodumuzu aşağıdaki değiştirmeliyiz.

 $(document).ready(function() {
 $(window).bind('load', function()
 {

   // resim onyükleme fonksiyonu
   jQuery.preloadImages = function()
   {
   for(var i = 0; i<arguments.length; i++)
   {
     jQuery("<img>").attr("src", arguments[i]);
   }
   };

   // yükleme yap
   $.preloadImages("images/dexter.jpg", "images/saydam_ardalan1.gif", "images/ornek_sayfa.jpg");

 });
});

Eklediğimiz sadece $(window).bind(‘load’ function()) kısmıdır. Burada sayfa yüklendikten sonra bu işlemi yap diyoruz.

Örneği görmek için tıklayınız.

Örneklerde dikkatiniz bir yere çekmek istiyorum. Firebug Net sekmesini açtım çünkü sayfa yüklenmesi anını görmenizi istedim. İlk resimde sayfa yüklenirken sonradan görüntüleyeceğimiz resimleride içeren bir durum söz konusu idi. Dikkat ederseniz ilk reismde dikey kırmızı çizgi en sondadır. İkinci resimde ise kırmızı dikey çizgi sayfa öğelerini sonuncusu olan resimden sonra çizilmiştir, daha sonra yükleme yapılan resimler yüklenmiştir.

Sonuç

Ben küçük bir araştırma sonucunda bu kodu kullanmayı uygun buldum. Bulduğum bu kodun kendimce gerekçelerini yukarıda açıklamaya çalıştım, eğer sizlerin daha iyi çözümleri ve önerileri varsa yorum kısmında bizlerle paylaşırsanız sevinirim.

Kalın sağlıacakla

Kaynaklar

• http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
• http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript
• http://elouai.com/javascript-preload-images.php
• http://www.javascriptkit.com/script/script2/preloadimage.shtml
• http://stackoverflow.com/questions/761263/what-is-the-best-way-to-preload-multiple-images-in-javascript/761332
• http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
• http://snipplr.com/view.php?codeview&id=9612

Genel bir web sitesinin oluşum aşamaları genel hatları ile yukarıdaki gibidir.

Bir web sitesinin evrelerinden birisi; Tasarımı bitmiş web sitesinin Arayüz geliştiriyiciye (HTML-ci) teslim etmesidir. İyi bir web sitesi çıkarmak için çok iyi bir ekibe sahip olmak gerektiğini çeşitli platformlarda değinmiştim. Bu ekipte en çok iletişimde olması gereken iki kişi veya iki bölüm tasarım ve arayüz geliştiricileri arasında olmalıdır. Tasarımcı ve arayüz geliştirici arasındaki iletişimin sağlam olması projenin sağlığı açısından önemlidir. Hadi programcılarıda kızdırmayalım onlarda olmazsa olmaz.

Bir arayüz geliştirici olarak tasarımcıdan beklentilerimiz var tabiki. Aynı şekilde Tasarımcının ve programcının da çeşitli beklentileri olabilir. Ancak ben burada kendi açımdan bakarak bir tasarımcıdan beklentilerimin ne olduğunu yazacağım.

Kaynak Dosyaları

• Tasarımı çıkmış sayfaların eksiksiz kaynak dosyaları(psd veya katmanlı png) bu kaynak dosyalarının temiz ve düzenli olması önemle rica olunur
• Kullanılan yazı tipleri
• Renk paleti
• Favori ikon
• Sitenin yapısına göre sitedeki buton tipleri, kullanılacak ikonlar vb. yapılarda beklenenler listesine girer.

Site Şablonları ve Yerleşim

Web sitelerinin belli sayfalarını tasarlayan tasarımcıdan tüm sitedeki alanların bir özeti olan şablonlar hazırlamalıdır. Genel bir web sitesi şablonunda Metinlerin rengi, boyutları, listeler, form alanları, resimlerin durumu ve konumunu göstermelidir.

Ayrıca site içinde flash olacak kısımları belirlemelidir. Flash olacak kısımları Flash geliştirici ile koordineli olarak Arayüz geliştirici siteye eklemelidir.

Etkileşimli Alanların Farklı Durumları

Sitedeki etkileşimli alanları kullanıcı hareketine göre aldığı farklı durumlar için hazırlanmış ise. Örneğin butonları :hover halleri, forum elemanlarına odaklanma durumları vb. yapıların her durumunu gösteren görseller

• :hover
• :focus
• :active

halleri

Genel Beklentiler

Arayüz Geliştiricileri olarak bizlerin en büyük sorunları farklı tarayıcılar için kod yazmaktır. Buradaki en büyük sorunumuz tabi ki İnternet Explorer 6 ve sorunlarıdır. İnternet Explorer 6’nın kısıtladığı özellikler düşünülerek tasarımcılardan bazı beklentilerimiz olacaktır. Tasarımcı tasarımını yaparken bazı kısıtlamalar ve zorluklarımız olduğunu bilirse yapılan tasarımın html çevrilmesi aşamasında o kadar az fark olur(HTML-ci sabunlama gereği duymaz) Örneğin yapılan bir tasarımda renk geçişi olan bir alan üzerine konulan gölgeli alanlar arayüz geliştiriciyi zorlayacak eylemlerdir. Ayrıca birbiri üzerine çok fazla binen kısımların olması bizleri zorlar, z-index problemleri ile uğraşmamıza neden olur.

Sonuç

Ekip arasındaki iletişim sağlam olması bir çok sorunu çözecektir ve birlikte çalışma süreleride bu listeyi azaltacak etkenlerden birisidir. Benim listem bu kadar sizlerde bişeyler eklemek isterseniz aşağıdaki yorum kutusuna yazın.

Kalın sağlıcakla

/* clearfix */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

ul{ margin:0 auto; padding:10px; background-color:#008bc6; width:450px;}
    ul li{ list-style:none; float:left; border-right:1px solid #046e9b; border-left:1px solid #05a3e6;}
        ul li a{ display:block; text-decoration:none; color:#fff; font:bold 12px Arial, Helvetica, sans-serif; margin-right:10px; padding:0 10px}

HTML

<ul class="clearfix">
   <li><a href="">Bak postacı</a></li>
    <li><a href="">geliyor</a></li>
    <li><a href="">selam veriyor</a></li>
    <li><a href="">her kes ona bakıyor</a></li>
</ul>

Örneği görmek için tıklayınız.

İlk öğenin solundaki kenar çizgisi ile son öğenin sağ kenar çizgisini kaldırmak için bu öğelere sınıf atamalıyız ve bu kenar çizgilerini sıfırlamalıyız.

    ul li.ilkOge{ border-left:0;}
    ul li.sonOge{ border-right:0;}

Örneği görmek için tıklayınız.

Bu uygulamayı dikey menü olarakta yapabiliriz.

ul{ margin:0 auto; padding:10px; background-color:#008bc6; width:200px;}
ul li{ list-style:none; border-top:1px solid #046e9b; border-bottom:1px solid #05a3e6;}
ul li.ilkOge{ border-top:0;}
ul li.sonOge{ border-bottom:0;}
   ul li a{ display:block; text-decoration:none; color:#fff; font:bold 12px Arial, Helvetica, sans-serif; margin-right:10px; padding:10px 0}

Örneği görmek için tıklayınız.

Bu yazıyı yazmaya karar verdiğimde “css ile buton yapmak” adlı yazının hazırlıkları da devam ediyordu, oradada butonları araştırırken Firefox’un sitesinde uyguladığı bir metot bu konuyu ilgilendiren bir metot olduğunu gördüm. Onuda buraya yazayım. Ancak bu metot İnternet Explorer’da çalışmayacaktır.

HTML kodu

<a href="">+ <span>Çizgili buton</span></a>

CSS kodu

a{
    background-color:#ed145b;
    padding:5px 10px;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    font-size:16px;
}
a span{
    border-left:2px groove rgba(144, 71, 95, 0.55);
    display:inline-block;
    padding-left:6px
}

Koda biraz açıklama getirelim. border’a verilen groove özelliği bizim istediğimiz etkiyi yapan bir özelliktir. Bu özellik ile eklenen çizgiler gri renklidir. Biz bu çizgiye biraz saydamlık kazandırıp zemin rengine uyum sağlamasına yarar.

Örneği görmek için tıklayınız.

Butonların önemine binaen her yönü ile düşünülüp karar verilmesi gereken öğelerdir. Boyutu, konumu, halleri, görünüm gibi bir çok faktör düşünülerek tasarlanır ve uygulamaya geçirilir. Ben burada tasarımsal kısmına değinmeden kodlama kısmını ilgilendiren bölümlerine değinmeye çalışacağım.

Basit Butonlar

<button> ve <input type="button" /> html elemanları w3c tarafından standartlaştırılmış buton elemanlarıdır, bu elemanlar butonların ne kadar önemli öğeler olduğunun göstergesidir. 

Her ne kadar bu etiketler ile standartlaştırılsa da biz bu etiketlere bağlı kalmak zorunda değiliz. Genelde butonlar <a href="">Gönder</a> şeklinde kullanırız.

<button> ve <input type="button" /> kullanımlarında html bizim için bir buton görünüm oluşturur, ancak burada şöyle bir sorun varki farklı tarayıcı ve işletim sistemlerinde farklı farklı göründüğü için css ile ortak bir kod yazmak genelde tercih edilir. 

Butonların Halleri

Butonların kullanıcı hareketine göre çeşitli halleri vardır. Aktif buton, fare üzerine geldiğindeki hali(:hover), odaklanma durumundaki hali(:focus) olmak üzere 3 hali vardır. İyi bir tasarım için butonların tüm hallerini kullanıcıya hissettirecek ufak farklılıklar tasarımsal olarak hazırlamalıdır.

:active Butonun aktif hali
:hover Butonun fare üzerine geldiğindeki hali
:focus Buton üzerine odaklanmış hali

Basit butona bir örnek yapalım;

CSS ile Erişilebilir Formlar Yapmak – I kullandığım butonu örnek olarak alabiliriz basit butonlara

HTML kodu

<input type="submit" class="gonder" value="Gönder" />

CSS kodu

input.gonder
{
    color: #224059;
    background-color: #b5c9e2;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;
    font:bold 12px Arial, Helvetica, sans-serif;
}

<input type="submit" /> yerine genelde <button> elemanını tercih ediyorum. Yukarıdaki örnekte olduğu gibi <input type="submit"" /> kullanımıda doğrudur, ancak form elemanlarında bir çok <input> olduğu zaman butona erişmek zor oluyor ek olarak bir sınıf tanımlamak gerekiyor, <button> tanımına ise daha kolay erişebiliyoruz. 

3 boyutlu buton oluşturmak

Bir iki ufak nüansla butonlarımıza 3 boyutlu bir görünüm kazandırabiliriz. Buradaki örneğimizde biz bunu bir bağlantı(<a>) ve içine <span> elemanı ekleyerek sağlayacağız. Üst ve sol kenar çizgileri açık renkli alt ve sağ kenar çizgileri daha kapalı renkli atamalar yaparız. Ayrıca bağlantı içindeki <span> etiketinin alt ve sağ kenar çizgilerinede daha kapalı renkli bir atama yaparak 3 boyutlu bir buton elde ederiz. Fare üzerinde geldiğinde kenar çizgilerine atadığımız renk değerlerini karşılıklı olarak değiştirerek daha bir efektli görünüm elde ederiz.

HTML Kodu

<a class="buton" href="#"><span>3 boyutlu buton</span></a>

CSS kodumuzu yukarıdaki belirttiğimiz gib yazalım

a.buton{
    float:left;
    font-size:14px;
    font-weight:bold;
    border-top:1px solid #999;
    border-left:1px solid #999;
    border-right:1px solid #333;
    border-bottom:1px solid #333;
    color:#333;
    width:auto;
    text-decoration:none
}
a.buton:hover{
    border-top:1px solid #333;
    border-left:1px solid #333;
    border-right:1px solid #999;
    border-bottom:1px solid #999;
    color:#333;
}
a.buton span{
    background:#d4d0c8 url(buton_ard.gif) repeat-x;
    float:left;
    line-height:24px;
    height:24px;
    padding:0 10px;
    border-right:1px solid #777;
    border-bottom:1px solid #777;
}
a.buton:hover span{
    border:none;
    border-top:1px solid #777;
    border-left:1px solid #777;
    background:#d4d0c8 url(buton_fare_ard.gif) repeat-x;
    cursor:pointer;
}

Örneği görmek için tıklayınız.

Görselliği Arttırılmış Esnek Yapılı Butonlar

Butonların önemine yukarıda değindik, bu öneminden dolayı bir çok tasarımcı ve arayüz geliştirici butonları nasıl daha hoş ve çekici yapacağı konusunda çalışmış ve güzel örnekler çıkarmışlardır. 

Yukarıdaki görünen butonun kodunu yazalım. Butonu kodlarken dikkat edeceğimiz bir kaç husus var;

• Buton farklı alanlarda kullanılabileceği için genişleyebilir olmalıdır
• Kullanışlı olması için az kodlama ile sonuca gidilmelidir
• Hızlı yorumlandırılmalıdır. Bunun için tek resimden oluşturacağız örneğimizi
• Belli başlı tarayıcılarda çalışmalıdır. (ff, chrome, safari, opera, ie6, ie7, ie8)
• Javascript gerektirmemelidir

Yukarıda görüldüğü gibi resmimizi iki kısma böleceğiz. Sol kısmını bir elemana(muhtemlen <a>), sağ kısmını başka bir elemana(fazladan bir elman olarak <span>) ekleyeceğiz. Bir elemana birden fazla background resmi atayamadığımız için bu yöntemi uyguluyoruz.

Resmin sol kısmını butonun muhtemelen yüksek genişliğini düşünerek uzatmalıyız. Böylece buton metin genişledikçe backgorund resmi uzayacaktır ve görünüm bozulmadan standart buton görünümü sağlanmış olacaktır.

Yukarıdaki resimde bölümleri göstermek için rakamlar gösterilmiştir. Normalde resmimiz aşağıdaki gibi olacaktır.

Yukarıdaki resmi eskiden iki farklı resim olarak hazırlar ve ilgili elemanların background resmi olarak eklerdik, ancak sprite tekniği ile bu resmi tek bir resim olarak kaydediyoruz ve background-position özelliği yardımı ile ilgili elemanın background’unda ilgili background resmini gösteriyoruz. Kodu yazarsak daha iyi anlayacaksınız.

HTML kodu;

<a href="#"><span>Örnek Buton Metni</span></a>

CSS Kodu

a{display:block; float:left; width:auto; background:url(cancanli_butonlar_normal.gif) 0 0 no-repeat; text-decoration:none; font-size:14px; font-weight:bold}
    a span{display:block; float:left; cursor:pointer; background:url(cancanli_butonlar_normal.gif) right -36px no-repeat; height:28px; padding:0 20px; line-height:28px; color:#363636}

a span için eklenen

float:left; cursor:pointer;

özellikleri ie6′daki genişlik sorununu gidermek için eklenmiştir.

Bu örneğe fare üzerine geldiğindeki halinide ekleyelim

/* fare geldi kac */
a:hover{background:url(cancanli_butonlar_ard.gif) 0 -68px no-repeat;}
    a:hover span{background:url(cancanli_butonlar_ard.gif) right -100px no-repeat; color:#706e6e}

Son olarakta odaklanma halini ekleyerek bu örneği bitirelim.

/* buraya odaklan odaklan */
a:focus{background:url(cancanli_butonlar_ard.gif) 0 -134px no-repeat;}
    a:focus span{background:url(cancanli_butonlar_ard.gif) right -164px no-repeat; color:#363636}

Örneği görmek için tıklayınız.

CSS3 ile Buton Yapmak

CSS3′ün gelişmiş özellikleri sayesinde resimlere ihtiyaç duymadan janjanlı güzel butonlar geliştirebiliyoruz. Ayrıca bu işi çok kolay bir şekilde bir iki satır kod ile yapabilme imkanı sağlıyor CSS3 bize. 

HTML kodu

<a href="#" class="buton">CSS3 Buton</a>

Evet html kodummuz bu kadar.

CSS Kodlarını yazalım

a.buton{
    background:#2981E4;
    padding:5px 10px;
    text-decoration:none;
    color:#fff;
    font:bold 14px Arial, Helvetica, sans-serif;
}

Şimdide CSS3 özellikleri ile bu örneğimizi geliştirelim.

İlk olarak köşeleri yuvarlatıyoruz.

a.buton{
    background:#2981E4;
    padding:5px 10px;
    text-decoration:none;
    color:#fff;
    font:bold 14px Arial, Helvetica, sans-serif;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
}

Gölge verelim

a.buton{
    background:#2981E4;
    padding:5px 10px;
    text-decoration:none;
    color:#fff;
    font:bold 20px Arial, Helvetica, sans-serif;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    box-shadow: 3px 3px 4px #000;
    -moz-box-shadow: 0 1px 2px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
}

Metine gölge verelim

a.buton{
    background:#2981E4;
    padding:5px 10px;
    text-decoration:none;
    color:#fff;
    font:bold 20px Arial, Helvetica, sans-serif;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    box-shadow: 0 1px 2px #000;
    -moz-box-shadow: 0 1px 2px #000;
    -webkit-box-shadow: 0 1px 2px #000;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}

Şimdide fare üzerine geldiğindeki halinide ekleyelim.

a.buton:hover{
    background-color:#006699;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

Örneği görmek için tıklayınız.

İkinci bir örnek yapalım.

Bu sefer CSS3′ün renk geçişi(gradients) özelliğindende yararlanalım.

a.buton{
    background:#d21b00;
    background: -moz-linear-gradient(top, #d21b00, #8e0700);
    background: -webkit-gradient(linear, left top, left bottom, from(#d21b00), to(#8e0700));
    padding:20px 25px;
    text-decoration:none;
    color:#fff;
    font:bold 36px Arial, Helvetica, sans-serif;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.75);
    border:5px solid #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

a.buton:hover{
    background: -moz-linear-gradient(top, #8e0700, #d21b00);
    background: -webkit-gradient(linear, left top, left bottom, from(#8e0700), to(#d21b00));
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.75);
}

Örneği görmek için tıklayınız.

CSS3 özellikleri yardımı ile resim kullanmadan bir çok örnek yapabiliriz.  http://speckyboy.com/2010/02/15/20-css3-tutorials-and-techiques-for-creating-buttons/ sitesindeki örneklere bir göz atın.

Ayrıca CSS3 ile çevrimiçi buton geliştirme araçları var incelemeye değer siteler.

Sonuç

Baştada bahsettiğimiz gibi butonlar web sitelerinin önemli parçalarından biridir. Yerinde ve güzel kullanılmaları halinde web sitelerine farklı bir görsellik ve işlevsellik katacaklardır. Bir çok sitede bir çok buton tasarımları bulunmaktadır, bu butonları gördükçe ne kadar çeşitli butonlar olabileceğini görüyoruz. http://www.smileycat.com/design_elements/buttons/#002024 sitesindeki örnekler dikkat çekici.

CSS3′ün yaygınlaşması butonları daha esnek hale getirecektir. Daha kolay düzenlenebilir ve esnek bir yapı kazandıracaktır. CSS3 özellikleri yavaş yavaş web programcıların hayatına girmektedir. Ümit ediyoruz ki yakın bir zamanda bu uygulamaları tüm tarayıcılar destekler ve bizlerde projelerimizde rahatça kullanabiliriz.

Son olarak buton dünyası çok büyük ben burada sizlere kıyısından köşesinden bahsetmeye çalıştı isemde çok az bir kısmını anlatabildim, kaynaklar kısmındaki linklerin her birinde değerli çalışmalar bulunmaktadır aşağıdaki bağlantıları incelemenizi önemle rica ediyorum.

Kaynaklar

• http://www.smashingmagazine.com/2009/11/18/designing-css-buttons-techniques-and-resources/
• http://www.monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors(iyi)
• http://www.smashingmagazine.com/2009/06/03/9-crucial-ui-features-of-social-media-and-networking-sites/ (genel anlamı)
• http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
• http://www.dynamicdrive.com/style/csslibrary/item/bold_css_buttons/
• http://particletree.com/features/rediscovering-the-button-element/ (button elemanı hakkında)
• http://www.456bereastreet.com/archive/200705/creating_bulletproof_graphic_link_buttons_with_css/ (güzel)
• http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/
• http://blog.anomalyinnovations.com/2010/03/creating-a-realistic-looking-button-with-css3/
• http://net.tutsplus.com/tutorials/html-css-techniques/build-kick-ass-practical-css3-buttons/
• http://www.smashingmagazine.com/2006/11/03/design-patterns-download-buttons/
• http://codecanyon.net/item/fancy-2-line-css-buttons/109049
• http://codecanyon.net/item/css3-buttons/109193
• http://vandelaydesign.com/blog/galleries/button-design-showcase/
• http://www.leemunroe.com/call-to-action-buttons/
• http://www.uxbooth.com/blog/good-call-to-action-buttons/ (tasarımda dahil)
• http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/
• http://www.smileycat.com/design_elements/buttons/#002024
• http://www.tripwiremagazine.com/design/css-techniques/24-essential-submit-button-enhancements.html
• http://www.vanseodesign.com/css/css-navigation-buttons/
• http://articles.techrepublic.com.com/5100-10878_11-5323375.html
• http://www.thesitewizard.com/css/3d-buttons.shtml
• http://www.builderau.com.au/program/css/soa/Designing-3D-buttons-with-pure-CSS/0,339028392,339131100,00.htm
• http://cssglobe.com/post/1614/4-uber-cool-css-techniques-for-links
• http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/
• http://www.dynamicdrive.com/style/csslibrary/item/vista_aero_buttons_menu/
• http://www.cdsnettr.com/post/2008/09/Top-10-CSS-Button-Tutorial.aspx
• http://www.fatihhayrioglu.com/css-ile-erisilebilir-formlar-yapmak-ii/
• http://www.fatihhayrioglu.com/css-ile-sekmelitab-menu-yapimi/
• http://monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors

h1 {
	text-indent: -9999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
}

Burada şöyle bir sorunumuz oluyor eğer bu elemana text-align:right tanımıda atamış isek. Maalesef metin ekran dışına çıkmıyor.

h1 {
	text-indent: -9999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
    text-align:right
}

Bu sorunu gidermek için sola dayalı sistemlerde negatif text-indent değeri veriyoruz, sağa dayalı sistemlerde de pozitif değer vererek bu durumu çözebiliyoruz. Bu çözüm yeni nesil tarayıcılarda sorun çıkarmazken İnternet Explore’da scroll çıkarmak kaydı ile sorun oluşturuyor.

h1 {
	text-indent: 9999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
}

Tüm tarayıcılarda çözüm için ise yapmamız çok kolay bir şey aslında. text-align:left tanımı atamak. Metin yerine resim koyma metodu uygulanan metinlerin hizalaması sola olmalıdır.

h1 {
	text-indent: -999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
    text-align:left
}

Bu sorun ile genelde metin yerine resim metodu uygulanmış elemanını kapsayan bir elemana text-align:right uygulandığında rastlarız. Kalıtsallık ile bu özellik tüm alt elemanlarınıda etkilediği için biz bu elemana text-align:right değerini atamasak dahi elemanımız bu değeri üst elemanından kalıtsal olarak alır ve böyle bir soruna neden olur.

Kaynak:

• http://indianapoliswebdesign.blogspot.com/2009/01/web-design-tips-text-replacement-with.html

border-radius özelliği CSS3 ile birlikte geldi ve HTML elemanlarına yuvarlak kenar özelliği verme işine yarıyor. Web 2.0 ve yeni stiller ile birlikte bir çok sitede yerini alan yuvarlak kenarlı yapılar kullanılıyor, buda bu özelliği önemli kılıyor.

Köşeli yapılardan kaçan bir çok tasarımcı artık yuvarlak köşeli tasarımları tercih ediyor. Bu arada şunuda söylemeden geçemeyeceğim bazı sitelerde hiç hoş durmuyor yuvarlak kenar, her şeyi yerinde ve göz zevkine uygun kullanmak en iyisi.

Yapısı : <border-radius>{1,4} [ / <border-radius>{1,4}]?
Aldığı Değerler : [ <uzunluk> | <yüzde> ] [ <uzunluk> | <yüzde> ]? 
Başlangıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler ve tabiki tablo elementine border-collapse değeri collapse olarak atalı ise uygulanır
Kalıtsallık: Yok

Tek değer atanmış ise, dört köşeyede aynı değer uygulanır.
İki değer atanmış ise, ilk değer sol üst ve sağ alt köşeye; ikinci değer sağ üst ve sol alt köşeye uygulanır.
Dört değer atanmış ise, sırası ile sol üst, sağ üst, sağ alt ve sol alt köşelere uygulanır.
Üç değer atanmış ise, ikinci değer sağ üst ve sol alt köşeye uygulanır.

Tarayıcı Uyumu:
Internet Explorer desteklemiyor (İE9 da gelecek) 
Firefox 2+
Safari 3+ (kısmen)
Opera 10.50+
W3C’s CSS Level 3+
CSS Profile 3.0

- Safari yüzde değerleri desteklemiyor.
- Safari/Webkit tabanlı tarayıcılar her 4 köşeye sadece bir tanımı kabul ediyor.
- Safari/webkit tarayıcıları (/) ile ayrılan değerleri kabul etmiyor. Bu gibi değerleri kullanmak için aşağıdaki gibi bir atama yapmalıyız. Elips şeklinde sonuçlar elde etmke için (/) ayracı kullanılır.

	-webkit-border-radius:  40px 10px;
	-moz-border-radius:  40px/10px;
	border-radius:  40px/10px;

Uygulama

Bugünkü durumda border-radius tanımı tek bir tanımlama olarak atanmamaktadır, farklı tarayıcılar ön ek kullanarak bu özelliği desteklemektedir. Webkit tabanlı tarayıcılar(Safari ve Google Chrome) için -webkit, Gecko tabanlı(Firefox) tarayıcılar için -moz ön ekleri kullanılmaktadır. 

Bu durum bazen çok uzun kodlar üretmemize neden oluyor. İleride umarım bu durum düzelir. 

İlk örneğimizi yapalım

div#kutu {
    width: 400px;
    padding: 20px;
    border-radius: 10px; /* Standart */
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari ve Chrome */
    background: #F00;
    margin-bottom: 10px;
}

Örneği görmek için tıklayınız.

İkinci örnek

div#kutu{
    width: 400px;
    padding: 20px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    background: #F00;
    white-space:pre
 }

Örneği görmek için tıklayınız.

http://muddledramblings.com/table-of-css3-border-radius-compliance  ve http://shapeshed.com/examples/border-radius/ adresindeki örnekler inceleyerek bu özellik ile neler yapabileceğimizi görebiliriz.

İnternet Explorer Desteği

Yukarıda anlattığımız tanımları maalesef İnternet Explorer desteklememektedir, daha ön görünümü yayınlanan ie9′da desteklediğini açıkladı.

İnternet explorer için çözüm üreten bir çok javascript kodu mevcut, ben burada sizlere belli başlılarının linklerini vereceğim ve ufak bilgiler vereceğim.

DD roundies

Bu script güzel çalışıyor. Bir çok farklı durumlar için güzel bir çözüm üretiyor. Herhangi bir javascript kütüphanesine ihtiyacı yoktur. CSS3 border-radius özelliğini destekleyenler için bu özelliği desteklemeyenler için ise javascript kodunu ekleyerek bize güzel bir çözüm üretir. Köşe yumuşatması güzel

Curvy Corners ve jQuery Plugin Curvy Corners

Diğer güzel çözüm önerilerinden ikiside bu scriptlerdir. Köşe yumuşatması güzel. Background resimleri ile iyi çalışıyor, ancak CSS3 ile olan uygulamalarda sorun çıkarıyor. CSS3 border-radius destekleyen tarayıcı kontrolü yapmıyorlar ve fazladan yüklenmeye neden oluyorlar.

Nifty Corners ve jquery Corner

Köşe yumuşatması güzel değil. Yuvarlak kenar için üretilen kodda gereksiz bir çok eleman var. Pek önerilebilecek bir çözüm değil.

HTML Remix

Bu çözümün en güzel yanı yuvarlak kenar için ekstra kod yazmaya gerek olmaması. Yazdığımız border-radius değerini alıp desteklemeyen tarayıcılara göre kod yazıyor. Script tanımını css kodu içerisinden yapıyoruz.

.curved {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    behavior:url(border-radius.htc);
}

Köşe yumuşatması güzeldir. 4.8 kb’lık dosya boyutu ile çok cazip boyuta sahip.

css3pie

CSS 3′ü desteklemeyen tarayıcılar için komple bir çözüm üreten bu script İnternet Explorer için üretilen çözümlerden birisidir. Tek sorunu bütünleşik bir çözüm sunduğu için dosya boyutunun biraz büyük olmasıdır. Köşe yumuşaklığı güzel. CSS3′ü destekleyen tarayıcılar için css kodunu desteklemeyen tarayıcılar için ise script kodunu uyguluyor olması güzel.

Sonuç

border-radius tanımını destekleyen tarayıcılar açısından bir sorunumuz yoktur. Sorunumuz desteği sağlamayan ie ile dir. 

Javascript ile ürettiğimiz çözümler normal tanımın yerini tutmayacaktır hiç bir zaman. Sayfa içerisinden bir çok elemana yuvarlak kenar uygulandığında ie için üretilen çözüm sayfanın fazladan yavaşlamasına neden olacaktır. 

Bir elemana yuvarlak kenar ve gölge uygulandığında ie için üretilen bir çok çözümde bazı sorunlar ile karşılaşılabilir. Bu gibi durumlarda resim ile çözüm üretmeniz tavsiye olunur. 

İE için üretilen çözümler için yukarıda yazdıklarım kendi gördüklerim ve internette araştırıp gördüklerim bilgilerden derlemedir. Bu değerlendirmelere sizin kendi uygulamalarınızdaki sonuçlarıda ekleyerek bir scripti seçmenizi öneririm. 

Bence en güzeli eğer tercih imkanınız varsa destekleyen tarayıcılar için kodu yazmak desteklemeyenler için olduğu gibi bırakmak(twitter.com sitesinde olduğu gibi.)

Kaynaklar

• http://webdesignernotebook.com/css/an-ode-to-border-radius/
• http://leaverou.me/2009/02/css3-border-radius-today/
• http://www.the-art-of-web.com/css/border-radius/ (border-radius)
• http://www.css3.info/preview/rounded-border/
• http://24ways.org/2006/rounded-corner-boxes-the-css3-way
• http://www.css3.info/border-radius-apple-vs-mozilla/
• http://woork.blogspot.com/2009/08/css3-rounded-corners-for-every-browser.html
• http://www.smileycat.com/miaow/archives/000044.php (tüm makalelerin listesi)
• http://www.netzgesta.de/corner/ (javascript)
• http://www.curvycorners.net/demos/ (javascript)
• http://www.html.it/articoli/niftycube/index.html (javascript)
• http://www.dillerdesign.com/experiment/DD_roundies/#animation (javascript)
• http://www.w3.org/TR/css3-background/#border-radius
• http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser (javascript)
• http://doctype.com/having-trouble-styling-cross-browser-buttons-input-submit (sorunlar)
• http://muddledramblings.com/table-of-css3-border-radius-compliance (taraycı destek tablosu)
• http://stackoverflow.com/questions/2687804/emulating-css3-border-radius-and-box-shadow-in-ie7-8

<ul>
  <li>deneme</li>
  <li>olarak</li>
  <li>bir örnek </li>
</ul>

Yatay bir menü olacağı için

  ul li{display:inline;}

eklemesini yaptım, daha sonra da padding değerleri ekleyince fark ortaya çıktı.

  ul li{ padding:0 12px; background-color:#999}

İşin aslı İnternet Explorer 6 ve 7’de istediğim gibi olurken yeni nesil tarayıcılarda arada fazladan boşluklar atanmış gördüm. margin:0 değeri atadım ama olmadı biraz araştırınca gördüm ki display:inline elemanlar(display:inline-block’ta da oluyor) arasında kod kısmında boşluk varsa bu boşluklar yorumlanan sayfada da görünüyor.

Aradaki boşlukları kaldırmak için bir kaç yöntem var. Yatay menü oluşturmak için diğer bir yöntem olan float yöntemini denemek bunlardan biri

  ul li{ float:left}

Diğer bir çözüm yolu ise aradaki boşlukları kaldırmak.

<ul>
 <li>deneme</li><li>olarak</li><li>bir örnek </li>
</ul>

jQuery ipuçlarını yayınlamaya devam ediyorum.

1- Dinamik oluşturulan elementlere live() ile olay atama

Sayfaya dinamik olarak eklenen içeriklerde veya ajax ile doldurduğumuz içeriklerdeki elemanlara bir olay atadığımızda(click, mouseover vd.) çalışmayacaktır. jQuery geliştiricileri bunun için live() fonksiyonunu geliştirmiş.

$('a.acilSusam').live('mouseover', function() {
 // yapilacak islemler
});

2 – Tarayıcı Penceresinin Boyutlarını Değişmesini Yakalamak

Belki ara sıra lazım olacak bir kod ama bazen gerekiyor işte. Pencere boyutu her değiştiğine bazı işlemleri yapmak sistemimizi yorabilir diye setTimeout yardımı ile belli aralıklarla bunu yaptırıyoruz.

function pencereBoyutuDegisti() {
	alert("Değişti");
};

var resizeTimer = null;
$(window).bind('resize', function() {
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(pencereBoyutuDegisti, 100);
});

3 – Element miktarını bulmak

Bir dokümanda seçilen elemandan kaç adet olduğu bulmak için;

	$('element').size();

4 – Bir elemanın index değerini bulmak

index değerini bulmanın farklı bir yolu

$("ul > li").click(function () {
	var index = $(this).prevAll().length;
});

5- Bir elemanın görünür olup olmadığını yakalamak

if($(".eleman").is(":visible")) {
    alert('Burda');
}

6- Kaç tane alt elemanı(çocuk elemanı) var

<div id="foo">
<div id="bar"></div>
<div id="baz">
<div id="biz">
</div>
<span><span>
</div>

//kac tane alt elemanı oldugunu bulmak icin
$("#foo > div").length

7- jQuery Kopya Kağıdı(Cheat Sheet)

jQuery’nini bir çok özelliği var ve bunları aklımızda tutma imkanımız yok. Bir kopya kağıdı işimize yaraya bilir.

http://www.futurecolors.ru/jquery/

Burada son sürümün kopya kağıdı mevcut. Bende css3 özelliklerini kullanarak biraz renklendirdim. Benim renklendirdiğim(CSS3 içerir, herisi göremez)

8 – Select Elemanı ipuçları

// secili olan ögenin metnini almak
$("#myselect option:selected").text();

// secili olan ögenin degerini almak icin
$("#myselect option:selected").val();

// secili ogenin index degeri
$("#myselect option").index($("#myselect option:selected"));

// indeksi 2 olan ögeyi seçili hale getirmek
$("#myselect option:eq(2)").attr("selected", "selected");

Kaynaklar

• http://blog.kenmoredesign.com/2009/02/02/useful-jquery-snippets/
• http://tympanus.net/codrops/2010/01/07/some-useful-javascript-jquery-snippets-part-2/
• http://www.catswhocode.com/blog/10-jquery-snippets-for-efficient-developers
• http://tympanus.net/codrops/2010/01/08/some-useful-javascript-jquery-snippets-part-3/
• http://www.opensourcehunter.com/2010/02/27/26-cool-and-usefull-jquery-tips-tricks-solutions/

Sorunu şöyle tanımlayabilirim; overflow kullandığım bir eleman içindeki bir elemana position:relative tanımladığımda relative verdiğim eleman overflow uyguladığım elemanın dışına çıkıyor ve scroll olmuyor.

Şöyle küçük bir örnek durumu daha iyi gösterecektir.

<div id="icerikAlani">
    <p>İlk paragaraf</p>
    <p class="relative">position:relative uygulanan kısım</p>
</div>

CSS kodu da şöyle

#icerikAlani{
    height:80px;
    overflow:auto;
    width:200px;
    height:80px;
    background-color:#ccc
}
.relative{
    position:relative;
    background-color:lightblue;
    width:150px;
}

Sonuca ie 6 ve 7 ile baktığımızda aşağıdaki gibi bir sorun ile karşılaşacağız.

Örneği görmek içni tıklayınız.

Sorunun çözümü ise çok basit. overflow uyguladığımız elemana position:relative tanımı yaparak sorunu giderebilirsiniz.

#icerikAlani{
    height:80px;
    overflow:auto;
    width:200px;
    height:80px;
    background-color:#ccc;
    position:relative;
}
.relative{
    position:relative;
    background-color:lightblue;
    width:150px;
}

Kaynaklar

• http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
• http://www.rowanw.com/bugs/overflow_relative.htm
• http://dustyreagan.com/workaround-to-ies-overflow-auto-and/