CSS3, UX tasarımcıları için sayısız imkanlar sunuyor ve bunların en iyi yanı, en havalı parçaların uygulanması gerçekten çok basit.
Sadece birkaç kod satırı, kullanıcılarınızı heyecanlandıracak, etkileşimi artıracak ve nihayetinde iyi kullanıldığında dönüşümlerinizi artıracak harika bir geçiş efekti verecektir. Dahası, bu efektler donanım hızlandırıldı ve şu anda kullanabileceğiniz aşamalı bir geliştirmedir.
Kullanıcı arayüzünüze hayat katacak ve kullanıcılarınızın yüzlerine gülümseyecek 8 gerçekten basit efekt.
Tüm bu etkiler (çubuk bir) geçiş özelliği ile kontrol edilir. Bu etkilerin çalıştığını görebiliyoruz, bir HTML sayfasında bir div ayarlayacağız:
Bunu yaptıktan sonra, genişliğini ve yüksekliğini (böylece boyutları vardır), onun arka plan rengini (böylece görebiliriz) ve geçiş özelliğini ayarlayın.
Geçiş özelliği üç değere sahiptir: geçiş için özellikler (bizim durumumuzda) geçiş hızını (bizim durumumuzda 0,3 saniye) ve hızlanma ve yavaşlamanın nasıl hesaplandığını değiştirmenize olanak tanıyan üçüncü bir değer, ama biz ' Bu boş bırakarak varsayılan ile sopa.
Şimdi tek yapmamız gereken özellik değiştirmek, onlar bizim için canlandıracak…
Eğer takip etmek isterseniz demo dosyalarını buradan indirebilirsiniz.
İşlerin kaybolması müşteriden oldukça yaygın bir taleptir. İşlevselliği vurgulamak ya da harekete geçirme çağrısına dikkat çekmek için harika bir yoldur.
Fade efektleri iki adımda kodlanır: önce, ilk durumu siz belirlersiniz; sonra, örneğin vurgulu olarak değişikliği ayarlarsınız:
.fade{opacity:0.5;}.fade:hover{opacity:1;}(Bu çalışmayı görmek için div'inizin sınıfını “solmaya” ayarladığınızdan emin olun.)
Bir unsuru büyütmek için, genişliğini ve yüksekliğini veya dolgularını kullanmak zorundaydınız. Ama şimdi CSS3'ün dönüşümünü büyütmeye kullanabiliriz.
Divinizin sınıfını "büyümeye" ayarlayın ve ardından bu kodu stil bloğunuza ekleyin:
.grow:hover{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}CSS dönüşümleri bir dizi farklı kullanıma sahiptir ve en iyilerinden biri, bir elementin dönüşünü dönüştürmektir. Divinize sınıfınızı “döndürün” ve CSS'nize aşağıdakileri ekleyin:
.rotate:hover{-webkit-transform: rotateZ(-30deg);-ms-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}3D gölgeler bir yıl boyunca çattılar, çünkü düz tasarımla uyumlu olarak görülmediler, ki bu elbette saçmalıktır, etkileşimlerinde kullanıcı geri bildirimi vermek ve düz veya sahte 3D arayüzlerle çalışmak için fevkalade iyi çalışırlar. .
Bu efekt, bir kutu gölgesi ekleyerek ve ardından öğeyi ekrandan büyüyecek şekilde dönüştürme ve çevirme özelliklerini kullanarak x ekseninde hareket ettirerek elde edilir.
Divinize “threed” sınıfını verin ve ardından CSS'nize aşağıdaki kodu ekleyin:
.threed:hover{box-shadow:1px 1px #53a7ea,2px 2px #53a7ea,3px 3px #53a7ea;-webkit-transform: translateX(-3px);transform: translateX(-3px);}Şu andaki en sıcak düğme stillerinden biri de hayalet düğmedir; arka plan ve ağır bir sınırsız bir düğme. Elbette basitçe bir elemente sınır ekleyebiliriz, ancak bu elemanın konumunu değiştirecektir. Bu sorunu kutu boyutlandırma kullanarak düzeltebiliriz, ancak daha basit bir çözüm, bir giriş kutusunun gölgesini kullanarak bir kenarlıktaki geçiştir.
Sınıfınıza "sınır" sınıfını verin ve stilinize aşağıdaki CSS'yi ekleyin:
.border:hover{box-shadow: inset 0 0 0 25px #53a7ea;}