Altuğ Orgun Kişisel Blog

AoRGuN’un web günlüğü…

CSS sıfırlama tekniklerini kullanarak, tarayıcılar arasındaki görüntü farklılıklarını azaltabilirsiniz. Ki bu da hem zamandan kazanç, hem de daha rahat yönetim demektir. İşte bu sıfırlama tekniklerinden en çok kullanılanları…

Basit Sıfırlama:

* {
	padding: 0;
	margin: 0;
  }

Bu teknik padding ve margin değerlerini sıfırlar. En çok kullanılan yöntemdir.

Basit Sıfırlama v2:

* {
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
  }

border ve outline değerlerini sıfırlaması dışında ilk teknikle aynıdır.

Evrensel Kısaltılmış Sıfırlama:
Okumaya devam et »

(Büyütmek için resmin üzerine tıklayın…)

Tüm XHTML ve CSS etiketlerinin özelliklerini ezbere bilmek? Zor biraz… İşte HTML Playground bizim için bunu kolaylaştırıyor. Neredeyse tüm XHTML ve CSS etiketlerini bulunduran sitede; etiketle ilgili bilgi alabilir, etiketin örnek kullanımını görebilir, bu örneği düzenleyip aynı sayfada önizleyebilir, kodların içindeki herhangi bir başka etikete hızlı bir şekilde özellik ekleyebilirsiniz(resimdeki gibi).

Kendileri BURADA, BlogSpot tabanlı blogları şurada ve forum şurada…

Büyütmek için üzerine tıklayın…

Yorum formları bloglar ve diğer siteler için vazgeçilmezdir. Fakat çoğu ziyaretçi yorum formunu kullanmayı bile bilmez, ki bu da yorum sayısını olumsuz etkiler. Eğer siz ziyaretçiye bazı ipuçları vermezseniz, ziyaretçinin sitenizde geçirdiği vakitte oldukça kısa olacaktır.

İşte ben de bu yüzden yorum formunu hem göze hem ziyaretçiye hitap eden bir şekilde geliştirdim.

Neler Yeni?

• Arkaplan rengi ve renksel düzenleme
• Tıklanan alanda arkaplan ve border değişimi(2px)
• Başlıkların yanında soru işareti ile bilgilendirme(jquery)

2 javascript dosyasından yararlandım: yazibilgi.js, jquery-1.2.6.min.js
Öncelikle bu iki js dosyasını indirin ve şu şekilde tanıtın:
Okumaya devam et »

Bu yolu eski bir sitemde kullanıyordum, Baybars’ın şurdaki yazısını okuyunca aklıma geldi tekrar. Ufak bir CSS koduyla her linke otomatik ikon ekleyebiliyorsunuz, fakat bunu özelleştirmek mümkün. Ben bu özelleştirmelerden en sevilenini anlatacağım: “Uzantıya Göre İkon”

CSS Kodu:

a[href $='.xml'] {
padding-right: 18px;
background: transparent url(http://www.aorgun.net/favicon.ico) no-repeat center right;
}

Burada; .xml uzantılı bir adres olduğunda, otomatik olarak benim favicon’umu yerleştiren bir stil hazırladık. padding değeri ile ikonun 18px sağda görünmesini sağladık ve no-repeat ile de ikonun tekrarını engelledik.

HTML Kodu:
Bildiğimiz link kodu . Yine de buyrun, hızlı bir deneme yaparsınız…

<a href=”http://www.aorgun.net/sitemap.xml”>AoRGuN.NeT SiteMap</a>

Uygulamanın bir örneği için buraya tıklayın…

Resim galerileri çoğu kullanıcı için vazgeçilmezdir, hatta yüzlerce “galeri” temeliyle kurulmuş websitesi vardır fakat basit kodlamalar kullanılmaz bu siteler için, genellikle mysql + php betik(script)leri kullanılır. Fakat CSS ile oldukça basit bir kodlamayla, basit bir resim galerisi oluşturmak mümkün. O basit kodlara geçelim isterseniz …

Okumaya devam et »