Hari ini kita akan belajar cara untuk membuat beberapa panel gambar geser dengan CSS3 ajah. Idenya adalah untuk menggunakan gambar background untuk panel dan menghidupkan mereka saat mengklik label. Kita akan menggunakan radio button dengan label dan menargetkan panel masing-masing.

HTML Markup

HTML akan terdiri dari tiga bagian utama: radio button dan label, wadah dengan panel dan mereka “slices” untuk setiap gambar, dan judul. Wadah dengan bagian class cr-bgimg akan memiliki divisi untuk setiap panel dan di dalam kita akan menempatkan rentang untuk setiap gambar dengan posisi latar belakang yang tepat. Jadi, panel pertama akan memiliki empat potong, masing-masing memiliki salah satu gambar sebagai latar belakang dengan posisi paling kiri. Panel kedua akan memiliki empat potong lagi tapi sekarang posisi latar belakang akan dipindahkan untuk menampilkan bagian selanjutnya dari gambar masing-masing:

<section class="cr-container">           
 
    <!-- radio buttons and labels -->
    <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
    <label for="select-img-1" class="cr-label-img-1">1</label>
 
    <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
    <label for="select-img-2" class="cr-label-img-2">2</label>
 
    <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
    <label for="select-img-3" class="cr-label-img-3">3</label>
 
    <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
    <label for="select-img-4" class="cr-label-img-4">4</label>
 
    <div class="clr"></div>
 
    <!-- panels -->
    <div class="cr-bgimg">
        <div>
            <span>Slice 1 - Image 1</span>
            <span>Slice 1 - Image 2</span>
            <span>Slice 1 - Image 3</span>
            <span>Slice 1 - Image 4</span>
        </div>
        <div>
            <span>Slice 2 - Image 1</span>
            <span>Slice 2 - Image 2</span>
            <span>Slice 2 - Image 3</span>
            <span>Slice 2 - Image 4</span>
        </div>
        <div>
            <span>Slice 3 - Image 1</span>
            <span>Slice 3 - Image 2</span>
            <span>Slice 3 - Image 3</span>
            <span>Slice 3 - Image 4</span>
        </div>
        <div>
            <span>Slice 4 - Image 1</span>
            <span>Slice 4 - Image 2</span>
            <span>Slice 4 - Image 3</span>
            <span>Slice 4 - Image 4</span>
        </div>
    </div>
 
    <!-- titles -->
    <div class="cr-titles">
        <h3>
            <span>Serendipity</span>
            <span>What you've been dreaming of</span>
        </h3>
        <h3>
            <span>Adventure</span>
            <span>Where the fun begins</span>
        </h3>
        <h3>
            <span>Nature</span>
            <span>Unforgettable eperiences</span>
        </h3>
        <h3>
            <span>Serenity</span>
            <span>When silence touches nature</span>
        </h3>
    </div>
 
</section>

CSS

Kita akan menghilangkan semua awalan vendor, tetapi Anda akan, tentu saja, menemukan mereka di file.
Kami akan pergi melalui style demo 1.

Tujuan kami adalah untuk pertama menyembunyikan tombol-tombol radio oleh menutupinya dengan label. Dalam web browser, klik pada label akan membuat kotak centang atau tombol radio masing dipilih. Memberikan ID untuk input, kita dapat menggunakan untuk atribut idref = dari label untuk referensi input masing-masing.

Kedua, kita ingin menempatkan semua gambarbackground dengan benar dan ketiga, kita ingin menunjukkan potongan gambar dan judul masing-masing saat mengklik label.

Jadi, mari kita pertama style bagian dan memberikan perbatasan putih dengan beberapa bayangan kotak kotak halus:

. cr-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
border: 20px solid # fff;
box-shadow: 1px 1px 3px RGBA (0,0,0,0.1);
 }

Karena kita ingin menggunakan selector umum untuk “mencapai” irisan citra yang tepat dan judul, kita perlu menempatkan label sebelum mereka kontainer. Mari kita pastikan bahwa mereka berada di atas sebagai lapisan (z-index) dan mendorong posisinya ke bawah dengan menambahkan margin atas 350px;

