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.