CSS Dersleri

CSS Dersleri

Chrome Geliştirici Aracı(Developer Tool) Hesaplanmış Stiller Özelliği

Firefox kullanmamdaki en büyük sebeplerden birisi tabiki Firebug, Firebug dışında diğer geliştirici araçlarınıda arasıra kullansam da pek Firebug kolaylığı sağlamadığı için tercih etmiyorum. Bugün(yarım saat önce) Chrome geliştirici aracı ile çalışırken Firebug’da olmasını istediğim bir özelliği gördüm ve ilk defa Firebug’a bir konuda eksi puan verdim. Hesaplanmış

By Fatih Hayrioğlu

CSS Dersleri

ie6'da border-color:transparent desteği sağlamak

Geçen araştırırken gördüm. border-color:transparent özelliğini İnternet Explorer 7. sürümünden sonra desteklemeye başlamış, yani ie6’da desteklemiyor. Internet Explorer 6’nın son günlerini yaşadığımız bu günlerde küçük bir bilgilendirme olarak geçeceğim bu sorunun çözümünü. {% highlight css %} ul li a{ border-right:1px solid #f00 } ul li a:hover{ border-right:1px solid

By Fatih Hayrioğlu

CSS Dersleri

Genişliği Belli Olmayan Blok-level Elemanları Yatayda Ortalamak

CSS ile yatayda ortalamak deyince aklımıza hep genişliği sabit olan alanlar geliyor. Ancak genişliği sabit olmayan elemanları ortalamak biraz daha farklı oluyor. Genişliği sabit olan blok-level elemanları ortalamak için birçok kaynak var iken genişliği belli olmayan blok-level elemanları ortalamak için çok fazla kaynak bulamıyoruz. Google’da yaptığım aramalarda rastladığım makalelerde

By Fatih Hayrioğlu

CSS Dersleri

CSS ile Hiyerarşik Yerimi(Breadcrumbs) Yapmak

Kodladığım bir çok sitede eğer site alt sayfalar ve onlarında alt sayflarında oluşan karmaşık bir yapıya sahip ise genelde kullanıcıya nerede olduğu göstermek için hiyerarşik linkler kullanırız. Bunu hiyerarşik yerimi olarak isimlendirmek bana daha mantıklı geldi. Amaç web sitemizin kullanılabilirliğini arttırmaktır.  Kullanıcıya bulunduğu sayfa hiyerarşik yapısıda gösterilerek daha kullanışlı bir

By Fatih Hayrioğlu

CSS Dersleri

Resim Kullanmadan Altı Çizgili Başlıklar Oluşturmak

Resimde görüldüğü gibi başlık yapmak için bir bg resmi hazırlayıp başlığın altına tanımlıyordum. Sonra acaba ben bunu resim kullanmadan yapabilirmiyim diye düşündüm. Float uygulanmış elemanların kapsayamama sorunu diye ismini uzattığım clearfix sorunu aklıma geldi, aslında bu bir sorun değil kabul idi. Tarayıcılar olayı böyle kabul ettiği için içinde float uygulanmış

By Fatih Hayrioğlu

CSS Dersleri

CSS3 Çoklu Ardalan(Multiple Background)

CSS3 standart geliştiricileri önceki sürümlerde eksik olan birçok sorunu gidermektir. Daha önce birçok uygulamamızda yaşadığımız sorunlardan biriside bir elemana birden fazla ardalan resmi(background-image) tanımlayamıyoruz. Bu sorun nedeni ile birden fazla ardalan resmi tanımlamak istediğimiz durumlarda fazla eleman ekleyerek çözüm üretiyorduk. Yuvarlak kenarlı kutular,  CSS ile sekmeli tab menu yapımı,

By Fatih Hayrioğlu

CSS Dersleri

CSS3 ile yuvarlak kenarlı resim yapmak

Bir resminize kenar çizgisi tanımı yapıp daha sonrada köşelerini ovalleştirmek istediğinizde köşelerdeki kenar çizgilerinde sorun yaşıyoruz. {% highlight html %} {% endhighlight %} Örneği görmek için tıklayınız. Kırmızı ile işaretlediğim yere dikkat ederseniz sorunlu gözüken kısımalar var. Bu sorun tarayıcıların bir sorunu gibi duruyor. Eğer ie’nin sorunları ile bu kadar zaman kaybetmemiş olsa

By Fatih Hayrioğlu

CSS Dersleri

CSS İpucu 30 background tanımında tırnak kullanımı

CSS kodu yazarken background tanımlarında bazı yerlerde tırnaklı tanım yapıldığını, bazı yerlerde ise tırnaksız tanım yapıldığını görmüşsünüzdür. {% highlight css %} background("deneme.gif"); {% endhighlight %} veya {% highlight css %} background(deneme.gif); {% endhighlight %} Ben birkaç güne kadar arada bir farkın olmadığını düşünüyordum.(Aslında benim gibi özel durumlar hariç bir fark olmadığı

By Fatih Hayrioğlu