CSS ile Kayan Resim Oluşturma

CSS ile Kayan Resim Oluşturma


 
 
Bu yazıda Futurico Kullanıcı Arayüzüne ilham veren bir CSS3 ile yalnızca resim kaydırıcısı yaratacağız. Bu öğreticide kullanacağımız CSS3 özellikleri, en yeni tarayıcılarda yapılan testlerde yer alıyor bu nedenle bu kaydırma çubuğu tüm tarayıcılarda çalışmayacak .(Chrome'da ve Safari'de önizlemeyi deneyin).
 
Bunu profesyonel projelerinizde kullanmanızı tavsiye etmiyorum, bu düzgün çalışmayacaktır, bu eğiticiyi, yalnızca bu özellikte kullanabileceğiniz son CSS3 özellikleriyle oynamak için kullanın.
 
 
1. Adım - HTML
 
 
İki sırasız liste oluştururuz, birincisi küçük resimler için, diğeri de resimler için. Küçük resmi ilgili resme bağlamak için her resim için bir kimlik ekleyeceğiz.
 
Kodlar:
 
 
 
 
Adım 2 - Temel CSS Stilleri
 
 
Bu adımda kaydırıcının temel düzenini oluşturacağız. Bunu yapmak için, tüm kaydırıcı elemanların kenar boşluklarını ve dolgusunu sıfırlayacağız, onlara sabit bir genişlik ve yükseklik vererek onları konumlandıracağız.
 
 
 
 
 
3. Adım - CSS3 Styling
 
 
Şimdi daha hoş görünmesi için CSS3 Stilleri ekleyeceğiz. Burada, gölgeler, köşeler, vb. gibi bazı CSS3 özelliklerini kullanacağız. Her bir tarayıcı için çeşitli önek kullanacağımızı farkedeceksiniz. Bu özellikler bazı tarayıcılarda test edildiğinden ve onları hedeflemek için örnek eklememiz gereklidir.
 
 
 
 
 
 
Adım 4 - Resim Açıklaması
 
 
Bu adımda , imajın üzerine geldiğinde görüntülenecek bir resim açıklama kutusu ekleyeceğiz. Bunu CSS3 stilleri ve kutuyu ok işareti eklemek için önce seçici kullanarak oluşturacağız.
 
 
HTML
 
Kutuyu oluşturmak için bağlantı etiketi için bir metin içeren bir span etiketi ekleyin.
 
Kodlar:
 
 
 
 
CSS
 
 
Kutuyu oluşturmak için kutuyu görüntü ve nesnenin ortasına koyabilmek için sabit bir genişlik ve daha iyi görünmesini sağlamak için bazı gölgeler ve degradeler ekleyeceğiz. Sadece CSS ile ok yaratmak için bir sınır hünerini kullanacağız.
 
 
 
 
 
Adım 5 - Sürgü Geçişleri
 
 
Şimdi kaydırıcı geçişleri oluşturmaya başlayacağız . Her bir görüntüye farklı bir geçiş oluşturacağız gibi, resimlere farklı bir sınıf adı eklememiz gerekir.
 
HTML
 
 
 
 
 
CSS
 
 
Geçişler yaratmak için @keyframes kullanacağız. Animasyon, bir CSS stil setinden diğerine aşamalı olarak değiştirilerek oluşturulur. Animasyonun ne zaman başlayacağını belirtmek için, yüzdeleri değiştirelim ve bitirelim, 0% animasyonun başlangıcı ve% 100 animasyon tamamlandığında. Bu animasyonları oluşturmaya başlayalım...
 
 
Soldan kaydır
 
Animasyonun başında resim 500px negatif olarak konumlandırılacak ve animasyon tamamlandığında resim 0 piksel sola konumlandırılacaktır. Animasyon süresini 1 saniyeye ayarlayarak soldan sağa doğru slayt efekti elde edeceğiz.
 
Kodlar:
 
 
 
Sağdan Kaydır

 

Üstten Kaydır

 

 

Alttan Kaydır

 

Görüntüyü Büyüt
 
 
Zum geçişini yapmak için CSS3 dönüşüm özelliğini kullanacağız. Animasyonun başında görüntü boyutu %10 olacak ve animasyon tamamlandığında orijinal görüntü boyutu olacaktır. Alt kısımda görünen bir alanı düzeltmek için üstten 4 piksel konumlandırırız.
 

Kodlar:

 

Resmi Dışardan Büyüt

 

Görüntüyü Döndürme ve Büyütme

 

 

Adım 6 - "Hedef Yok" Resmi
 
 
Biz olduğundan z endeksini kullanarak yeni bir resim göstermek için tıkladığınızda üstünde görünür ne görüntü ayarlamak için bir hata alıyorsanız. Yeni küçük resmi tıkladığınızda, önceki etkin slayt kaybolur ve yeni slayt geçişi sırasında son slaydı gösterir. Bunu düzeltmek için, yeni slayt geçişi sırasında daha yüksek bir z dizinine sahip olmayan bir hedef stili eklemeliyiz.
 
Kodlar:
 
 
 
 
Adım 7 - İlk Görünür Kaydırıcı
 
 
Kaydırıcı yüklendiğinde, son kaydırıcı görüntüsü gösterilir. İlk görünür kaydırma görüntüsünü seçebilmek için, daha yüksek bir z-dizinine sahip bir sınıf oluştururuz ve yalnızca bu sınıfı kaydırıcıyı yüklediğinde görünür olmasını istediğiniz kaydırıcıya eklemeniz gerekir.
 
 
 
8. Adım - Kaydırıcı Yükü
 
 
Bu adımda, kaydırıcıya animasyonda bir soluk katacak ekleyeceğiz çünkü sayfa yüklendiğinde ilk slayda geçmek için 1 saniye bekleyecektir. Bu geçişi görmek istemiyoruz ve 1 saniye boyunca gizleyeceğiz.
 
 
 
 
 
 
 
 YUKARI