Css ile Nesnelere Geçiş Efekti Uygulama
Css ile pseudo sınıfları (:hover, :focus, vb..) kullanılarak nesnelerin üzerine gelinmesi, odaklanılması gibi durumlarda görünümlerinin değişmesi sağlanabilmektedir. Bu değişim belirtilen olay gerçekleşir gerçekleşmez olmakta, örneğin bir linkin üzerine gelindiğinde, o anda rengi değişebilmektedir.
Bu değişimin birden bire değil de, yavaşça gerçekleşmesini istersek, Css3 ile gelen transition özelliğini kullanabiliriz.
Mesela bir link normalde açık mavi arkaplana sahip olsun, üzerine gelindiğinde ise koyu mavi olarak ayarlayalım. Transition özelliği ile bu değişimin 2 saniyelik sürede gerçekleşeceğini belirtelim.
a{
background-color: #3FF;
transition: background-color 2s;
-webkit-transition: background-color 2s;
-moz-transition: background-color 2s;
-o-transition: background-color 2s;
}
a:hover{
background-color:#63F;
}
Tarayıcıların eski versiyonları için -webkit-, -moz- ve -o- ön eklerinin kullanılması gerekir. (ilk örnekte kullandık, diğerlerinde es geçtik)
Yukarıdaki örnekte de göreceğiniz gibi geçiş efektinin nesnenin hangi özelliğine uygulanacağı yazıldıktan sonra, efektin süresi yazılmaktadır.
Bir başka örnek:
li{
color: #3FF;
transition: color 2s;
}
li:hover{
color:#63F;
}
Değişen ve geçiş efekti uygulamak istediğimiz birden fazla özellik varsa virgül ile ayırarak belirtebiliriz.
a{
background-color: #3FF; color:#60F;
transition: background-color 2s, color 2s;
}
a:hover{
background-color:#63F; color:#FFF;
}
Yukarıdaki örnekte arkaplan renginin ve metin renginin 2 saniye sürecek şekilde değişmesi sağlanmıştır.
Değişen tüm özelliklere aynı süre kullanılarak geçiş uygulamak için all parametresi kullanabiliriz.
a{
background-color: #3FF; color:#60F
transition: all 2s;
}
a:hover{
background-color:#63F; color:#FFF;
}
Örneklerin çalışan hallerini Konu Örnekleri kısmında inceleyebilirsiniz.
Transition Özelliklerini Ayrı Ayrı Belirtme
Geçiş efektinin özellikleri yukarıdaki örneklerde tek satırda yazılmış olup, istenirse ayrı ayrı da yazılabilir. Transition için kullanabileceğimiz özellikler şunlardır:
transition-property: Geçiş efektinin uygulanacağı özellikler
transition-duration: Saniye cinsinden geçiş süresi
transition-timing-function: İvmelenme türü
transition-delay: Saniye cinsinden gecikme süresi
Örnek: Ayrı ayrı yazılış:
transition-property: color;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
Bu ise tek satırda yazılışı:
transition: color 2s linear 1s;
Kullanabileceğimiz ivmelenme türlerini ise şu şekilde açıklayalım:
ease: Yavaş başlar, hızlanır, yavaş sonlanır.
linear: Doğrusal yani sabit hızda gerçekleşmesini sağlar.
ease-in: Yavaş başlar, hızlanır.
ease-out: Hızlı başlayıp yavaşlar.
ease-in-out: Başlangıçta ve sonda yavaş çalışır.
cubic-bezier(n,n,n,n): Kendi değerleriniz ile bir fonksiyon oluşturabilirsiniz.
css yavaşça değişmesini sağlama, linklere geçiş efekti uygulama, arkaplan renginin yavaşça değişmesi, üzerine gelindiğinde yavaşça değişmesini sağlama
KONU İLE İLGİLİ ÖRNEKLER
|
Gölge efekti uygulanmış, buton görünümlü link örneği
|
Kendin Dene
|
|
A etiketine buton görünümü verme ve geçiş efekti uygulama
|
Kendin Dene
|
13578 kez okundu.