CSS tabanlı çalışmalarımı devam ettiriyorum. Bu aralar biraz yoğun olduğum için blogumda pek ilgilenemiyor ve çalışmalarımda biraz aksaklık yaşıyorum. En kısa sürede işleri yoluna koyup paylaşmaya devam edeceğim.

Şimdiye kadar hiç oturupda kod yazark kendi tarzınıza bir CSS menü oluşturdunuz mu? Yoksa her defasında başkalarının yaptığı hazır CSS menüleri ya da hazır sistemleri mi kullandınız? Bence şimdiye kadar hazır şeylerden faydalandıysanız bu yazıyı okumaya devam etmenizi öneririm. Oldukça basit bir mantıkta ve basit kodlar ile çok hoş bir CSS menü hazırlanmış.

Buradaki yazıda da belirtildiği gibi bu CSS menüyü istediğiniz gibi değiştirerek (özelleştirerek) kullanabilirsiniz. Oldukça hoş butonlar… Şimdi bu butonların kodlarını biraz inceleyelim. Yazının sonundan da ilgili butonları bilgisayarınıza indirerek kendinizde inceleyebilirsiniz.

Çalışma tek bir HTML sayfasından oluştuğu için bende bu sayfa içerisindeki kodlar hakkında kısa kısa bilgiler vererek sizin daha iyi anlamanızı sağlayacağım. Kodları açıklamaya başlayalım.

body{
font-family:”Lucida Grande”, “Lucida Sans Unicode”, Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

Yukarıdaki kodlar HTML sayfası içeriğinin genel yapısını tanımlayan CSS kodlarıdır.

a.button{
background:url(img/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
}
a:hover.button{
color:#0066CC;
}

Bu kodlar sayfa içerisindeki butonların ortak özelliklerinin belirtildiği CSS kodlarıdır. Bu kodlar içerisinde butonların arkaplan resimi, yüksekliği, genişliği, hover halindeki tarzı vs. belirlenmiş.

.add{
background:url(img/add.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.delete{
background:url(img/delete.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.user{
background:url(img/user.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.alert{
background:url(img/alert.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.msg{
background:url(img/msg.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.download{
background:url(img/download.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}

.lens{
background:url(img/lens.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.info{
background:url(img/info.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}

Bu kodlar butonlarımızın adeta bel kemiğini oluşturuyor. Bu kodlar sayesinde uyarı, download, ekleme, silme vs. bütün butonları ayarlıyoruz. Mesela .download içerisindeki kodlar ile download butonun yapısını oluşturuyoruz.

Bu güzel butonların kendi sayfası burası. Kendi bölgesinden indirmek için buraya tıklayabilirsiniz. Renkli Teneke’den indirmek isterseniz burayı kullanabilirsiniz. Türkçe olarak menülerin tamamına buradan bakabilirsiniz. Renkli Teneke’den indireceğiniz butonlarda tamamen Türkçe’dir.

RenkliTeneke.Com blogundaki yeni yazılardan haberdar olmak için RSS Abonesi olabilirsiniz. İsterseniz Twitter'dan ya da FriendFeed'den takip edebilirsiniz. Ya da "Yeni yazılar e-mail adresime gelsin" diyorsanız e-mail abonesi olabilirsiniz.

Merhaba sevgili ziyaretçi. Şuanda renkliteneke.com bloguna " Ahmet" tarafından " 19 Kasım 2008" tarihinde yazılmış olan "Özelleştirilebilir CSS Butonlar {Ücretsiz}" başlıklı bu yazıyı okuyorsun. Bu yazının başka bir yerde yayınlaması yasaktır. Her yazı ayrı bir özen içerisinde hazırlanıyor ve bu emeğin iki tık ile heba edilmesi pek hoşuma gitmez. Bu açıklama ise bilgilenmeniz için yazılmıştır.