CSS3'te tanıtılan yeni stiller web uzmanlarına sayfalarına Photoshop benzeri efektler ekleme yeteneği verdi. kullanarak ekleyebileceğiniz bir görsel efekt CSS3 bir site ziyaretçisi, o öğenin üzerine gelmek gibi bir şey yaptığında odaklanan soluk alanlar oluşturarak web sayfalarını etkileşimli hale getirmektir. Bu efekt aşağıdakilerin bir kombinasyonunu kullanır: opaklık ve geçiş.
Hover'da Opaklığı Değiştir
Etkileşimli öğelerden biri, bir müşteri bu öğenin üzerine geldiğinde görüntünün opaklığını değiştirmektir. Bu örnek için (HTML aşağıda gösterilmiştir), class özniteliğine sahip bir resim kullanıyoruz gri renk.
Grileştirmek için CSS stil sayfanıza aşağıdaki stil kurallarını ekleyin:
.greydout {
-webkit-opaklığı: 0.25;
-moz-opaklık: 0.25;
opaklık: 0.25;
}
Bu opaklık ayarları yüzde 25'e çevrilir. Bu, görüntünün normal şeffaflığının 1/4'ü olarak gösterileceği anlamına gelir. Şeffaflık olmadan tamamen opak, yüzde 100, yüzde 0 ise tamamen şeffaf olacaktır.
Ardından, fare üzerine geldiğinde görüntünün netleşmesini (veya daha doğrusu tamamen opak hale gelmesini) sağlamak için aşağıdakileri eklersiniz:
.greydout: üzerine gelin {
-webkit-opaklığı: 1;
-moz-opaklık: 1;
opaklık: 1;
}
Daha Fazla Opaklık Ayarlaması
Bu örneklerde, bu tarayıcıların eski sürümleri için geriye dönük uyumluluk sağlamak için kuralın satıcı önekli sürümlerini kullandığımızı fark edeceksiniz. Bu iyi bir uygulama olmakla birlikte, opaklık kuralı tarayıcılar tarafından iyi desteklenir, ve bu satıcı önekli satırları bırakmak güvenlidir.
Yine de, eski tarayıcı sürümleri için destek sağlamak istiyorsanız, bu önekleri eklememek için hiçbir neden yoktur. Bildiriyi stilin normal, ön eksiz sürümüyle sonlandırmak için kabul edilen en iyi uygulamayı izlediğinizden emin olun.
Bir siteye dağıtıldığında, bu opaklık ayarı ani bir değişikliktir. İlk önce gri, sonra değil, bu ikisi arasında herhangi bir ara durum yok. Bir ışık anahtarı gibidir - açık veya kapalı. İstediğiniz bu olabilir, ancak daha kademeli bir değişiklikle denemeler yapmak da isteyebilirsiniz.
Güzel bir efekt eklemek ve bunu kademeli olarak soldurmak için, geçiş Emlak:
.greydout
sınıf:.greydout {
-webkit-opaklığı: 0.25;
-moz-opaklık: 0.25;
opaklık: 0.25;
-webkit-geçiş: tüm 3s kolaylığı;
-moz-geçiş: tüm 3s kolaylığı;
-ms-geçiş: tüm 3s kolaylığı;
-o-geçiş: tüm 3s kolaylığı;
geçiş: tüm 3s kolaylığı;
}