Birçok sitede frame sayfaları görmüş olabilirsiniz. İnternet hayatınızda mutlaka görmüş olmanız gerek . Tasarım ve kodlama ile uğraşanlar bunu daha iyi bilir. Biz de Css ile sahte bir frame (div scroll) yapıcaz.. Bunun için cssyi az çok bilmeniz gerek.

Başlıyoruz … Önce kod gelicek sonra ise görtünsü ..

Sıkça takip ettiğim yabancı bir blogger olan Woork‘un blogundaki CSS kategorisinde dolaşırken hoşuma giden bir makale gördüm . Sizler için bu makaleyi çevirdim. Woork buna Beautiful CSS buttons with icon set (Türkçe :ikon seti içeren hoş css butonları) diyor bende ikonlar ile css butonları diyorum . Neyse lafı fazla uzatmayalım .

Sitenize eğer hoş ve basit bir tasarım yapıyorsanız bu butonlar işinize yarayabilir . Bu css butonlarında ikon ve bir adet css için arkaplan resmi kullanıyoruz. Eğer ikon nerden bulabilirim derseniz İconfinder ‘i kullanabilirsiniz. Başlayalım ;

Başlamadan önce kaynak kodlarını indirebilirsiniz..

1 ) HTML Kodumuz

 <a href="#" class="button">
<span class="add">Add to your bookmark</span>
</a>

Butonu oluştururken kullanacağımız HTML kodumuz bu olucak . Yani ne kadar buton eklemek istiyorsak o kadar da bu kodumuzdan olacak. span class=”add” yazan yerde add kısmı ikonumuzun css kısmıdır. Yani eğer ikon değiştirmek istiyorsanız bu class isminide değiştireceksiniz.

Resimde de görüldüğü gibi add sınıfı kullandığınız ikona göre değişecektir .

Yukarıdaki resimde ise butonumuzun tasarımını yani düzenini görüyoruz ..

Burda kodun sonucunda oluşacak bir buton. ve bu span class=”add” kısmında bahsettiğim olayı daha detaylı görüyorsunuz .

Bende bir örnek kod yazıyorum . Bu kod parçasına dikkat edebilirsiniz. Ben 2 farklı buton eklemek istiyorum

<a href="http://google.com.tr" class="button">
<span class="Google">Google'ye git</span>
</a>

<a href="http://facebook.com" class="button">
<span class="facebook">Facebook'a git</span>
</a>

2 ) CSS Kodumuz

Yazının başından itibaren css’den bahsediyoruz. Kod parçaları felan da verdik. Fakat bizim css kodumuz nerede ? İşte burada ! CSS Kodundaki resimleri yukarıdaki İNDİR butonundan indirebilirsiniz ..

Bu ana css kodumuz;

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;
}

Şimdi ise ikonlarımıza butona eklemek için yukarıdaki css kodunun devamını veriyorum.

/* -------------------- */
/* BUTONLAR */
/* -------------------- */
.ikon1{
background:url(img/ikon1.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.ikon2{
background:url(img/ikon2.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;

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

3 ) Son Olarak

Butonunuzda kullanmak istediğiniz ikonların boyutu ideal 16×16 ‘dır. Yazıda kullanılan butonları sizde kullanmak istiyorsanız buraya tıklayarak indirebilirsiniz..

Kolay gelsin ..

Merhaba dostlar .. Bundan bir kaç ay önce hatırlarsanız css takipçi menü diye bir css kod parçası hazırlamıştım .. Merak edenler o yazıma şuradan ulaşabilirler ..

Bu kod ne yapıyordu kısaca hatırlamak gerekirse ; Kod sağ alt tarafta küçük resimlerden oluşan bir menü , takipçi olmasının nedeni ise sayfayı ister yukarı isterseniz de aşağı kaydırınca bu küçük menüde sizinle birlikte geliyor ..

Peki neden değiştirdim ? Çünkü IE6 & IE7 sürümlerinde çalışmıyordu bu kod .. Şuan kullanmıyorum fakat başkalarıda kullansın diye kodları düzenleyip internet explorer’e uyumlu hâle getirdim .. ve yazının devamda bu menünün kodunu bulabileceksiniz ..

Arkadaşlar başlık biraz saçma gelebilir yani başlıkta açıklamak istediğimi açıklamadım ..

Eskiden bilirsiniz hazır html temalarında solda resimli bir menü sağda ise büyük bir kısımda içerik ve arkaplan resmi bulunurdu. O zamanlar her ne kadar css olsada sınırlarını zorlayamıyordu hiç kimse ..

Bugün internette dolaşırken ilginç bir site gördüm .. Site bedava template dağıtıyor ama nasıl ? Bir önceki paragrafta dediğim gibi div etiketi diye birşey yok .. tamamen table etikerleri ile yapılmış arkaplan resmi ve bir sol menü .. Belki kullanılabilir kişilerin zevkıini bilemiyoruz ..

Sitemizin adresi WEBalley .. http://weballey.net/templates/ adresinde ise temaları renklerine göre isimlendirmişler .. o isimlerden birine tıkladığınızda temanın önizlemesi geliyor ve önizlemede download template linkini gördüğünüzde o temayı bilgisayarınıza indirebiliyorsunuz .. (bknz benim beğendiğim bir tema: http://weballey.net/templates/gold2/ )

Hatta butonlar resim ve düzenlemesi size zor geliyorsa http://weballey.net/templates/editor.cgi sayfasına girip template kısmında temanızı seçip butonlarınızı oluşturabiliyorsunuz ..

.. Eski yaptığım tasarımları özledim