Css web geliştiriciler için görsel desteği sağlayan ve site ait animasyon öğelerinin daha iyi olmasına için destek veren bir yapı olmaktadır. Site içinde kullanıcılar için daha esnek ve şık öğelerin eklenmesi adına çok faydalı olan bu yapı geniş bir kitle tarafından kullanılmaktadır. Bunun yanında daha fazla görsel destek gibi javascript gibi yapılardan da destek alınmaktadır. Site içerisinde ne kadar kullanışlı bir yapı kurmak istiyor iseniz bu öğeler büyük oranda fayda sağlamaktadır. En basitinden bir butonun animasyonsuz ve çok sade bir yapıda olmasından öte ona hafif bir görsellik eklenmesi daha başarılı olacaktır. İşte bazı örnekler…

Gooey Menu

Bu animasyonda görülen işlev bir döngü şeklinde olmaktadır. İlk olarak tek bir metodla bir buton içinde toplanan animasyon butona tıkladıktan sonra estetik bir şekilde alt parçalar ayrılıyor. Açılan menüler farklı butonlar ayrılıyor. Bunun yanında görünüş eski haline döndürülmek için yani alt menü kapatılmak için bir buton koyulmuş.

Animated Map Marker

Bir diğer CSS öğesi ise yer konumu şeklinde olan bir ikonun sade bir şekilde değil de küçük bir animasyon şekline büründürülmüş halini esas almaktadır. Tasarımda görülen öğe siyah bir zemin üzerinde gayet sade ve olgun bir biçimde nerede olduğunu belirten bir konumu belirtmektedir.

Blurred Text

İntrolar önemli öğelerdir aslında. Bir yapıya girerken o yapının prestijini artıracak öğelerden sayılabilir. Öğenin en iyi şekilde tanıtılması adına çok büyük bir öneme sahiptir. Bu örnekte ise görülen ilk olarak geriye doğru giden bir yazı ile en sonda kaybolup değiştiren temayı esas almaktadır. Görsellik açısından gayet başarılı olan bu intro renk uyumları yönünden de başarılı…

Loading Animations

Site içinde kullanıcıların sıkılmadan bazı beklemelerin olması gerekmektedir. Örneğin bir nesneyi açarken internet hızına paralel olarak bazı beklemeler olacaktır. Bu bekleme sürecinde de olumsuz etkilenmemek için bazı animasyonlara ihtiyaç duyulmaktadır. Bu animasyonlar sayesinde de kullanıcı bir şeyi beklediğinden ve beklediği öğenin ne zaman açılacağı hakkında bilgi sahibi olacaktır.

Hop Over Badges

Bir diğer önemli öğe ise üzerine gelme yani hover öğeleri olmaktadır. Css için özellikle buton tasarımlarında çok büyük fayda sağladıkları doğrudur. Örneğin bir buton tasarımı yapacaksınız ve bu tasarıma estetik katmak istiyorsunuz. Kullanıcı mesajlarına bakmak için tıklamadan önce sadece Mouse ile üzerine gelerek kaç tane mesaj geldiğini üstte çıkan bir bildirim ile anlayabilir.

Hamburger Icons

Sadece üzerine gelindiğinde değil tıklama yani CLICK olaylarında da bazı değişikliklerin olması faydalı olabilir. Bu örnekte de görülen ilk olarak hareketsiz bir ikon ve üzerine tıklandığında değişen şekli esas almaktadır.