Tamamen İşlevsel Bir CSS3 Yalnızca İçerik Kaydırıcısı Nasıl Oluşturulur

İçerik kaydırıcıları, bir web sitesini daha dinamik hale getirmenin harika bir yoludur. Yetenek eklerler ve doğru kullanılırsa satın alma ile geri düğmesi arasındaki fark olabilir. Normalde, jQuery veya başka bir Javascript kitaplığı ile oluşturulurlar. Bununla birlikte, CSS3'ün gelişiyle, size sadece CSS kullanarak nasıl bir tane oluşturacağınızı göstereceğim.

Sonuç, şimdiye kadar yapılmış en anlamsal şey olmayacak, ancak yine de tamamen işlevsel olacak.

Başlangıç ​​için bazı basit HTML

		

			
			

			

			

			

			

			

			
			

				

					
					

						
Sayfa 1

						
Lorem ipsum dolor otur amet, ne olursa olsun birleştir.

					

				

				

					
					

						
Sayfa 2

						
Lorem ipsum dolor otur amet, ne olursa olsun birleştir.

					

				

				

					
					

						
Sayfa 3

						
Lorem ipsum dolor otur amet, ne olursa olsun birleştir.

					

				

				

					
					

						
Sayfa 4

						
Lorem ipsum dolor otur amet, ne olursa olsun birleştir.

					

				

				

					
					

						
Sayfa 5

						
Lorem ipsum dolor otur amet, ne olursa olsun birleştir.

					

				

				

					
					

						
Sayfa 6

						
Lorem ipsum dolor otur amet, ne olursa olsun birleştir.

					

				

			
		
		
		

		

		

		

		

		

		
		

		
		

			

			

			

			

			

			

		

	

Kabul, bu korkutucu görünüyor. Çok korkutucu. Unutma, bu gezegendeki en anlamsal şey olmayacak. Şimdi, açıklayayım.

Tüm içeriği tutan bir “ content-slider ” div'imiz var. Sadece “ margin: 0 auto ” yapacağız ve unutacağız.

Ardından iki bölümümüz var: “ content ” div ve “ nav ” ul. İçerik div, tüm sayfalarımızı tutan şeydir ve “nav” ul, farklı sayfalara erişmemizi sağlayan şeydir.

Şimdi, "içerik" div'inin hemen içinde, 6 iç içe div göreceksiniz: " content-inner-1 " ile " content-inner-6 " arasında. Bu 6 div tüm sihrin çalışmasını sağlayacak ve tam olarak nasıl olduğunu daha sonra açıklayacağım.

Büyülü CSS

 #içerik kaydırıcısı {
yazı tipi ailesi: arial;
genişlik: 640 piksel;
kenar boşluğu: 0 otomatik;
üst kenar boşluğu: 100 piksel;
}

#içerik {
taşma: gizli;
genişlik: 640 piksel;
yükseklik: 480 piksel;
-webkit-box-shadow: 0px 0px 50px 10px #c9c9c9;
-moz-box-shadow: 0px 0px 50px 10px #c9c9c9;
kutu gölgesi: 0px 0px 50px 10px #c9c9c9;
}

#content-inner {
genişlik: 10.000 piksel;
yükseklik: 480 piksel;
}

.sayfa {
genişlik: 640 piksel;
yükseklik: 480 piksel;
yüzer: sol;
}

Dediğim gibi, " content-slider " div'e yaptığımız tek şey onu ortalamak ve sayfanın üstünden 100 piksel taşımaktı.

“ content ” div stili çok önemlidir. “Taşmasını” “gizli” olarak ayarladık – Bu, slaytların seçilene kadar görünmez olmasını sağlar.

Şimdi, " content-inner " div, tüm sayfaları tutan şeydir. 10.000 piksel genişliğe sahip olmasının nedeni budur. Normalde javascript ona doğru genişliği verir, ancak bu durumda Javascript kullanmıyoruz.

Sayfaların bir genişliği ve yüksekliği vardır ve yan yana olacak şekilde sola kayarlar.

Şimdi, bazı genel stilimiz var. “ page-info ” ve “ nav ” u biçimlendireceğiz.

 .sayfa bilgisi {
yükseklik: 90 piksel;
arka plan rengi: rgba(99, 99, 99, 0.6);
pozisyon: göreceli;
üst kenar boşluğu: 0px;
alt: 103 piksel;
renk: #dedede;
sol dolgu: 20 piksel;
üst dolgu: 10 piksel;
}

.page-info h2 {
yazı tipi boyutu: 21 piksel;
kenar boşluğu-alt: 10 piksel;
üst kenar boşluğu: 0px;
renk: #fafafa;
}

.page-text {
yazı tipi boyutu: 15 piksel;
}

Gördüğünüz gibi, sayfa bilgisini yarı saydam yapan ve metni okunaklı kılan basit bir stil.

Ardından, düğmelere güzel bir CSS3 stili ekleyeceğiz.

 .düğme {
yüzer: sol;
arka plan: #baba;
genişlik: 16 piksel;
yükseklik: 16 piksel;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
sınır yarıçapı: 8 piksel;
sol kenar boşluğu: 5 piksel;
sağ kenar boşluğu: 5 piksel;
}

.button:hover {
-webkit-box-shadow: iç metin 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: iç metin 0px 0px 2px 2px #d4d4d4;
kutu gölgesi: 0px 0px 2px 2px #d4d4d4;
}

.button:etkin {
-webkit-box-shadow: iç metin 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: iç metin 0px 0px 2px 2px #7a7a7a;
kutu gölgesi: ek 0px 0px 2px 2px #7a7a7a;
}

.düğme a {
Ekran bloğu;
genişlik: 16 piksel;
yükseklik: 16 piksel;
}

Düğmeleri daire şeklinde yaptık ve biraz göz kamaştırıcı eklemek için içlerine alt gölgeler verdik.

Son olarak, sihirli malzemeyi karışıma ekleyeceğiz. Ancak ondan önce, tüm bunların nasıl işleyeceğini açıklayacağım.

CSS3 :target pseudo-selector kullanarak, url'deki öğelere stil verebiliriz. Örneğin:

 #örnek vermek {
görünürlük: gizli;
}

#example:hedef {
görünürlük: görünür;
}

Şimdi, "http://www.example.com/index.html #example " gibi bir url'de olsaydık, yukarıdaki ":target" stilleri uygulanırdı. Bu durumda, "örnek" div görünür olacaktır.

Bu konsepti kullanarak bir javascript tıklama fonksiyonunu taklit edebiliriz. Kullanıcı "http://www.example.com/index.html#example" adresini gösteren bir bağlantıya tıklarsa , stiller "örnek"e uygulanır.

Bu durumda, içerik kaydırıcımızın çalışması için “:target” kullanacağız. Kullanıcı gezinmedeki altı düğmeden herhangi birine tıkladığında, "içerik içeriği", bir javascript sürümünde olduğu gibi uygun konuma kayar.

İşte kod:

 #content-inner-1:hedef #content-inner {
-webkit-geçiş: tüm 400ms kolaylığı;
-moz geçişi: tüm 400ms kolaylığı;
-o-geçiş: tüm 400ms kolaylığı;
geçiş: tüm 400ms kolaylığı;
sol kenar boşluğu: 0px;
}

#content-inner-2:hedef #content-inner {
-webkit-geçiş: tüm 400ms kolaylığı;
-moz geçişi: tüm 400ms kolaylığı;
-o-geçiş: tüm 400ms kolaylığı;
geçiş: tüm 400ms kolaylığı;
sol kenar boşluğu: -640 piksel;
}

#content-inner-3:hedef #content-inner {
-webkit-geçiş: tüm 400ms kolaylığı;
-moz geçişi: tüm 400ms kolaylığı;
-o-geçiş: tüm 400ms kolaylığı;
geçiş: tüm 400ms kolaylığı;
sol kenar boşluğu: -1280 piksel;
}

#content-inner-4:hedef #content-inner {
-webkit-geçiş: tüm 400ms kolaylığı;
-moz geçişi: tüm 400ms kolaylığı;
-o-geçiş: tüm 400ms kolaylığı;
geçiş: tüm 400ms kolaylığı;
sol kenar boşluğu: -1920 piksel;
}

#content-inner-5:hedef #content-inner {
-webkit-geçiş: tüm 400ms kolaylığı;
-moz geçişi: tüm 400ms kolaylığı;
-o-geçiş: tüm 400ms kolaylığı;
geçiş: tüm 400ms kolaylığı;
sol kenar boşluğu: -2560 piksel;
}

#content-inner-6:hedef #content-inner {
-webkit-geçiş: tüm 400ms kolaylığı;
-moz geçişi: tüm 400ms kolaylığı;
-o-geçiş: tüm 400ms kolaylığı;
geçiş: tüm 400ms kolaylığı;
sol kenar boşluğu: -3200 piksel;
}

Çözüm

6 adet " content-inner-[number] " div'imiz var ve her div bir sayfaya karşılık geliyor. 6 sayfa 6 div'dir.

"content-inner" div, her " content-inner-[number] " div'inin bir alt öğesidir, bu nedenle bu " content-inner-[number] " div'lerinden herhangi 6'sı :targeted olduğunda, " content-inner-[sayı]" content-inner stilini belirleyebiliriz. buna göre content-inner ”div.

Her sayfa 640 piksel genişliğinde olduğundan, " content-inner " div'in sol kenar boşluğunu 640'ın katlarına ayarladık.

Bu “ :target ” stillerinin çalışması için onlara işaret eden bağlantılara sahip olmamız gerekir. Bu nedenle, sayfaların altındaki “ nav ” ul.

“ content-inner ” gerçekten canlandırmak için, ona tabii ki satıcı önekleriyle birlikte olağan CSS3 animasyon özelliklerini veriyoruz.

İşte karşınızda: Anlamsal olmasa da tamamen işlevsel bir içerik kaydırıcısı.