CSS3 Geçiş Efektleri - Transition Nedir? Nasıl Kullanılır?  CSS3 Geçiş Efektleri - Transition Nedir? Nasıl Kullanılır? | Googleda Görüntüle

CSS3 Geçiş Efektleri - Transition Nedir? Nasıl Kullanılır?
 BEĞEN
  YORUM YAP

Merhaba arkadaşlar, çoğu sitelerde gördüğümüz daha yumuşak ve animasyonlu şekilde geçiş efektleriyle elbet ki karşılaşmıssınızdır.
Örneğin; bir link'in üzerine geldiniz. background-color özelliğinin yani arkaplan renginin hover veya focus parametresi ile bir anda değişmesi diye bir şey var. Birde bunun daha yumuşak bir şekilde bir diğer renge geçişi var. Hayal edebildiğiniz kurgulayabildiğiniz kadar bir çok özellik verilebilir. Bu sadece renk değildir tabi :) 

CSS3'ün transition parametresi ile güzel işler çıkartacağız. Hadi başlayalım.

Şimdi İlk Olarak bu tatlı hoş geçiş efekti transition'ı kullanmadan bir sade link mimarisine bakalım.

Görüldüğü üzere net bir renk geçişi mevcut. Hadi gelin buna daha yavaş daha hoş bir geçiş görünüm katalım.

Sizcede daha hoş olmadı mı ? Ben bu örnekte bir transition'ın alabileceği bazı özellikleri direkt tek satırda belirledim. Yani bu süresi ve alacağı efekt gibi özellikler.
Bunu şu şekilde de yapabilirdim;

Alacağı estetik efekt özelliği için, transition-timing-function:ease-in-out;
Alacağı efektin geçiş süresi için, transition-duration:0.5s;
Belirli bir saniyeden sonra efektin devreye girmesi için ise, transition-delay: 0.5s;

Gibi parametreleri tek tek yazabilirdim. Fakat bunu tek satıra indirerek kodumu dahada kısaltmış ve pratikleştirmiş oldum. Aşağıda ki örnekte ki gibi. (Üstte ki örnekte de bu geçerli)

a {
	transition: all 0.5s ease-out;
}

CSS3 'ün güzel bir özelliği olan transition'ı inceledik.  Sizlerinde bu özelliği projelerinizde yer vereceğinize inanıyorum. Gerçekten estetik hoş bir görünüm sunuyor :)

Etiketler

Yorumlar

Bu Konuya Ait 1 Onay Bekleyen Yorum Bulunuyor.

Bu Konuya Ait 2 Onaylı Yorum Bulunuyor.

Kutay Erten

Kutay Erten

  1 yıl önce

Kardeşim seni tebrik ediyorum bu kadar kısa bir kodu uzun uzun anlatmışşın , renk geçişlerindeki yeni trend , herkes tarafından sevilir.

Mesut Hocaoglu

Mesut Hocaoglu

  1 yıl önce

İnternet ortamında " bu işin piriyim " diye geçinenlere nazaran kısa ve açıklayıcı anlatımınızı taktir ettim.Başarılarınızın devamını dilerim...

Yorum Yap

CSS3 -webkit / -moz / -o Nedir ? CSS3 ve Tarayıcı İlişkisi

Belki daha önce karşılaşmız olabilirsiniz.Bazı CSS3 kodları birkaç defa aynı yazılıp baş...

  3349   1 yıl önce

CSS3 Geçiş Efektleri - Transition Nedir? Nasıl Kullanılır?

Merhaba arkadaşlar, çoğu sitelerde gördüğümüz daha yumuşak ve animasyonlu şekilde geçiş ...

  2182   1 yıl önce

3. İndir.com Mobil Uygulama Yarışması ABD'ye Götürüyor

İNDİR.COM MOBİL UYGULAMA YARIŞMASI ABD’ YE GÖTÜRÜYOR Geçtiğimiz ik...

  1639   2 yıl önce

CSS [ text-transform:uppercase ] Karakter Sorunu Çözümü

Css'de metin (text) biçimlendirme özelliklerinden biri olan text-transform:uppercase parametresini...

  5296   2 yıl önce

Olcay E. 2 ay önce demiş ki;


selamun aleyküm, yararlı bir css dersi
Yoruma Git

erhan tapan 8 ay önce demiş ki;


Siteyi coşturan kod erhan bunu beğendi
Yoruma Git

Nejdet Acar 11 ay önce demiş ki;


Okumadan hemen cevaba sarılmayalım lütfen, okuyanlara ayıp oluyor...
Yoruma Git

Çılgın Koder 12 ay önce demiş ki;


Bunu çoklu resimlerde nasıl yapacağız? Ve limit koymak istesek nasıl koyarız.
Yoruma Git