Google Browser Size, web sitelerinin tarayıcıların ortalama pencere boyutuna göre nasıl bindirildiğini yani ziyaretçilerin siteyi ilk açtıklarında web sitesinin kaçta kaçını ilk anda gördüklerini tespit etmenize olanak sağlayan bir Google Labs görüntüleme aracı.
Pencere bindirme bilgisi Google'un ziyaretçilerinin ortak yani ortalama tarayıcı pencere bindirme oranlarıdır.
Bu araç sitenizin genel olarak ilk ziyaret edildiği anda kaçta kaçının ya da önemli alanlarının ne kadarının ilk anda kullanıcı tarafından algılanıp algılanmadığını göstermesi açısından oldukça faydalıdır.
Uygulamanın adresine gidip hemen sol üstte görülen alana web sitenizin adresini yazın ve sonuçları inceleyin.
Google Labs
Abone Ol!
7 Nisan 2010 Çarşamba
Ziyaretçiler Bir Web Sitesinin Açıldığı İlk Anda Kaçta Kaçını Görür
Web Sitelerinizi ve Blog Sayfalarınızı Stiqr ile Görsel Olarak Şenlendirin
Stiqr, tek satırlık bir kod parçasıyla sitelerinize veya blog sayfalarınıza onun tasarımını ve kod yapısını bozmadan online ve görsel olarak resim, yazı, şekil ve widget eklemenizi sağlayan oldukça pratik ve etkili bir araç. Kesinlikle site kod yapısından bağımsız olarak ve sayfanın üzerinde ayrı bir katman olarak çalışıyor.
Yapmanız gereken tek şey web sitenizin kod sayfasında <head> etiketinin hemen üstüne aşağıdaki kodu ekleyiniz;
<*script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"><*/script> <*script language="javascript" src="http://www.stiqr.com/sticker/api"><*/script>Not : " * "ları kaldırmayı unutmayın
Ardından değişiklikleri kaydedip ana sayfanızın üzerinde F5 tuşuna bakarak sayfayı Refresh ediniz. Sonra Shift + F2 tuş kombinasyonuna basınız. Açılan pencereye kayıt için mail adresinizi ve ardından bir şifre giriniz.
Onaylama işleminin ardından sayfanızın alt kısmında boylu boyuna beliren siyah panelden istediğiniz değişikliği yapabilirsiniz. Web sitenize Stiqr ile resim eklemek istiyorsanız image menüsüne ve Free Images diyerek var olan resimleri sürüle-bırak tekniği ile sayfada istediğiniz yere getirip bırakınız. Son olarak ta yapmış olduğunuz değişiklikleri kaydetmek için alttaki panelde sağ alt tarafta yer alan "Save Changes" düğmesine basınız. Web sitenizi Stiqr editörü ile her düzenleme gereksinimi duyduğunuzda Shift + F2 tuş kombisyonunu kullanarak şifrenizi girmelisiniz.
Örnek Uygulama :
Önceki hali
Sonraki Hali
6 Nisan 2010 Salı
CSS Border (Kenar Çizgi) Özellikleri
Border özellikleri kısaca border stili, boyutu ve rengidir.
Border Özellikleri
Varsayılan: Border Yok
Dotted: Noktalı border stili
Dashed: Çizgili border stili
Solid: Sürekli çizgili border stili
Double: Çift ince çizgili border stili
Grove: 3D border stili. Dışa dönük.
Ridge: 3D border stili. Ortalanmış 3d.
İnset: 3D border stili. İçe dönük.
Outset: 3D border stili. Tamamen dışa dönük.
Yukarıdakiler border stilleridir.Peki bunları nasıl kullanırız?
.kenar{
border:dashed 1px #fff;
}Borderin tüm işlevleri yukarıdaki gibi genellikle bir satırda yazılır. Bakıldığında border stili (dashed), boyutu (1px) ve rengi (#FFFFF - Beyaz) yazılmıştır. Ayrıca borderı sadece altta, üstte, sağ ve solda gösterme imkanımız da vardır. Bunda ise border: yazmak yerine
border-top: (Üstte) border-bottom: (Altta) border-right: (Sağda) border-left: (Solda)gibi yazılmaktadır.
3 Nisan 2010 Cumartesi
CSS 3 ile Oval Köşeler Yaratmak
CSS 3 ile hiç resim kullanmadan düz köşeleri oval hale getirebileceğinizi biliyor muydunuz?
Bu özellik aşağıda ki browser (tarayıcı)'larda çalışmaktadır :
- Mozilla Firefox
- Google Chrome
- Safari
Öncelikle oval köşeler yapmak için iki ayrı kod kullanacağız çünkü firefox ile safari'nin algıladıkları kodlar farklı. ( Chrome ve Safari aynı CSS altyapısını kullandığı için ikisinde bir kodla oval köşeler oluşturabiliyoruz. )
Firefox'ta oval köşeler için aşağıdaki kodu kullanıyoruz:
-moz-border-radius
Chrome ve Safari için ise:
-webkit-border-radius
Bunlar px ( pixel ) cinsinden değerler alırlar. ( Radius değeri px cinsinden olur )
Örnek:
-moz-border-radius: 5px; -webkit-border-radius: 5px;
Tabi isterseniz her köşe için tek tek değerler atayabilirsiniz. 4 köşe için ayrı ayrı kodu kullanmak isterseniz:
-moz-border-radius-topleft / -webkit-border-top-left-radius -moz-border-radius-topright / -webkit-border-top-right-radius -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius -moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Yukarıdaki kodları çok az İngilizce biliyorsanız anlayabilirsiniz ama yinede Türkçe karşılıklarını verelim:
- top: üst
- bottom: alt
- left: sol
- right: sağ
Örneğin sadece üst köşeleri yuvarlatmak istiyorsanız. Oda şöyle oluyor;
-moz-border-radius-topleft: 10px; -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px;
CSS'de Background (Arkaplan) Özellikleri
CSS'de arkaplan özellikleri web sitelerinin vazçgeçilmezidir.
Background özelliklerinde 2 yol izleyeceğiz:
- Birincisi arka plana resim vermek.
- İkincisi arka plana renk vermek.
Arka plana resim vermek için;
body{
background:url(Resim_url.png);
}Arka plana resim verdik fakat bazı durumlar da resimin tekrar etmesi veya etmemesi gerekebilir. Bunun için background özelliklerini bilmemiz gerekmektedir.
background-color : Arkaplanın
background-image : Arkaplan için bir
background-repeat : Resmin bütün zemine yayılmasını sağlar.
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar.
background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
body{
background:#000 url(Resim_url.png);
background-repeat:fixed;
}gibi background özelliklerini kullanabiliriz. Arka plana resim değil de yanlızca renk vermek istiyorsanız;
body{
background: #000;
}
Kaydol:
Kayıtlar (Atom)