.cr-container label{
font-style: italic;
width: 150px;
height: 30px;
cursor: pointer;
color: #fff;
line-height: 32px;
font-size: 24px;
float:left;
position: relative;
margin-top: 350px;
z-index: 1000;
}

Mari kita mendandani label dengan menambahkan lingkaran kecil. Kita akan membuat elemen semu dan tempat itu berpusat di balik teks label:

.cr-container label:before{
content:'';
width: 34px;
height: 34px;
background: rgba(130,195,217,0.9);
position: absolute;
left: 50%;
margin-left: -17px;
border-radius: 50%;
box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
z-index:-1;
}

Untuk menciptakan pemisahan antara panel kita akan menggunakan sedikit trik. Kita akan membuat unsur lain pseudo-element label dan memperluasnya untuk meregangkan atas panel. Menggunakan gradien, kita akan membuat baris “fade out” di bagian atas:

.cr-container label:after{
width: 1px;
height: 400px;
content: '';
background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
position: absolute;
bottom: -20px;
right: 0px;
}

Panel terakhir tidak harus memiliki baris yang jadi kami hanya memberikan 0 width:

.cr-container label.cr-label-img-4:after{
width: 0px;
}

Sekarang, kita telah diurus tampilan label, kita dapat menyembunyikan, masukan:

.cr-container input{
display: none;
}

Setiap kali kita klik pada label, input masing-masing akan diperiksa. Sekarang kita dapat menargetkan label masing-masing menggunakan selector umum. Jadi, kita akan mengubah warna “selected” label:

.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
color: #68abc2;
}

Dan kita juga akan mengubah bayangan warna background dan kotak perputaran semu elemen-nya:

.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
    background: #fff;
    box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}

Wadah untuk panel gambar akan menempati semua lebar dan akan diposisikan mutlak. Kontainer ini akan digunakan kemudian untuk mengatur gambar background ke gambar yang sedang dipilih. Kita perlu melakukan ini untuk memiliki gambar terlihat secara default. Jadi kami juga akan menambahkan beberapa sifat latar belakang sudah:

.cr-bgimg{
    width: 600px;
    height: 400px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: 0 0;
}

Karena kita memiliki empat panel / image, satu panel akan memiliki lebar 150 px (600 dibagi dengan 4). Panel akan mengambang kiri dan kita akan menyembunyikan nya karena kita tidak ingin melihat irisan yang keluar ketika kita geser :

cr-bgimg div{
    width: 150px;
    height: 100%;
    position: relative;
    float: left;
    overflow: hidden;
    background-repeat: no-repeat;
}

Setiap rentang slice akan diposisikan mutlak dan pada awalnya, mereka akan disembunyikan dengan menempatkan mereka keluar dari panel dengan kiri-150px:

</pre>
.cr-bgimg div span{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: -150px;
    z-index: 2;
    text-indent: -9000px;
}

Sekarang, mari kita mengurus gambar wadah background dan slice gambar masing-masing:

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
    background-image: url(../images/1.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
    background-image: url(../images/2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
    background-image: url(../images/3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
    background-image: url(../images/4.jpg);
}

Kita juga perlu memberikan posisi background yang tepat untuk irisan tergantung pada panel:

.cr-bgimg div:nth-child(1) span{
    background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
    background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
    background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
    background-position: -450px 0px;
}

Ketika kita klik pada label kita hanya akan geser semua slice ke kanan:

.cr-container input:checked ~ .cr-bgimg div span{
    animation: slideOut 0.6s ease-in-out;
}
@keyframes slideOut{
    0%{
        left: 0px;
    }
    100%{
        left: 150px;
    }
}

… Semua kecuali bagian irisan dengan gambar background masing-masing. Mereka akan meluncur dari dalam -150px 0px untuk:

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
transition: left 0.5s ease-in-out;
animation: none;
left: 0px;
z-index: 10;
}

.cr-titles h3{
position: absolute;
width: 100%;
text-align: center;
top: 50%;
z-index: 10000;
opacity: 0;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
transition: opacity 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(1){
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 70px;
display: block;
letter-spacing: 7px;
}
.cr-titles h3 span:nth-child(2){
letter-spacing: 0px;
display: block;
background: rgba(104,171,194,0.9);
font-size: 14px;
padding: 10px;
font-style: italic;
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){
opacity: 1;
}
<pre>