CSS3 - CSS'te Outline, Animation, Column, Overflow, Resize ve Selection

CSS3’te beş pratik araca odaklanan ders, form arayüzlerinde sık görülen sorunları ve görsel efektleri doğrudan CSS ile çözmeye yarayan outline, animation, columns, overflow, resize ve selection özelliklerini tek tek hayata geçiriyor. En kritik nokta: varsayılan tarayıcı odak/çerçeve davranışını kontrol etmek için input/textarea gibi metin kutularına outline: none eklemek yeterli oluyor; böylece sarımsı odak halkası ortadan kalkıyor.

Ardından animasyon tarafında, CSS keyframes mantığıyla renk ve boyut değişimlerinin nasıl akıtıldığı gösteriliyor. İlk örnekte 200x200’lik, sayfa ortasına yerleştirilmiş bir div için animation tanımlanıyor: süre 5 saniye, sonsuz tekrar için infinite kullanılıyor ve alternate ile bitişten başlangıca geri dönüş sağlanıyor. Renk geçişi için keyframes içinde from/to değerleriyle maviye ve açık renge dönüşüm kuruluyor; Chrome ve Safari uyumluluğu için webkit ön eki ekleniyor. İkinci örnekte daha “karmaşık” bir akış kuruluyor: 800 piksel genişliğe giden bir bar, %0’dan %25’e, %25’ten %50’ye, %50’den %75’e ve %75’ten %100’e kadar adım adım genişliyor ve her eşikte farklı bir arka plan rengi (green → gold → orange red → red) alıyor. Burada linear zamanlama seçilince geçişte duraksama hissi azalıyor; easy-in/easy-out gibi seçenekler ise daha “takılmalı” bir his yaratıyor.

Dersin düzenleme kısmında columns özelliği öne çıkıyor. Metinleri otomatik çoklu sütunlara bölmek için columns: 3 gibi bir değer kullanılıyor; ancak tarayıcı uyumu için webkit ve Firefox tarafında ilgili ön ekler (webkit ve Moz) ayrıca yazılıyor. Sütunlar arası boşluk için column-gap, sütunlar arasındaki çizgi için column-rule kullanılıyor; örnekte 30 piksel boşluk ve 3 piksel, medium purple renkli bir çizgi tercih ediliyor. Böylece uzun metinler daha okunur bir gazete benzeri düzene dönüşüyor.

Overflow bölümü taşma davranışını netleştiriyor: visible (varsayılan), scroll (her zaman kaydırma çubuğu), auto (yalnızca taşarsa), hidden (taşanı kes) seçenekleriyle dikey/yatay eksen kontrolü de vurgulanıyor (overflow-y ve overflow-x). Ayrıca overflow: hidden ile “kayan kutu” gibi hareketli öğelerde taşmanın görünmeden sınır içinde kalması sağlanıyor. Resize tarafında metin alanının yeniden boyutlandırılmasını engellemek için textarea içindeki resize: none kullanılıyor; böylece kullanıcı sürükleyerek alanı büyütüp küçültemiyor.

Son olarak selection özelliğiyle seçili metnin görünümü değiştiriliyor. cursor/hover benzeri bir etki yaratmak için seçimin arka plan rengi ve metin rengi tanımlanıyor; ayrıca Moz ön ekiyle Firefox uyumu sağlanıyor. Seçim olmayan bölgelerde farklı renklerin görünmesi gibi küçük tutarsızlıklar da pratikte dikkat edilmesi gereken bir detay olarak bırakılıyor.