Cara Membuat Slider Konten Khusus CSS3 yang Berfungsi Penuh

Penggeser konten adalah cara yang bagus untuk membuat situs web lebih dinamis. Mereka menambahkan bakat, dan jika digunakan dengan benar, bisa menjadi perbedaan antara pembelian dan tombol kembali. Biasanya, mereka akan dibangun dengan jQuery atau perpustakaan Javascript lainnya. Namun, dengan munculnya CSS3, saya akan menunjukkan kepada Anda cara membuatnya hanya dengan CSS.

Hasilnya tidak akan menjadi hal yang paling semantik yang pernah dibuat, tetapi tetap akan berfungsi sepenuhnya.

Beberapa HTML sederhana untuk memulai

		

			
			

			

			

			

			

			

			
			

				

					
					

						
Halaman 1

						
Lorem ipsum dolor sit amet, conectur apa saja bla.

					

				

				

					
					

						
Halaman 2

						
Lorem ipsum dolor sit amet, conectur apa saja bla.

					

				

				

					
					

						
halaman 3

						
Lorem ipsum dolor sit amet, conectur apa saja bla.

					

				

				

					
					

						
halaman 4

						
Lorem ipsum dolor sit amet, conectur apa saja bla.

					

				

				

					
					

						
halaman 5

						
Lorem ipsum dolor sit amet, conectur apa saja bla.

					

				

				

					
					

						
halaman 6

						
Lorem ipsum dolor sit amet, conectur apa saja bla.

					

				

			
		
		
		

		

		

		

		

		

		
		

		
		

			

			

			

			

			

			

		

	

Memang, itu terlihat menakutkan. Sangat menakutkan. Ingat, ini tidak akan menjadi hal yang paling semantik di planet ini. Sekarang, izinkan saya menjelaskan.

Kami memiliki div " content-slider ", yang menampung semua konten. Kami hanya akan " margin: 0 auto " dan melupakannya.

Kemudian, kami memiliki dua bagian: div " content " dan " nav " ul . Div konten adalah yang menampung semua halaman kita, dan ul “nav” adalah yang memungkinkan kita mengakses halaman yang berbeda.

Sekarang, tepat di dalam div "konten", Anda akan melihat 6 div bersarang: " content-inner-1 " melalui " content-inner-6 ". 6 div ini akan membuat semua keajaiban bekerja, dan saya akan menjelaskan caranya nanti.

CSS Ajaib

 #penggeser konten {
font-family: arial;
lebar: 640 piksel;
margin: 0 otomatis;
margin-atas: 100px;
}

#isi {
melimpah: tersembunyi;
lebar: 640 piksel;
tinggi: 480 piksel;
-webkit-box-shadow: 0px 0px 50px 10px #c9c9c9;
-moz-box-shadow: 0px 0px 50px 10px #c9c9c9;
bayangan kotak: 0px 0px 50px 10px #c9c9c9;
}

#isi-dalam {
lebar: 10000 piksel;
tinggi: 480 piksel;
}

.halaman {
lebar: 640 piksel;
tinggi: 480 piksel;
mengapung: kiri;
}

Seperti yang saya katakan, semua yang kami lakukan pada div “ content-slider ” adalah memusatkannya, dan memindahkannya 100px dari bagian atas halaman.

Gaya div " content " sangat penting. Kami mengatur "meluap" ke "tersembunyi" - Ini memastikan bahwa slide tidak terlihat sampai dipilih.

Sekarang, div “ content-inner ” adalah yang menampung semua halaman. Itulah alasannya ia memiliki lebar 10.000px. Biasanya, javascript akan memberikan lebar yang tepat, tetapi dalam kasus ini, kami tidak menggunakan Javascript.

Halaman memiliki lebar dan tinggi, dan mereka melayang ke kiri untuk berdampingan.

Sekarang, kami memiliki beberapa gaya umum. Kami akan memberi style pada “ page-info ”, dan “ nav ”.

 .Info halaman {
tinggi: 90 piksel;
warna latar belakang: rgba(99, 99, 99, 0.6);
posisi: relatif;
margin-atas: 0px;
bawah: 103 piksel;
warna: #dedede;
padding-kiri: 20px;
bantalan-atas: 10px;
}

.halaman-info h2 {
ukuran font: 21px;
margin-bawah: 10px;
margin-atas: 0px;
warna: #fafafa;
}

.halaman-teks {
ukuran font: 15px;
}

Seperti yang Anda lihat, hanya beberapa gaya sederhana yang membuat info halaman menjadi semi-transparan dan membuat teks dapat dibaca.

Selanjutnya, kita akan menambahkan beberapa gaya CSS3 yang bagus ke tombol.

 .tombol {
mengapung: kiri;
latar belakang: #bababa;
lebar: 16 piksel;
tinggi: 16 piksel;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
batas-radius: 8px;
margin-kiri: 5px;
margin-kanan: 5px;
}

.button:arahkan kursor {
-webkit-box-shadow: sisipkan 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: sisipkan 0px 0px 2px 2px #d4d4d4;
box-shadow: sisipkan 0px 0px 2px 2px #d4d4d4;
}

.button:aktif {
-webkit-box-shadow: sisipkan 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: sisipkan 0px 0px 2px 2px #7a7a7a;
box-shadow: sisipan 0px 0px 2px 2px #7a7a7a;
}

.tombol a {
tampilan: blok;
lebar: 16 piksel;
tinggi: 16 piksel;
}

Kami membuat lingkaran tombol, dan memberi mereka inset drop shadow untuk menambahkan beberapa eye candy.

Terakhir, kita akan menambahkan bahan ajaib ke dalam campuran. Namun, sebelum itu, saya akan menjelaskan bagaimana semua ini akan bekerja.

Menggunakan CSS3 :target pseudo-selector , kita dapat menata elemen yang ada di url. Sebagai contoh:

 #contoh {
visibilitas: tersembunyi;
}

#contoh:target {
visibilitas: terlihat;
}

Sekarang, jika kita berada di url seperti “http://www.example.com/index.html #example , gaya “:target” di atas akan diterapkan. Dalam hal ini, div "contoh" akan terlihat.

Dengan menggunakan konsep ini, kita dapat meniru fungsi klik javascript. Jika pengguna mengklik tautan yang mengarah ke “http://www.example.com/index.html#example”, maka gaya akan diterapkan ke “example”.

Dalam hal ini, kami akan menggunakan ":target" untuk membuat penggeser konten kami berfungsi. Ketika pengguna mengklik salah satu dari enam tombol di nav, "konten-dalam" akan meluncur ke posisi yang sesuai, seperti halnya dengan versi javascript.

Berikut kodenya:

 #content-inner-1:target #content-inner {
-webkit-transisi: semua 400ms mudah;
-moz-transisi: semua 400ms mudah;
-o-transisi: semua 400ms mudah;
transisi: semua 400ms mudah;
margin-kiri: 0px;
}

#content-inner-2:target #content-inner {
-webkit-transisi: semua 400ms mudah;
-moz-transisi: semua 400ms mudah;
-o-transisi: semua 400ms mudah;
transisi: semua 400ms mudah;
margin-kiri: -640px;
}

#content-inner-3:target #content-inner {
-webkit-transisi: semua 400ms mudah;
-moz-transisi: semua 400ms mudah;
-o-transisi: semua 400ms mudah;
transisi: semua 400ms mudah;
margin-kiri: -1280px;
}

#content-inner-4:target #content-inner {
-webkit-transisi: semua 400ms mudah;
-moz-transisi: semua 400ms mudah;
-o-transisi: semua 400ms mudah;
transisi: semua 400ms mudah;
margin-kiri: -1920px;
}

#content-inner-5:target #content-inner {
-webkit-transisi: semua 400ms mudah;
-moz-transisi: semua 400ms mudah;
-o-transisi: semua 400ms mudah;
transisi: semua 400ms mudah;
margin-kiri: -2560px;
}

#content-inner-6:target #content-inner {
-webkit-transisi: semua 400ms mudah;
-moz-transisi: semua 400ms mudah;
-o-transisi: semua 400ms mudah;
transisi: semua 400ms mudah;
margin-kiri: -3200px;
}

Kesimpulan

Kami memiliki 6 div “ content-inner-[number] ”, dan setiap div sesuai dengan halaman. 6 halaman adalah 6 div.

Div “content-inner” adalah anak dari setiap div “ content-inner-[number] ”, jadi ketika 6 dari div “ content-inner-[number] ” ini adalah :targeted , kita dapat menata gaya “ content-inner ” div yang sesuai.

Karena setiap halaman lebarnya 640px, kita cukup menyetel margin-kiri dari div “ content-inner ” ke kelipatan 640.

Untuk membuat gaya “ :target ” ini berfungsi, kita harus memiliki tautan yang mengarah ke gaya tersebut. Oleh karena itu, " nav " ul di bawah halaman.

Untuk benar-benar menganimasikan " content-inner ", kami memberikannya properti animasi CSS3 biasa, dengan awalan vendor, tentu saja.

Nah, begitulah: Penggeser konten yang berfungsi penuh, meskipun non-semantik.