CSS3 ile 6 Harika Resim Yazısı
CSS3 gerçekten güçlüdür. Basit bir geçiş efekti yapmak için görüntülere veya bir sürü JavaScript kod dizisine ihtiyacımız vardı. Günümüzde sadece CSS3 ile aynı şeyi yapabiliriz.
Bu eğiticide, yalnızca CSS3 kullanarak çeşitli geçişlerle nasıl resim yazıları oluşturulacağını göstereceğiz..
- gösteri
- İndirme kaynağı
Tarayıcı Desteği
Bu resim yazısı, nispeten yeni özelliklere sahip olan dönüştürme ve geçiş özelliklerine çok bağlı olacaktır; bu nedenle, başlığı sorunsuz bir şekilde çalıştırmak için gereken tarayıcı desteğine dikkat etmek akıllıca olacaktır..
Aşağıdakiler, dönüşüm ve geçişi zaten destekleyen tarayıcılardır:
- Internet Explorer 10+ (henüz yayınlanmadı)
- Firefox 6+
- Chrome 13+
- Safari 3.2+
- Opera 11+
Şimdi öğreticiye başlayalım.
HTML Yapısı
6 imgemiz var; her resim farklı bir resim yazısı stiline sahip.
Basit Başlık
Tam Başlık
Lorem ipsum dolor amet sitet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliq erat volutpat.
Başlık solmaya
Lorem ipsum dolor amet sitet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliq erat volutpat.
Başlığı Kaydır
Lorem ipsum dolor amet sitet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliq erat volutpat.
Bu, resim yazısı döndür
Lorem ipsum dolor amet sitet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliq erat volutpat.
Serbest Stil Başlığı
Lorem ipsum dolor amet sitet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliq erat volutpat.
Temel CSS
Herhangi bir öğeyi şekillendirmeden önce, bu CSS sıfırlamayı kullanarak tüm özellikleri sıfırlamak ve varsayılan stil değerlerini vermek her zaman iyi bir başlangıçtır, böylece tüm tarayıcılar aynı sonucu verir (belki, IE6 hariç).
Stiller style.css dosyasında ayrılacaktır, bu nedenle HTML dosyamız düzenli görünecektir. Ancak, dosyaya stil kurallarını uygulamak için head etiketinin içine bir link stili eklemeyi unutmayın.
Tamam, html etiketinden ve ana sarmalayıcı kimliğinden başlayarak, öğeyi şekillendirmeye başlayalım:
html background-color: #eaeaea; #mainwrapper font: 10pt normal Arial, sans-serif; yükseklik: otomatik; marj: 80 piksel otomatik 0 otomatik; metin hizalama: orta; genişlik: 660 piksel;
Görüntü kutusu tarzı
Görüntüleri içeren kutulara bazı genel stiller uyguluyoruz. Kutuları sola kayan nokta kullanarak yan yana gösterilecektir. Ayrıca taşma eklediğimize dikkat edin: hidden property; Bu, içindeki div içerisindeki tüm nesneleri gizlenmesini sağlar..
Daha sonra görüntü geçişine ihtiyaç duymamız durumunda kutunun içindeki her görüntünün geçiş özelliğini de ilan ederiz..
#mainwrapper .box border: 5px katı #fff; imleç: işaretçi; yükseklik: 182 piksel; şamandıra: sol; marj: 5 piksel; pozisyon: göreceli; taşma: gizli; genişlik: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; kutu-gölge: 1px 1px 1px 1px #ccc; #mainwrapper .box img position: absolute; solda: 0; -webkit-geçişi: tüm 300ms kolaylığı; -moz-geçiş: tüm 300ms kolaylığı; -o-geçişi: tüm 300ms kolaylığı; -ms-geçişi: tüm 300ms kolaylığı; geçiş: tüm 300ms kolaylık;
Başlık Ortak Stil
Başlık bazı ortak stillere ve ayrıca geçiş özelliğine sahip olacaktır. Opacity özelliğini kullanmak yerine, altyazının içindeki metni etkilemeden biraz saydam görünmesini sağlamak için alfa kanalı için 0,8'li RGBA renk modunu kullanırız.
#mainwrapper .box .caption background-color: rgba (0,0,0,0.8); pozisyon: mutlak; renk: #fff; z-endeksi: 100; -webkit-geçişi: tüm 300ms kolaylığı; -moz-geçiş: tüm 300ms kolaylığı; -o-geçişi: tüm 300ms kolaylığı; -ms-geçişi: tüm 300ms kolaylığı; geçiş: tüm 300ms kolaylık; solda: 0;
Başlık 1
İlk resim yazısı, genellikle resim yazısı için kullanılan basit bir geçiş efektine sahip olacaktır. Resmin üzerine geldiğimizde resim yazısı alttan çıkacaktır. Bunu ele almak için, altyazı sabit bir 30px yüksekliğe sahip olacak ve görüntünün altına gizlemek için alt pozisyonunu -30px uyguladık.
#mainwrapper .box .simple-caption height: 30px; genişlik: 200px; Ekran bloğu; alt: -30px; hat yüksekliği: 25pt; metin hizalama: orta;
Başlık 2
İkinci tip, görüntü / kutu boyutunun tam genişliğine ve yüksekliğine (200x200px) sahiptir ve geçiş, yalnızca yukarıdan aşağıya kayan kayar bir kapı efekti gibidir..
#mainwrapper .box .full-caption width: 170px; yükseklik: 170px; üst: -200px; metin hizalama: sola; dolgu maddesi: 15px;
Başlık 3
Üçüncü başlık solma etkisine sahip olacaktır. Öyleyse, opaklık ekledik: 0 başlangıç durumu için.
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacity: 0; genişlik: 170 piksel; yükseklik: 170px; metin hizalama: sola; dolgu maddesi: 15px;
Başlık 4
Dördüncü başlık soldan sağa doğru kayar, bu yüzden başlangıç noktası olarak 200 piksel sola (sol: 200 piksel) sabitledik.
** Başlık 4: Slayt ** / #mainwrapper .box .slide-caption genişlik: 170px; yükseklik: 170px; metin hizalama: sola; dolgu maddesi: 15px; solda: 200 piksel;
Başlık 5
Beşinci başlık, döndürme etkisine sahip olacaktır. Sadece dönecek resim yazısı değil, aynı zamanda resimdir. Dönerek pozisyon değişikliği gibi daha fazla.
Bu nedenle, başlığı okumak için monitörünüzü döndürmeyi tercih etmediğiniz sürece, -180 derece döndürme ile dönüşme özelliğini ekleriz.
#mainwrapper # box-5.box .rotate-caption width: 170px; yükseklik: 170px; metin hizalama: sola; dolgu maddesi: 15px; üst: 200 piksel; -moz-dönüşümü: döndürme (-180deg); -o-dönüşümü: döndürme (-180deg); -webkit-dönüşümü: döndürme (-180deg); dönüşümü: döndürme (-180deg); #mainwrapper .box .rotate width: 200px; yükseklik: 400px; -webkit-geçişi: tüm 300ms kolaylığı; -moz-geçiş: tüm 300ms kolaylığı; -o-geçişi: tüm 300ms kolaylığı; -ms-geçişi: tüm 300ms kolaylığı; geçiş: tüm 300ms kolaylık;
Başlık 6
Son altyazı ölçeğe dönüşecek. Ancak, önceki başlıklarda, içindeki metin aslında .caption geçişi kayması ile birlikte gösterilecektir. Bu bölümde biraz farklı yapacağız.
Geçiş değişimi yapıldıktan sonra metin görünecektir. Böylece, metne geçiş gecikmesi ekleriz, bu durumda h3 ve p etiketi.
#mainwrapper .box .scale-resim yazısı h3, #mainwrapper .box .scale-resim yazısı p position: relat; solda: -200px; genişlik: 170 piksel; -webkit-geçişi: tüm 300ms kolaylığı; -moz-geçiş: tüm 300ms kolaylığı; -o-geçişi: tüm 300ms kolaylığı; -ms-geçişi: tüm 300ms kolaylığı; geçiş: tüm 300ms kolaylık; #mainwrapper .box .scale-caption h3 -webkit-geçişi-gecikme: 300ms; -moz-geçiş gecikmesi: 300 ms; -o-geçiş-gecikme: 300 ms; -ms-geçiş-gecikme: 300 ms; geçiş gecikmesi: 300ms; #mainwrapper .box .scale-caption p -webkit-geçişi-gecikme: 500ms; -moz-geçiş gecikmesi: 500ms; -o-geçiş gecikmesi: 500ms; -ms-geçiş-gecikme: 500ms; geçiş gecikmesi: 500ms;
Hadi onları hareket ettirelim
Sonraki bölümde, resimlerin veya kutuların üzerine geldiğimiz zaman resim yazısı davranışını tanımlayacağız..
Başlık Davranışı 1: Göster.
İlk resim yazısı için, kutunun üzerine geldiğimizde (aşağıdan) görünmesini istiyoruz. Bu hareketi ele almak için transform özelliğini kullanıyoruz ve aşağıdaki CSS kodu, başlığın ağırlığının% 100'ünü üste taşımasını söylüyor.
#mainwrapper .box: vurgulu .simple-caption -moz-transform: translateY (-100%); -o-dönüşümü: translasyon Y (% -100); -webkit-dönüşümü: translateY (% -100); dönüşümü: translateY (-100%);
TranslateY için negatif bir değere sahip olduğunuzun farkına varmazsanız, daha fazla fikir edinmek için önce bu öğreticiyi okumak isteyebilirsiniz..
Resim Yazısı Davranışı 2: Aşağı taşı.
Buna karşılık, ikinci başlık üstten aşağı doğru hareket edecektir. Yani, translateY için pozitif değere sahip olacağız..
#mainwrapper .box: vurgulu .full-caption -moz-transform: translateY (% 100); -o-dönüşümü: translasyon Y (% 100); -webkit-dönüşümü: translasyon Y (% 100); dönüşümü: translasyon Y (% 100);
Başlık Davranışı 3: Solmaya.
Üçüncü başlık ise aslında en kolay olanı. Kutu açıkken, başlık opaklığı görünür hale getirmek için 1'e dönecektir ve başlık sınıfına geçiş özelliği eklediğimizden, geçiş sorunsuz bir şekilde çalışmalıdır..
#mainwrapper .box: vurgulu .fade-caption opacity: 1;
Resim Yazısı Davranışı 4: Sola kaydırın.
Daha önce de bahsettiğimiz gibi, bu başlık sola kayar, ancak görüntü de sağa kayar. Yani, burada 2 CSS bildirimimiz var..
Aşağıdaki CSS kodu, kutunun üzerine geldiğimizde, başlığın genişliğinin% 100'ünü sola kaydırdığını gösterir. Şimdi translateX kullandığımıza dikkat edin, çünkü slaydın sağdan sola yatay olarak hareket etmesini istiyoruz..
#mainwrapper .box: vurgulu .slide-caption background-color: rgba (0,0,0,1)! Önemli; -moz-dönüşümü: translateX (% -100); -o-dönüşümü: translateX (% -100); -webkit-transform: translateX (-100%); opaklık: 1; dönüşümü: translateX (-100%);
Kutunun üzerine geldiğimizde görüntü sola kayar.
#mainwrapper .box: vurgulu img # image-4 -moz-transform: translateX (-100%); -o-dönüşümü: translateX (% -100); -webkit-transform: translateX (-100%); dönüşümü: translateX (-100%);
Başlık Davranışı 5: Döndürün.
Bu başlık diğerlerinden farklıdır, çünkü sağdan veya sola hareket etmeyecek, fakat dönecektir. Kutu vurgulu iken, resmi ve başlığı içeren div, resmi gizleyerek ve başlığı gösteren -180 saat yönünün tersine döner.
/ ** Başlığı Döndür: vurgulu Davranışı ** / #mainwrapper .box: vurgulu .rotate background-color: rgba (0,0,0,1)! Önemli; -moz-dönüşümü: döndürme (-180deg); -o-dönüşümü: döndürme (-180deg); -webkit-dönüşümü: döndürme (-180deg); dönüşümü: döndürme (-180deg);
Başlık Davranışı 6: Ölçeklendir.
Bu başlık, birkaç dönüşüm efektini birleştirecektir. Kutu asılı olduğunda görüntü başlangıç boyutundan% 140 (1.4) artar.
#mainwrapper .box: vurgulu # image-6 -moz-transform: scale (1.4); -o-dönüşümü: ölçek (1.4); -webkit-dönüşümü: ölçek (1.4); dönüşümü: ölçek (1.4);
Ve eğer yukarıdaki CSS’yi gördüyseniz Başlık 6 başlıktan sonra metni sola 200px oranında gizledik. Aşağıdaki CSS kodu, metnin ilk konumuna gitmesini söyler. Böylece, metin aynı anda soldan sağa doğru kayar.
#mainwrapper .box: vurgulu .scale-caption h3, #mainwrapper .box: vurgulu .scale-caption p -moz dönüşümü: translateX (200px); -o-dönüşümü: translateX (200px); -webkit-dönüşümü: translateX (200px); dönüşümü: translateX (200px);
- gösteri
- İndirme kaynağı
özet
Her ne kadar bu CSS özellikleri harika olsa da, ancak daha önce bahsettiğimiz tarayıcı desteği sınırlamaları nedeniyle henüz yaygın olarak uygulanmamaktadır. Ancak, bu yeni özellikleri denemeye devam edin, çünkü gelecekte bir web sayfasını şekillendiriyoruz..
Kredi
Öğreticideki küçük resimler aşağıdaki web sitelerinden (ekran görüntüsü) alınmıştır:
- Ayrı Bir Kitap
- Archiduchesse
- Vlog
- Hongkiat
- Tebrik Çiftliği
- Mark Ecko
