Web Standartları için arşiv
Kutulara Gölge Vermek (box-shadow)
Haziran 21st, 2010 • 7 yorum CSS, Web Standartları, XHTML
Etiketler: box-shadow, css3, gölgeli kutular, kutu gölgesi
Şuanki şartlar düşünüldüğünde normal olarak bir kutunun gölgesini vermek için daha öncede açıkladığımız gibi bir kaç yöntem var. Bu yöntemleri incelemek için http://www.fatihhayrioglu.com/css-ile-golge-vermek/ bağlantısındaki yazıya göz atalım. Buradaki yöntemleri incelediğimizde çok fazla gereksiz ve fazladan katman(div) kullanmak zorunda kaldığımızı göreceksiniz. CSS3 ile gelen box-shadow özelliği sayesinde çok basit bir tanımlama ile bu fazlalıklar ve zorluklardan kurtulabiliyoruz. Okumaya devam edin »
Web’de Yazı Tipi Sorunları ve Google Font API
Haziran 9th, 2010 • 9 yorum CSS, Web Standartları
Etiketler: aliasing, font-face, google font api, sorunlar, yazı tipi, yazı tipi gömme
Web sitelerini oluşturan öğelerden en önemlisi muhakkak yazılardır. Resimler ve videolarda önemli olsa da çoğunlukla yazılar ön plandadır web sitelerinde. CSS kod yazanlar için diğer öğelere göre daha erişebilir ve esnektir yazılar. Yapılan yenilikler bu konuda daha avantajlı duruma geliyoruz.
Daha önce yazı tipi hakkında bir çok makale yazmıştım.
ie6/7′da postion:relative Uygulanmış Elemanlarda z-index Sorunu
Nisan 30th, 2010 • 5 yorum CSS, Web Standartları, XHTML
Etiketler: ie6, ie7, liste, postion:relative, z-index
Bu sorunla neredeyse 4-5 kere karşılaşmışımdır. En son yaptığım projede karşılaşınca yazmaya karar verdim.
Sorunu açıklamaya çalışayım; postion:relative uyguladığımız elemanların(li) içinde postion:absolute kullanarak eklediğimiz elemanlar sıralı elemanlarının altında kalıyor.
Genelde bu durumla liste(li) elemanı içinde üzerine gelince açılan bir alan(menü) açtırmak istediğimizde karşılaşıyoruz. Okumaya devam edin »
İlk harfi büyük(drop caps) paragraflar oluşturmak
Nisan 29th, 2010 • 3 yorum CSS, Web Standartları, XHTML
Etiketler: :first-child, :first-letter, css3, drop caps, font-face, ie6, ie7, ilk harfi büyük paragraf
Geçen gün Kadir Günay bana sormuştu bu konuyu benim aklımda da css ile bir çözümü olduğu ancak ie6 ile sorunu olduğu kalmıştı. Biraz araştırdım ie6 ile sorunu yok, var ama ufak tefek. Araştırmışken birde makale yazayım herkes yararlansın dedim.
İlk harfi büyük paragraflar oluşturma işi aslında dergilerde sık uygulanan bir yöntemdir. Genelde dergilerin başlangıç paragrafının ilk harfi 2 veya daha fazla satır yüksekliğinde oluşturarak farklı ve güzel bir görünüm kazandırırlar. Bu durumu biz css ile yapabiliyoruz.
Biz bu görüntüyü first-letter seçicisi ile elde edebiliyoruz. Hatta bu seçicinin adı drop caps-ilk harfi büyük harf seçicisi diyede geçiyor. Bizim için en büyük avantajı ie6 dahil tüm tarayıcıların bu özelliği desteklemesi. Okumaya devam edin »
İE kalıtsal margin sorunu: form elementleri ve hasLayout
Nisan 28th, 2010 • 4 yorum CSS, Web Standartları, XHTML
Etiketler: hasLayout, ie, ie6, ie7, kalıtsal margin sorunu, Margin
İnternet Explorer ile bir çok sorun yaşıyoruz genelde ie’nin boyut taramalarında. Bu sorunların kaynağı "hasLayout" olarak adlandırılan ie kabulü. hasLayout hakkında ayrıntılı bilgi için bu siteye göz atın. Microsoft bu tanımlamadaki hatasını kabul etti ve ie8 de "hasLayout" kabulunü bıraktı. Buna da şükür.
Ben genelde bu sorun ile özel textbox alanlarını kodlarken karşılaşıyorum. Okumaya devam edin »
CSS ile metinlere gölge vermek
Nisan 25th, 2010 • 11 yorum CSS, Web Standartları, XHTML
Etiketler: dropshadow, glow, gölge, ie desteklemiyor, metin, text-shadow
Metinlere gölge vermek, site görselliği açısından her zaman tasarımcıların tercih ettiği yöntemlerden birisidir. Bir çok sitede bu durum ile karşılaşırız. Normalde bu gibi durumlarda gölge verilen alanlar resim olarak kesilip siteye eklenir. Bu durum anlamlı kodlama ve arama motorları için pek mantıklı değildir, ayrıca resim dosyaları metne göre daha fazla boyuta sahip olması nedeni ile de dezavantajlıdır.
Bunun için text-shadow özelliği standartlara eklendi. CSS 2 ile birlikte gelen text-shadow özelliği daha sonra CSS 2.1′da kaldırıldı. Daha sonra CSS 3 ile birlikte tekrar geldi. Safari bu özelliği ilk sürümünden itibaren desteklerken aynı şeyi diğer tarayıcılar için söylemek zor. text-shadow özelliği ile görsel düzenleme programlarında(photoshop, fireworks) kullanılan gölgeye yakın sonuçlar elde edebiliriz.
Bu makalede sizlere web sitemizde metinlere gölge vermek için hangi yöntemleri kullanabileceğimizi anlatmaya çalışacağım. Okumaya devam edin »
