CSS

Chrome Textbox Boyutlandırmasını Önleme

Chrome tarayıcıda, kullandığınız textbox resizable (boyutlandırılabilir) geliyorsa ve bu durum tasarımını bozuyorsa, stil dökümanınızda aşağıdaki tanımlamayı yapmanız bu sorunu çözmede yeterlidir.
textarea { resize: none; }



Chrome için CSS Hack

Google Chrome için uygulanan
body:nth-of-type(1){.header{ padding:6px 8px 10px 0; }}
hackini Firefox 3.5 algıladığından işe yaramıyor. Şu hack işinizi görebilir:
@media screen and (-webkit-min-device-pixel-ratio:0){ .header{ padding:6px 8px 10px 0; } }
Örneğini de buradan inceleyebilirsiniz.



İçeriğe Göre Genişleyebilen Yuvarlak Köşeli Kutular

CSS ile yuvarlak köşeli kutu yapmanın bir çok yöntemi var.
Benim anlatacağım yapı ise 4 yuvarlak köşeden ve iç içe dört div’den oluşuyor.
Mantık, bu dört divin background elemanı olarak olarak görsellerimizin tanımlanmasından ve div içinde konumlandırılmasından geçiyor.
Demo | Kaynak Kodu
Görseller
Öncelikle kullanmak istediğimiz renklerde bir daire hazırlıyoruz. Bunu şekildeki gibi dört parçaya ayırıyoruz.
Ben #eaf2f4 renkli, [...]



“position: absolute;” Olan Bir Nesneyi Yatayda Ortalama

Sabit konumlandırdığınız bir nesnenin yatayda ortalanmasını istiyorsanız margin-left:-(nesnenin genişliğinin yarısı) vermeniz yeterlidir.
Örnek 100px genişliğinde bir img var elimizde. O zaman kodumuz aşağıdaki gibi olacaktır.
.img1 {

position: absolute;top: 30px;

left: 50%;

margin-left: -50px;

}



Tek Karakterle IE6 ve IE7 İçin Stilinizi Farklılaştırın

Cross browser çalışırken bir çok hack kullanıyoruz. Farklı tarayıcılar için farklı stil dökümanları hazırlıyoruz ya da tek dökümanda satırlarca fazladan kod ekliyoruz tarayıcıya göre şerbet vermek için:) Brian Cray‘in yazdığı yazıyla bir aydınlanma yaşadım:) Yazdığınız CSS özelliğinin IE7 ve altında görüntülenmesi için özellikten önce * , IE6 ve altında görüntülenmesi için _ yazmanız yeterli.
#myelement
{
color: [...]



Firefox’un farklı versiyonları için hackler

Firefox’un tüm versiyonları için CSS Hackleri
/*Firefox’un tüm versiyonları */
#selector[id=selector] { color: red; }
/* Firefox’un tüm versiyonları */
@-moz-document url-prefix() { .selector { color: red; } }
/* Gecko (Firefox’u da kapsar) */
*>.selector { color: red; }
Firefox 1.5 ve daha yeni sürümleri için CSS Hackleri
/* Firefox 1.5 ve daha yeni sürümler */
.selector, x:-moz-any-link, x:only-child { color: red; }
Firefox [...]



Rastgele değişen başlık resmi ve XML’den veri okuyan duyurular

Geçen hafta felsefe profesörü Ali Osman Gündoğan‘ın kişisel web sitesini yayına aldım.

Tasarımını ve kodlamasını yaptığım web sitesinde kullandığım kodlardan ikisini paylaşmak istiyorum.
1. Rastgele değişen başlık resmi:
Elinizde bol miktarda görsel var ama sayfa sayınız toplamda 5-6. Bu durumda tüm görselleri değerlendirebileceğiniz iyi bir çözümdür rastgele görseli getirmek.
Aşağıdaki kodu PHP’nin rastgele sayı üreten fonksiyonundan  faydalanarak yazdım.
Kodla yapmak [...]



Sayfa İçeriğini Dikey Ortalama

Bir siteyi W3C standartlarında, sabit yükseklik kullanmadan dikey olarak ortalamak XHTML kodlayıcısı için genelde sıkıntı vericidir.
Yatay ortalama için genellikle CSS koduna margin: auto özelliğini eklemek yeterli olabiliyorken, dikey ortalama için bu kadar basit bir CSS stili bulunmamamktadır.
İnternette rastladığım, kısa bir JavaScriptsahip bu çözüm işinizi kolaylaştıracaktır.

HTML:
JavaScript’in kullanacağı “content” ID’li bir div oluşturuyoruz.
<div [...]



CSS 3 Beni Çok Heyecanlandırıyor!

W3C, CSS3 için 4 yeni modül oluşturuduğunu duyurdu. Tamamen yeni olan bu özellikler daha önce Javascript-Flash ya da gif ile yapabildiğimiz şeyleri kısacık CSS kodlarıyla yapmamıza olanak sağlayacak.
CSS 3′ün Animasyon (Animation), Geçiş (Transitions), İki (2d) ve Üç Boyutlu (3d) Döndürme özellikleri gelecekte bir çok isteğimize cevap verecek ve işimizi kolaylaştıracak nitelikte görünüyor.
Animasyon (Animation)da yapılacak harket [...]



Dinamik Metin Değiştirme (Text Replacement) Yöntemleri

1. sIFR 2.0

2. cufón

3. P+C DTR

4. FLIR

5. SIIR

6. DTR

7. sIFR 3

8. Typeface.js

9. IFR
 

10. PHP+CSS DTR

CSS Image Replacement [static]

swfir

Kaynak