CSS3 geçişleri nasıl kullanılır

Everyone loves motion. Herkes harekete bayılır. Dördüncü boyutu (zaman) bir site tasarımına eklemek, ekran tabanlı tasarımın baskı tasarımından sıyrıldığı ana yoldur. CSS Geçişleri, Flash veya JavaScript gerekmeden web tasarımınızdaki belirli olayları zenginleştirmenizi sağlayan bir öğenin özelliklerini canlandırmak için basit bir yöntemdir.

W3C, web sitelerindeki geçişleri, “CSS Geçişleri, CSS değerlerinde belirli bir süre boyunca sorunsuz bir şekilde gerçekleşmesi için özellik değişikliklerine izin verir” olarak tanımlamaktadır. Başka bir deyişle, CSS geçişleri bir özelliği aşamalı olarak değiştirmemize, hareket hissi yaratmaya ve hızlı bir değişiklikle mümkün olmayan incelik ve duygulara sahip tasarımlar yaratmamıza izin verir.

Tarayıcı desteği

Tüm modern tarayıcılar (evet, hatta IE!) Artık CSS geçişlerini destekliyor. Bununla birlikte, önemli olarak, kullanılan tarayıcıda geçişler desteklenmiyorsa, geçiş yok sayılır ve özellik değişiklikleri anında uygulanır. Bu zarif bozulma, en iyi uygulamanın köşe taşıdır.

Tarayıcı desteği kapsamını genişletmek için, satıcı öneklerini kullanabiliriz, bu özellik Firefox 4–15, Opera 10.5–12 ve Chrome ve Safari'nin birçok sürümünü içerecek şekilde genişletir. Satıcı öneki alternatifleri de dahil olmak üzere kod şöyle görünür:

div {-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;transition: all 1s ease;}

Önceden belirlenmiş olmayan özellik, nihai tasfiyenin mülkiyetin taslaktan bitmiş durumuna geçmesiyle diğerlerinin de üst üste gelmesini sağlamak için yığının alt kısmına eklenir.

Geçiş parametreleri

CSS geçişleri için dört parametre vardır:

• geçiş özelliği: arası doldurulacak mülk veya tüm özelliklere uygulanacak anahtar kelime "all";
• geçiş süresi: geçişin süresi ;
• geçiş zamanlama işlevi: uygulanacak hareket hızı, bu daha doğal görünümlü hareket yaratır
• transtion-delay: geçişin başlangıcına bir gecikme belirtir.

Ayrıca, parametrelerin özellik, süre, zamanlama işlevi, gecikme olarak belirtildiği kısayol özelliğini (yukarıdaki örnekte olduğu gibi) da kullanabilirsiniz.

Geçiş yapılabilen özellikler

Sadece matematiksel bir değere dönüştürülebilen özellikleri değiştirebilirsiniz. Örneğin, yazı tipi boyutuna geçiş yapabilirsiniz; yazı tipi yüzüne geçiş yapamazsınız.

Şu anda geçiş yapılabilen özelliklerin tam listesi şöyledir:

arka plan konumu, kenarlık-alt-renk, kenarlık-alt-genişlik, kenarlık-sol-renk, kenarlık-sol-genişlik, kenarlık-sağ-renk, kenarlık-sağ-genişlik, kenarlık-boşluk, kenarlık-üst-renk, kenarlık üstü genişlik, alt, klip, renk, yazı tipi boyutu, yazı tipi ağırlığı, yükseklik, sol, harf aralığı, kenar boşluğu, kenar boşluğu, kenar boşluğu, kenar boşluğu, en çok yükseklik, en fazla genişlik, min-yükseklik, min-genişlik, opaklık, anahat rengi, anahat genişliği, alt-dolgu, dolgu-sol, dolgu-sağ, dolgu-üst, sağ, metin-girinti, metin gölgesi, üst, dikey- hizalama, genişlik, kelime aralığı, z-endeksi.

Geçişleri kullanma

Geçiş bildirimleri, öğenin normal durumuna eklenir. Bu nedenle, yalnızca birkaç kez, örneğin: focus,: active ve pseudo classes.

Aşağıdaki kodu kullanarak temel bir menü ve bir metin paragrafı oluşturabiliriz. Menü öğeleri, üzerine gelindiğinde renkleri ve arka plan rengini değiştirecek şekilde biçimlendirilir ve böylece satır içi bağlantı, üzerine gelindiğinde alt çizgi rengini beyazdan yeşile dönüştürür:

Business
  kod 
  dizayn 
  İlham 
  Çeşitli 
  seyyar 
  Haber 
  kaynaklar 
  Kullanılabilirlik 
  Tam sayı poste erat bir satır içi bağlantı   venenatis dapibus posuere velit aliquet.  Nullam id dolor id nibh ultricies araçlarının kullanımı.  Tam sayı bir ante venenatis dapibus posuere velit aliquet.  Nullam quis risus eget urna mollis ornare vel eu leo. 

İşte göründüğü gibi:

CSS3 Geçişlerini kullanıyor musunuz? Hangi etkileri yaratabildiniz? Yorumlarda bize bildirin.

Öne çıkan görsel / küçük resim, hareketli görüntü Shutterstock üzerinden.