Saturday, June 20, 2009

webkit sevimlidir

NOT DÜŞTÜM


sevimlidir çünkü oval köşeler yapmak için sizi uğraştırmaz, geçiş efekti için javascript yazmanıza gerek kalmaz (tek neden bu değil elbette). Kolaycı bir yaklaşımı vardır.

Bugün öğrendim ki; renk geçişini şöyle sağlayabiliyormuşum:
  1. bir link için normal ve :hover durumları yazılır:
  2. a{ background-color: #239; color: #fff; padding:10px;}
    a:hover{ background-color: #932; color: #020202; }
  3. Sonrasında da bügün örendiğim ve renk geçişini sağlayan şu kod
    a {-webkit-transition-duration: .33s; -webkit-transition-property: color, background;}
Geçiş süresini ayarlayarak daha hızlı veya yavaş bir geçiş yapılabilir. Ancak bu elbette mozilla ff ve ie için çalışmayacak olan bir koddur! Sadece webkit için. Chrome ve Safaride deneyebilirsiniz.

Zannederim biraz performansı düşürüyor. Abartmamak lazım. Örneğin şu blog da tüm oval köşeler ve geçişler çok kullanılmış.

Not: CSS3 ile zaten bu tarz işlemler standart olma (galiba) aşamasında efendim :
http://www.w3.org/TR/css3-transitions/

konuyu irdelemek için:
  1. http://css-infos.net/property/-webkit-transition-duration
  2. http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-transition-duration
  3. http://webkit.org/blog/138/css-animation/
  4. http://www.w3.org/TR/css3-transitions/

No comments: