CSS3 Geçişleri Güzel Fade Etkileri Yaratın
Web tasarımcıları, CSS3 sahneye çıktığında oluşturdukları sayfalar üzerinde daha fazla kontrol sahibi olmayı çok istiyorlardı. CSS3'te tanıtılan yeni stiller , web profesyonellerine sayfalarına Photoshop benzeri efektler ekleme olanağı verdi. Bu, gölgeler ve parlamalar , yuvarlak köşeler ve daha fazlası gibi özellikleri içerir. CSS3 ayrıca, sitelerde güzel bir etkileşim yaratmak için kullanılabilecek animasyon benzeri efektler de ekledi.
CSS3 kullanarak web sitenizdeki öğelere ekleyebileceğiniz çok hoş bir görsel efekt, opaklık ve geçiş özelliklerinin bir bileşimini kullanarak içeri girip çıkmasını sağlamaktır. Bu, bir site ziyaretçisinin bu öğe üzerinde gezinmek gibi bir şey yaptığında odaklanan soluk alanlar oluşturarak sayfalarınızı daha etkileşimli hale getirmek için kolay ve iyi desteklenen bir yoldur.
Bu etkileşimli görsel efekti web sayfalarınızdaki çeşitli öğelere eklemenin ne kadar kolay olduğuna bir göz atalım.
Hover'daki Gömme Durumunu Değiştirelim
Bir müşteri bu öğe üzerinde gezinirken bir görüntünün opaklığını nasıl değiştireceğimize bakarak başlayacağız. Bu örnek için (HTML aşağıda gösterilmiştir) greydout'un sınıf özniteliğine sahip bir resim kullanıyorum.
Grileştirmek için CSS stil sayfamıza aşağıdaki stil kurallarını ekliyoruz:
.greydout {
-webkit-opaklık: 0.25;
-moz-opaklık: 0.25;
opaklık: 0.25;
}
Bu opaklık ayarları% 25'e çevrilir. Bu, görüntünün normal saydamlığının 1 / 4'ü olarak gösterileceği anlamına gelir. Şeffaflığı olmayan tamamen opak% 100,% 0 ise tamamen şeffaf olacaktır.
Ardından, farenin üzerine geldiğinde görüntünün netleşmesini sağlamak (veya daha doğru bir şekilde tam opak hale gelmek) için, aşağıdakileri ekleyin: hover psödo-class:
.greydout: hover {
-webkit-opaklık: 1;
-moz-opaklık: 1;
opaklık: 1;
}
Bu örneklerde, bu tarayıcıların eski sürümlerinin geriye dönük uyumluluğunu sağlamak için kuralın satıcının öneki sürümlerini kullanıyorum. Bu iyi bir uygulama olsa da, gerçek şu ki, opasite kuralı artık tarayıcılar tarafından iyi bir şekilde destekleniyor ve bu satıcı öneki satırları bırakmak oldukça güvenli. Yine de, eski tarayıcı sürümleri için destek sağlamak istiyorsanız, bu önekleri dahil etmemek için hiçbir neden yoktur. Beyanı sona erdirmenin kabul edilen en iyi pratiğini, stemin normal, un önekli sürümü ile uyguladığınızdan emin olun.
Bunu bir siteye yerleştirdiyseniz, bu opaklık ayarının çok ani bir değişim olduğunu göreceksiniz. Önce gri ve sonra o ikisi arasında ara devletler olmadan değil. Işık anahtarı gibidir - açık veya kapalı. İstediğiniz bu olabilir, ancak daha aşamalı bir değişiklikle denemek isteyebilirsiniz.
Gerçekten güzel bir efekt eklemek ve bunu kademeli olarak yavaşlatmak için geçiş özelliğini .greydout sınıfına eklemek istersiniz:
.greydout {
-webkit-opaklık: 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ığı;
}
Bu kodla, değişim aniden değişmekten ziyade kademeli olarak değişecekti.
Bir kez daha, burada bir dizi satıcı öneki kuralları kullanıyoruz. Geçiş, opaklık kadar iyi desteklenmez, bu nedenle bu önekler anlamlıdır.
Bu etkileşimleri planlarken hatırlamanız gereken bir şey, dokunmatik ekranlı cihazların "vurgulu" bir duruma sahip olmamasıdır, bu nedenle bu etkiler genellikle cep telefonu gibi bir dokunmatik ekranlı cihaz kullanan herkesin üzerinde kaybolur. Geçiş sıklıkla gerçekleşir, ancak bu kadar hızlı gerçekleşir ki gerçekten görülemezler. Bunu, hoş bir bonus etkisi olarak ekliyorsanız iyi olur, ancak içeriklerin anlaşılması için İHTİYACINIZ İHTİYAÇLARA DİKKAT EDİN.
Soluklaşmak Çok Muhtemel
Soluk bir görüntü ile başlamak zorunda değilsiniz, tamamen opak bir görüntüden çıkmak için geçişleri ve opaklığı kullanabilirsiniz. Aynı resmi kullanarak, yalnızca bir grup withfadeout ile:
class = "withfadeout">
Daha önce olduğu gibi, opacity seçiciyi: vurgulu seçiciyi kullanarak değiştirirsiniz:
.withfadeout {
-webkit-geçişi: tüm 2'ler kolay-in-out;
-moz-geçişi: tüm 2'ler kolay-in-out;
-ms-geçişi: tüm 2'ler kolay-in-out;
-o-geçiş: tüm 2s kolaylık-in-out;
geçiş: tüm 2'ler kolaylık-in-out;
}
.withfadeout: hover {
-webkit-opaklık: 0.25;
-moz-opaklık: 0.25;
opaklık: 0.25;
}
Bu örnekte, görüntü tamamen opak olmaktan biraz şeffaflaşacaktı - ilk örneğimizin tersi.
Görsellerin Ötesinde
Bu görsel geçişleri uygulayabilmeniz ve görüntülere son vermeniz mükemmeldir, ancak sadece bu CSS efektleriyle görüntüleri kullanmakla sınırlı değilsiniz. Tıklandığında ve tutulduğunda soluklaşan CSS tarzı düğmeleri kolayca yapabilirsiniz. Sadece opaklığı kullanarak: aktif sözde sınıfını ve düğmeyi tanımlayan sınıfa geçişi yerleştirirsiniz. Ne olduğunu görmek için bu düğmeyi tıklayıp basılı tutun.
Üzerine gelindiğinde veya tıklandığında esas olarak herhangi bir görsel öğenin solmasını sağlamak mümkündür. Bu örnekte, divun opaklığını ve farenin üzerine geldiğinde metnin rengini değiştiriyorum. İşte CSS:
#myDiv {
genişlik: 280px;
arkaplan rengi: # 557A47;
renk: #dfdfdf;
dolgu malzemesi: 10px;
-webkit-geçişi: tüm 4s kolaylık 0s;
-moz-geçişi: tüm 4s kolaylık 0s;
-ms-geçişi: tüm 4s kolaylık 0s;
-o-geçiş: tüm 4s kolaylık 0s;
geçiş: tüm 4s kolaylık 0s;
}
#myDiv: hover {
-webkit-opaklık: 0.25;
-moz-opaklık: 0.25;
opaklık: 0.25;
renk: # 000;
}
Gezinme Menüleri Arka Plandaki Renklerin Soluklaşmasından Yararlanabiliyor
Bu basit gezinme menüsünde, menü öğelerinin üzerine geldiğimde arka plan rengi yavaşça içeri ve dışarı çıkar. İşte HTML:
- Ev
- CSS3 Eğiticileri
- CSS3 Özellikleri
Ve işte CSS:
ul # sampleNav {liste-tarzı: yok; }
ul # sampleNav li {
ekran: satır içi;
yüzer: sol;
dolgu malzemesi: 5px 15px;
kenar boşluğu: 0 5px;
-webkit geçiş: tüm 2s doğrusal;
-moz-geçiş: tüm 2s doğrusal;
-ms-geçişi: tüm 2s doğrusal;
-o-geçiş: tüm 2s doğrusal;
geçiş: tüm 2s doğrusal;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
arkaplan rengi: # DAF197;
}
Tarayıcı Desteği
Zaten birkaç kez dokunduğum gibi, bu stiller çok iyi bir tarayıcı desteğine sahiptir, bu nedenle bunları herhangi bir trepidasyon olmadan kullanmakta özgürsünüz. Bunun tek istisnası, Internet Explorer'ın daha eski sürümleri olmakla birlikte, Microsoft'un 11'in altındaki tüm IE sürümleri için desteği sonlandırma kararı ile, bu eski tarayıcılar daha az ve daha az sorun haline geliyor - ve eski bir tarayıcı, daha eski bir tarayıcı değilse Bu solmaya geçişi görüyoruz, bu önemli bir sorun olmamalı. Bu tür etkileri zevkli etkileşimlere tabi tuttuğunuz ve işlevselliği sürdürebilmesi veya önemli içeriği ortaya koymalarına bağlı kalmadığınız sürece, etkileri desteklemeyen eski tarayıcılar daha az eğlenceli bir deneyim elde edeceklerdir, ancak bu tarayıcılardaki kullanıcılar bile Farkı bilmek, özellikle siteyi normal olarak kullanabildikleri ve ihtiyaç duydukları bilgileri aldıkları takdirde.
Ekstra Eğlence, İki Görüntüyü Değiştirin
İşte, bir görüntünün diğerine nasıl fade edileceğine dair bir örnek. HTML'yi kullan:
Ve diğeri tamamen opak iken tamamen şeffaf yapan CSS ve daha sonra geçiş ikisini değiştirir:
.swapMe img {-webkit-geçişi: tüm 1'ler kolaylık-in-out; -moz-geçişi: tüm 1'ler kolay-in-out; -ms-geçişi: tüm 1'ler kolay-in-out; -o-geçiş: tüm 1'ler kolay-in-out; geçiş: tüm 1'ler kolay-in-out; } .wap1, .swapMe: hover .swap2 {-webkit-opaklık: 1; -moz-opaklık: 1; opaklık: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opaklık: 0; -moz-opaklık: 0; opaklık: 0; }