CSS Dersleri

HTML

CSS ile HTML5 Yer Tutucu’ya(placeholder) Stil Vermek

HTML5 ile birlikte gelen form elemanlarına yer tutucu(placeholder) ekleme özelliğine CSS3 ile stil verebiliyoruz. Yer Tutucu(Placeholder); Formların input veya textarea alanlarında tanımlayıcı bilgileri gösterdiğimiz yapılardır.  Firefox’da sağ üstte arama motoru alanında hangi arama motorunda arama yaptığımızda bilgi veren bir yazı bir yer tutucudur. Kullanıcı bu alana odaklandığında

By Fatih Hayrioğlu

CSS Dersleri

Chrome'un -99999999px sorunu

Diğer tarayıcılar rastlamadığım için bir sorun olarak yazıyorum. sizlerde eğer böyle bir tanım yaptı iseniz veya kullandığınız kod bloklarında kullanılmış ise benzer sorunu sizde yaşıyor olabilirsiniz. Bazı elemanları gizle göster yapmak için görünür alanın dışına çıkarırız. Bunun için genelde left tanımına görünür alanın içine girmeyecek büyüklükte bir değer girerek yaparız.

By Fatih Hayrioğlu

CSS Dersleri

CSS3 Çevrimiçi Araçları

CSS3 Arayüz Geliştiriciler için bir çok güzel özellik getirdi. Bu yeni özellikler gayet kullanışlı ve kuvvetli özellikler. Bu özelliklerin bazılarını kodlarken özellikle metin editörü ile kodlama yaparken zorlanabiliyoruz. Bu durumun çözümü için bazı araçlar yardımımıza yetişir. Ben aşağıda sıraladığım bir çok aracı kullandım. Bazılarını ise bu yazıyı yazarken araştırırken buldum

By Fatih Hayrioğlu

CSS Dersleri

CSS3 Javascript’ten Rol (Ç)alıyor

Geçen haftasonu c.tesi günü(28 Temmuz 2012) jstanbul etkinliğinde sunduğum “CSS3 Javascript’ten Rol Çalıyor” makalesidir. Etkinlikte internet erişimim olmadığı için örnekleri gösterememiştim, burada bağlantıları da paylaşıyorum umarım yararlı olur. Sunuma erişmek isteyenlere sunumun linki. Bu başlık şöyle çıktı; Hasan Yalçın’ın “Modern Web Tasarımı” kitabı için HTML5 ve

By Fatih Hayrioğlu

CSS Dersleri

CSS3 Renk Geçişinin <body> elemanına uygulamasındaki sorun ve çözümü

CSS3 yeniliklerinde yaralanıyoruz, tabi bazı sorunlar ortaya çıkıyor. Hatasız kod olmayacağı için, hata olur ama bir çözümüde vardır elbet diye düşünmemiz lazım. Sorun tam olarak bir sayfanın ardalanının tamamına renk geçişi uygulamak istediğimizde belli bir yere kadar uygulayıp kalan kısmını tekrar ettirerek istemediğimiz bir durum oluşmasına neden oluyor. Sorunun çözümünü

By Fatih Hayrioğlu

CSS Dersleri

İnternet Explorer 7'yi Bitirmeli miyiz?

“IE6 Sonrası Kod Yazma Alışkanlıklarımızı Güncellemek” yazısından sonra ie7 istatistikleri daha çok ilgimi çeker oldu. Şu anki istatistiklere bakarsak %4 civarında(makaleye başladığımda %10 idi.) ie7 kullanan kullanıcı var, peki biz bunları yoksayabilirmiyiz ve yok sayarsak bize neler kazandırır bu makalemde bunları irdeleyeceğim. İnternet Explorer 7. sürümünü bundan yaklaşık 5

By Fatih Hayrioğlu

CSS Dersleri

CSS3 önek Karmaşası

CSS3’ün güzel özelliklerini yavaş yavaş kullanmaya başladık. CSS3’ün yeniliklerinin yanında önek karmaşası gibi sorunlarımızda var. CSS3’de kodlarımı yazarken farklı tarayıcılar için önek ile kullanmak durumundayız. Farklı Tarayıcı önekleri; * Chrome ve Safari (-webkit-) * Firefox (-moz-) * Opera (-o-) * Internet Explorer (-ms-) Bu sorunun nedeni CSS3 özelliklerinin hala geliştirilmekte olması

By Fatih Hayrioğlu

CSS Dersleri

IE6/IE7 filtre "Renk Geçişi Tanımı - Konumlandırma" Sorunu ve Çözümsüzülüğü :D

CSS3 ile birlikte bir çok güzel özellik geldi. Bunlardan bir tanesi CSS3 renk geçişi(gradient) özelliği. Bu özelliği uygulamamızda en büyük etki CSS3 renk geçişini desteklemeyen İnternet Explorer için filtre ile çözüm oluşturuyor olabilmemiz. Uygularımızda CSS3 renk geçişini uyguladıkça filtre uygulamalarında yaşanan sorunlar ortaya çıkmaya başladı. Daha önce bu konuda

By Fatih Hayrioğlu

CSS Dersleri

CSS3 Dönüştürme Özellikleri(Transforms) ve 2B Dönüştürme

Webkit ekibinin ilk olarak 2008 yılında CSS’e kattığı bu özellik daha sonra w3c tarafından standartlara girdi. HTML elemanlarını döndürmek, boyutlandırmak, eğmek gibi eylemleri gerçekleştirmemize yarıyor. 2d Transform özelliği 3d’ye göre tarayıcı desteği konusunda çok avantajlı. 2B Dönüştürme özelliklerini ie9+ desteklerken, 3B Dönüştürme özelliklerini henüz betası çıkmış olan ie10+

By Fatih Hayrioğlu

CSS Dersleri

İnternet Explorer'da Renk Geçişi Sorunu ve Çözümü

CSS3 ile renk geçişi hakkında yazdığımız makalede İnternet Explorer içinde çözüm üretmiştik. Uygulamada bazı durumlarda renk geçişinin İnternet Explorer’larda çalışmadığını gördüm. Biraz araştırınca bu sorunun hasLayout’tan kaynaklanan bir sorun olduğunu gördüm. CSS3 ile renk geçişi için http://www.colorzilla.com/gradient-editor/sitesini kullanıyorum. Sorunu görmek için aşağıdaki gibi

By Fatih Hayrioğlu

CSS Dersleri

İnternet Explorer hasLayout Kabulü ve Sorunları

Makaleye başlamadan önce Internet Explorer 8 standart modda hasLayout kabulünün kaldırıldığını söyleyelim. IE7 uyumluluk modunda hala mevcut. hasLayout özelliği hakkında bir şeyler bilmememiz normal çünkü biz daha çok sorun kısmını görüyoruz. Aslında bazı kaynaklarda “Boyutlandırma Hatası” olarak da geçiyor bu sorunlar. hasLayout Internet Explorer’un yorumlayıcı motorunun bir kabulü olarak

By Fatih Hayrioğlu