Linklere İkon Vermek
Sitelerde bulunan linklerin bizi nereye yönlendireceğini zaman zaman bilemiyoruz. Gerçi web tarayıcımızın alt kısmındaki barda ilgili adresi görebiliriz ancak site yapımcıları açısından daha net bir yönlendirme elde etmek için linklerin yanına, gidilen sayfa ile ilgili küçük simgelerin yerleştirilmesi hem görsel zenginliği arttıracak, hem de ziyaretçinin linke tıklaması sonunda karşısına gelecek sayfa hakkında bilgi sahibi olmasına olanak verecektir.
Yukarıdaki örnekten haraketle gördüğünüz gibi açılacak sayfanın uzantısına göre linklerin yanında bir ikon çıkıyor. Konu ile ilgili detaylı bilgiyi şuradan olabilir, kullanımı da şuradan indireceğiniz dosya ile gerçekleştirebilirsiniz.
20/5/2007 | Kategori: CSS | Yorum (yok) | Yorum Yaz | Kalıcı Bağlantı
Online CSS Menü Üreteci
Css ile menü yapımı hakkında daha önce birkaç yazı yazmaya çalışmıştım. Şimdi vereceğim site ise kod konusunda biraz daha tecrübesiz site yapımcıları için uygun olabilir. Şuradan solda gördüğünüz gibi menüleri birkaç adımda oluşturabilir, istediğiniz şekilde değişiklikler yapabilirsiniz. Öncelikle dört stilden birini seçiyorsunuz. Daha sonra "Width" kısmından menünüzün genişliğini belirliyor, bir alt kısımdan da renklerinizi yazıyorsunuz (renk kodlarına şuradaki yazımdan ulaşabilirsiniz). Yazı tipini ve boyutunu belirledikten sonra menü başlıklarını ve bu başlıkların adreslerini alttaki kutucuklara yazıyorsunuz. Sonraki adımda kodlarınız karşınıza çıkacak. Bilmeyenler için tekrar hatırlatırsak "CSS" bölümündeki kodları sitenizin "style" etiketi içine, "HTML" bölümünü ise "body" etiketi içine yapıştırıyorsunuz.
19/5/2007 | Kategori: CSS | Yorum (2) | Yorum Yaz | Kalıcı Bağlantı
CSS ile 3 Boyutlu Düğme
Bildiğiniz gibi css ile birçok güzel şeyi yapabiliyoruz. Sayfa yapısı, menü derken bir de düğme yapımını (bu konu hakkında önceki yazılar 1, 2) css ile inceleyebiliriz.
Öncelikle işe yine css kodları ile başlıyoruz.
.rssbutton{
background-color: #ff6600;
border: 1px #ff6600 outset;
padding: 0 2px;
color: white;
text-decoration: none;
font: bold 10px Verdana;
}
.rssbutton:visited, .rssbutton:hover, .rssbutton:active{
color: white;
}
.cssbutton{
background-color: #d1ec4c;
border: 2px #d1ec4c outset;
padding: 1px 4px;
color: black;
text-decoration: none;
font: bold 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}
.cssbutton:visited{
color: black;
}
.cssbutton:hover{
border-style: inset;
background-color: #e3f48e;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/
}
.cssbutton:active{
color: black;
}
Sonuçta elde ettiğimiz bu:
16/5/2007 | Kategori: CSS | Yorum (yok) | Yorum Yaz | Kalıcı Bağlantı
CSS ile Dikey Menü Yapımı
Menünün hazırlanması için öncelikle CSS kodlarına, daha sonra bu kodların sayfamızda görülebilmesi için basit HTML kodlarına ihtiyaç duyuyoruz.
İlk olarak aşağıda gördüğünüz kodları siteniz CSS bölümüne, yani < style > etiketi ile başlayan kısmın herhangi bir bölümüne ekliyoruz. Herhangi bir bölüm dedim ama kodlarınızı daha sonra değiştirmek istediğinizde sorun yaşamamak için site görünümü ile orantılı ekleme yaparsanız daha rahat edersiniz. Demek istediğim örneğin footer diye tabir edilen bölüm, sayfanın en alt kısmını teşkil ettiği için CSS sıralamasında footer kodlarını en sona bırakırsanız daha anlaşılır olur.
Az önce de değindiğim gibi CSS kodlarını uygulayabilmek için ilgili HTML kodlarına ihtiyacımız var.
24/4/2007 | Kategori: CSS | Yorum (2) | Yorum Yaz | Kalıcı Bağlantı
Online CSS Tasarımı
İşte tam bu aşamada CSSFly devreye giriyor. Bu site ile tasarımınızdaki css kodları üzerinde değişiklik yapabiliyor ve bu değişiklikleri hiçbir yükleme yapmadan aynı anda görebiliyorsunuz. Sitenin "Edit website" bölümüne sitenizin adresini yazıyor ve sitenizin inceleyeceğiniz bölgesini seçiyorsunuz. Açılan sayfa üzerinde CSSFly'ın kendi düzenleme alanı bulunuyor. Siz de bu alan içerisinde kodlar üzerinde oynama yapıyorsunuz.
30/3/2007 | Kategori: CSS | Yorum (yok) | Yorum Yaz | Kalıcı Bağlantı
Önceki Sayfa | 1 : 2 |
